Professional Tutorial for Post Formatting, both for Beginners and Advanced users.
Today fellow steemians I'm sharing the best tips on how to format your post to look amazing.
I've recently got some messages on the Steemit chat, from fellow steemians saying how my posts look great, how did you do that with the image, the text, how did you make the follow button click-able etc. So today I've decided to provide an easy guide with all the info on how to do it, for both advanced and less experienced users. You can skip to the "Combine Both" part for quick tips & examples.
CTR+F
to use find option in your browser.amazing results
Breakdown
<center>Most of you format your posts in markdown, but what many don't know that you can use HTML as well, even combine these two to get some**amazing results**</center>
<center>_The text above combines markdown with HTML, as well as this one with an ease_</center>
Markdown
Below are the commands used in markdown and on how to use them, this is not the full list and I've excluded the one's you probably won't be using. Preview is first after that follows the code in the table.
Headers
H1
H2
H3
H4
H5
H6
# H1
## H2
### H3
#### H4
##### H5
###### H6
Italics & Bold
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Links
[I'm an link to google](https://www.google.com)
Images
Using the direct image link
(Right Click on Image > Copy Image Address or Open in new tab & copy link)
The link should have a; .jpg ; .png or .gif 90% of the time, those are extensions for images
Using the direct image link
https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png
Lists, Block quotes & Separators
- I'm In a list
- Or minus
- Or plus
* I'm In a list
- Or minus
+ Or plus
I don't quote anyone.
> I don't quote anyone.
Three or more...
Three or more...
---
You can also use *** and ___.
Tables
Example:
Super | Simple | Table |
---|---|---|
Easy | nice | looks |
1 | 2 | 3 |
Example:
Super | Simple | Table
--- | --- | ---
*Easy* | `nice` | **looks**
1 | 2 | 3
YouTube Videos
Direct Link:
Direct Link:
https://www.youtube.com/watch?v=9bZkp7q19f0
HTML
Because of some html functionality not working on Steemit and that It's easier to use Markdown to format 95% of the post, I've included only a few html codes.
Text
Bold text
Superscript text
<b>Bold text</b>
<sup>Superscript text</sup>
Combine Both
Now that we know some commands, before we put them to use, you can go Herefor the Full Markdown cheat-sheet and Here for the Full HTML one if your interested. Now for the fun part. I'll show you some easy to remember examples on how to use these in every post.
<center>I'm In the middle</center>
Simply at the start of anything you want in center put <center>
in front and </center>
at the end.
You can also style the text with markdown that's being "centered".
<center> This Image is in the middle</center>
<center>https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png<center>
<center> This Image is in the middle and if you open it in a new tab it will take you to **www.google.com**</center>
<center><a href="https://www.google.com" target="_new"><img alt="" border="0" src="https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png" /></a></center>
I'm also using this post to bring attention to an what I think important message to the dev's. The html for ref=_blank
doesn't work in other words, links that Open In new tab once you click on them. I'd love to see this implemented as soon as possible.
Hi! I just wanted to let you know that I referenced this post in my recent blog about formatting. https://steemit.com/steemit/@farmstead/markdown-editor-make-posts-easier
Thanks!
-Reasons to Follow-
Almost Anything Science & Technology
Life- / Meaningful topics/experiences/thoughts
Graphic Design & Photography
Computer Software & Hardware
Steemit General & Community related topics
Sociology
I read the whole guide, I'm still looking for the answer to my problem!
I want to make my links open in a new tab. I love links but I don't want to send people away from my content that I have worked so hard on to get them to come and see!
Anyone know how to do that?
I also found your comment way down here, noticed you like some of the same things. So I will have to now check your blog.
Thank you for the guide!
@zebbad
Unfortunately, it's disabled within steemit(the site), the code exists to enable links to open in a new tab but it's not enabled by the dev's, I would like links to open like that as well!
Thanks for the reply,
I can put an end to my search for code for now then.
It would be good to see this enabled soon
@ned @dan is this something you guys can do?
Thank you, it's very helpful to learn a bit more about this stuff!!
Hello @minion, I have started following you. Can you help me? If yes, then tell how can I make "follow button" as you have made in your comment above.
I do have a post, where I've posted a free to use animated follow button, check it out, below it is the code needed to use it, if you have any questions, feel free to ask!
P.S.
Sorry for the late reply.
It's ok.. and thank you very much..
deleted
Thank you, for your understanding.
Thanks so much @minion, that's really helpful to a newbie like me. I'm more familiar with HTML than Markdown but I'll get the hang of it with this kind of help I'm sure. :)
I'm glad I could help out, happy steeming! :))
Not bad, but again some of the Markdown functionality isn't supported in Steemit. I've included only the things that work and are most commonly used.
You make a great post and I sure what it help for a newbies!
I'm not Markdown guru :) but link above was help me to learn basic functions.
Thanks! Yeah the link is definitively useful, if someone wants an interactive way of learning, that site is good. :)
Wow~! It's awesome! Thank you. ^^
I truly enjoy the art of Text Illumination, which speaks to why I love this blog post. It's about making meaningful blogs more beautiful. Thanks for a practical tool guide (which now resides in my bookmarks bar). I have upvoted this blog post and will feature it in my daily gems blog this evening.
Great content.
This post is so helpful! Thank you for creating it. I am excited to try out some of your suggestions. Have upvoted this post :)
This is perfect. Thanks for the tips.
Thanks for this guide. I learned alot. And then I started listening to GANGNAM STYLE..... the knowledge..... it's gone......