Professional Tutorial for Post Formatting, both for Beginners and Advanced users.

last year
56 in writing

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.
For quick search to specific thing in the guide use CTR+Fto use find option in your browser.

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

The text above combines markdown with HTML, as well as this one with an ease

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>

Now that you've got a teaser on how simple and easy it is, let's dive in for some more options.

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

 
[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:

SuperSimpleTable
Easynicelooks
123
 
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.

I'm In the middle

<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".

This Image is in the middle


This Image is in the middle and if you open it in a new tab it will take you to www.google.com

<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.


Thank you for reading this guide. I hope that the knowledge gained from this post will help you in making better posts in the future.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  trending
53
  ·  2 months ago

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

·
56
  ·  2 months ago

Thanks!

56
  ·  last year

♦This can also be applied to comments♦
-Reasons to Follow-
Almost Anything Science & Technology
Life- / Meaningful topics/experiences/thoughts
Graphic Design & Photography
Computer Software & Hardware
Steemit General & Community related topics
Sociology

Now you know how to format both your posts and comments in a more professional manner. :)


I will follow back If I'm interested in the content you produce.

·
42
  ·  2 months ago

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

·
·
56
  ·  last month

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!

·
·
·
42
  ·  last month

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?

25
  ·  2 months ago

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. :)

·
56
  ·  2 months ago

I'm glad I could help out, happy steeming! :))

27
  ·  11 days ago

OMG, this post is so awesome and so helpful, especially for me, a newbie noob struggling with Markdown :D Thank you!

Following you. Now and always.

·
56
  ·  15 hours ago

I'm glad I could help, all the best.

58
  ·  last year

Wow~! It's awesome! Thank you. ^^

55
  ·  last year

Great thats helpful thanks

25
  ·  last month

HTML is the way to go - thanks!

·
56
  ·  last month

Your welcome! :)

65
  ·  last year

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.

46
  ·  2 months ago

Hello.
Your post is now a reference in the Como formatear un texto con markdown in the steem.central wiki in galego.
Thank you very much for your contributions.
Best Regards.

·
56
  ·  last month

Thank you! :)

·
25
  ·  2 months ago

Nice.

48
  ·  last year

As a newbie to Steem (and to markdown itself) I appreciate any good tips I get on improving the appearance of the posts. Can I ask: when steemit comes out of beta, will there be toolbars and all the perks and whistles that most forums seem to have these days?

Please--don't get me wrong! I love SteemIt--I just think anything that makes it easier to post our content is going to draw new writers like flies to honey!

Thanks for the article!

·
56
  ·  last year

Your right, improvement will come over time and formatting the post will be easier. But for now we'll have to stick to Markdown and a bit of HMTL to make our posts look good! :)

67
  ·  11 months ago

Nice article!

45
  ·  3 months ago

Good article. Thank you for the reinforcement for utilizing Markdown.

58
  ·  3 months ago

So helpful. Thanks

39
  ·  2 months ago

Thank you for the tips! I am about to do my introduce yourself and I am peeking around to get a handle on things. :)

41
  ·  last year

Thanks for the info. I didn't know you can combine markdown and html.

·
56
  ·  last year

That's why I'm sharing this, it's important knowledge, also since we are mentioning this, Most of the html functionality doesn't work. For example the align="" and many Markdown functionality as well, so I've made sure to include only those that are useful and work on Steemit.

67
  ·  last year

There you can find very useful interactive MarkDown tutorial: http://www.markdowntutorial.com/

·
56
  ·  last year

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.

·
·
67
  ·  last year

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.

·
·
·
56
  ·  last year

Thanks! Yeah the link is definitively useful, if someone wants an interactive way of learning, that site is good. :)

51
  ·  2 months ago

This post is AWESOME! I've already referred to it how many times, and have had this open as a tab to refer back to! (Course, the question is why this can't seem to stick in my head...) Went back to this again to figure out how to add links and youtube videos and realized that I never left a comment! Thanks again! You're a lifesaver!

·
56
  ·  last month

I'm so glad I could help, thank you very much for the kind words! :)

65
  ·  11 months ago

Do you know of any way to get an image within a post, that is not the first image, to appear as a thumbnail? I have read through a lot of tutorials, and I've tried experiments when it's late so it doesn't interfere with the busy posting times. But I haven't gotten anything to work. Sometimes it's not the first image that most captures the essence of a post that would work well in a thumbnail. Thanks!

·
56
  ·  11 months ago

I can't guarantee this, but seems as if the HTML image code is preferred as thumbnail, so putting a basic link first and a link coded in html should place the html image as thumbnail, but again I'm not sure about this and I didn't test it.

·
·
65
  ·  11 months ago

Thanks for giving me something to go on. I'll test it.
I'm glad I saw this post within the 30 day limit, so I could ask a question. Thanks for replying.

·
·
65
  ·  11 months ago

Nope. I tried using the markdown code for the first image and HTML for the second. The first image came up. I also tried making the 2nd image the header image by surrounding it with the level 1 header tags, but that didn't work either. It sure would be nice to be able to figure something out! Thanks for giving me something to test.

·
·
·
56
  ·  11 months ago

Your welcome, If I find out how to do it I'll tell you.

·
·
·
·
65
  ·  11 months ago

Same here.

·
·
·
·
31
  ·  2 months ago

Yes and i am trying to write Mathematics with Steem. I wonder how this can be done?

·
·
·
·
·
25
  ·  16 days ago

That interests me too.I am studying the very root of mathematics studying ancient greek philosophy of mathematekoi. I have learned a whole new way of looking at math and how mathematics is found through all nature,through all systems .There is a code of the golden ratio and fibonacci that reiterrates fractally through all levels of life. This Steem platform and the blockchain system of the infinte golden ledger with unlimited fractals of itself called blocks is definitely ready fordeep mathematical analysis and analogy

66
  ·  last year

This is perfect. Thanks for the tips.

66
  ·  last year

Thanks @minion for your support on that other issue. You're the real deal. Following and supporting you.