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

[minion]

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:

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.

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.

Comments

[farmstead]

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

[minion]

Thanks!

[minion]

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

[zebbad]

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

[minion]

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!

[zebbad]

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?

[tripswithtam]

Thank you, it's very helpful to learn a bit more about this stuff!!

[csabhishekkumar]

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.

[minion]

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.

[csabhishekkumar]

It's ok.. and thank you very much..

[venuspcs]

deleted

[minion]

Thank you, for your understanding.

[kayeliz]

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

[minion]

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

[smailer]

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

[minion]

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.

[smailer]

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.

[minion]

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

[ninzacode]

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

[lpfaust]

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.

[jessicaleebrooke]

This post is so helpful! Thank you for creating it. I am excited to try out some of your suggestions. Have upvoted this post :)

[condra]

This is perfect. Thanks for the tips.

[trustert]

Thanks for this guide. I learned alot. And then I started listening to GANGNAM STYLE..... the knowledge..... it's gone......

[judyd100]

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!

[minion]

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

[mpa]

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

[minion]

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.

[inkha]

Great thats helpful thanks

[linkback-bot-v0]

This post has been linked to from another place on Steem.

• Monday Ramble Through Steemit -- Notes On My Favourite Reads Sept. 5 by @shadowspub
• Finding Success on Steemit in 5 Steps by @voltarius
• OFFICIAL Steemit FAQ - Rough Draft - I Need Your Input! by @shenanigator
• Sharing the Love and the Spotlight : Purveyor of Fine Content (More Hidden Gems 6) by @lpfaust

About linkback bot. Please upvote if you like the bot and want to support its development.

[anthonychidi]

Nice.

[haphazard-hstead]

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!

[minion]

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.

[haphazard-hstead]

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.

[minion]

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

[haphazard-hstead]

Same here.

[robkim55]

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

[jeremiahjohnson]

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

[haphazard-hstead]

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.

[dresden]

Nice article!

[gatmi]

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

[onealfa]

So helpful. Thanks

[quell.navi]

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

[teresachang]

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!

[minion]

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

[gazetagaleguia]

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.

[minion]

Thank you! :)

[dcardinal]

HTML is the way to go - thanks!

[minion]

Your welcome! :)

[dosmakoff]

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.

[minion]

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

[wanderinglich]

Very helpful post, i'm a beginner and its exactly what i was looking for. Thanks!

[chesiq]

Thank you!
I have formated my post THE WAY IT SHOULD HAVE BEEN!!! FUK YEH!

Now.. don't mean to be rude or anything but you should include like the first thing is that you can do THIS:

Title

by adding h1 tag inside of a center tag. It's obvious when you know it but I had to google for additional answers to get that. If you include it I think your post will become 100% complete mark up guide you need to know.

Here is what I came up with thanks to you:
https://steemit.com/introduceyourself/@chesiq/introduction-real-story-of-both-success-and-failure-a-poll-and-an-announcement-all-in-one

[arthur.grafo]

Hi. Just got accepted and am trying to work out how to make sense and learn from your excellent tutorial.
Maybe I should have first studied a lot more, like etiquette etc, how to thank with points etc, but I was eager to learn an answer to a pressing problem I foresee, with regard to formatting, so I apologise in advance if I step on any toes.
I write Science Fiction & Fantasy books and in total (not that I'll post that much), the stories equal about 26,000 pages. To make changes to my books is not an easy solution. Let me explain.
I am writing the books, but actually, what I am doing is copying the diaries of the principal family. When we both realised what is happening, we had to make some rules so that I don't mess up their lives. One font is the story font, and anything I write using it, affects them (through my assuming as the Author). When we chat, I use another font and I can say anything without affecting them.
This means I use a variety of fonts and ink colours. I have been wondering how I can adapt to placing the stories in Steemit, but I only see one answer and I do not know whether it would be acceptable.

What if I turn each page into a photo (jpg) and post the photos? I'd then be able to keep my layout, fonts, colours and the odd picture or drawing - and I would not have to re-write all those pages!
Does what I'm hoping to do make sense?
Thanks.

[minion]

Well that would be the easiest way to do it, since as far as i know, Steemit doesn't support other fonts. Good luck and your welcome! :)

[bigdizzle91]

man i just found this after a month on steemit and damn i wish i found it day one. awesome informative post and even if its a bit late im gunna resteem it now. thank you very much

[yashpalgoyal1304]

Is markdown used somewhere else too and is it a separate language??

[grigoryovov]

Good to know! Thank you :))))

[jameshsmitharts]

Thanks, this really helps my friends joining steemit

[annzue]

Good to know the Formating, this is my first comment. let see what i can support for this community.

Cheers

[soulturtle]

Thank you so much for this post. As a designer, presentation is important to me, yet as someone not well versed in code, your post was immensely useful. It gave me pretty much all the basics I needed to make a good looking post. Even though I'm still a minnow, my posts feel premium and even professional after using these tips. Thank you again for this helpful post.

[simon62]

We'll, that was a lot. I don't know how useful that blog will be in short-term however, because while you said much about what could be done, I could find nothing about 'how to'
Italics - you didn't say how. I found when blogging a little icon marked italics, but upon clickon it provided in my blog italics and then the typed word I had wanted to be in italics but not. No amount of untutored play let me find out how, to use italics in that one word.
Thank-you.
I will have to come back and read again, but without the simple stuff, idiots such as I, can glean no meaning from your post.

[oneiroslivio]

Hi! Awesome post!

I just wanted to ask, can you center headers? I tried to but can't seem to get it to work

[alxgraham]

Thanks for this Minion. Much appreciated.

[offanziva69]

Thx for help ! have great day sir!

[maargarita]

Really helpful!! I just had no idea how it worked, now I gotta write things with nice style! Thanks!

[maargarita]

Really helpful!! I just had no idea how it worked, now I gotta write things with nice style! Thanks! Following!

[lucassantos]

Thanks for the article! I was figuring out how to make tags work here. I did use it for my #Introduceyourself post :)

[openvisionz]

Im looking for info on formatting Dtube, but this is very informational thank you

[jorgerp]

thanks you so much!

[paigegirl]

This is a great post. I didn't know you could actually blog using html. Thanks for this.

[gabbyg86]

Thank you for this info. I'm going to bookmark this for sure.

[ronluilh]

This is really helpful. Thanks

[vandenberg]

This was just what I was looking for! Thanks.

[csabhishekkumar]

Hello guys... I am new here.. so, please share some links about how to write and format my post to make them better and also How to make my post attractive.

[choke]

Thanks for this post, really helpful stuff for newbies like myself! ;)

[choke]

Thanks for this post, really helpful stuff for newbies like myself! ;)

[promisearts]

Thanks for this educative post, kindly check out my realistic art