A Helpful Guide to Steemit Post/Comment Formatting

in #howto6 years ago (edited)

Hello!

Since I started writing again I have spent a good bit of time just trying to figure out how to format my posts. While it might be quick to search this stuff up, sometimes the posts you do find aren't what you were looking for.

I've decided to make this guide for me as much as anybody else. Hopefully, this does help some Steemit community members.

I will be adding spaces in my code so I can show it to you all without it executing. For example, I'll say < br> and you should remove the space between < and b.



Break

To get spaces between paragraphs and/or images just add < br> or < br>< /br>.


Horizontal Line

To put a horizontal line through your post, e.g. what is below my last intro paragraph, use < hr>.


Embolden Words

Embolden words with < b>...< /b> to create something like this: Hello.


Italicize Words

Italicize words with < i>...< /i> or < em>...< /em>. You'll get something like this.


Headings

Make headings by adding < h1>...< /h1> through < h6>...< /h6>. < h6> makes text 10% smaller than normal text.

You can also make a heading smaller if you add the < sub>...< /sub> tag. Adding it to < h6> makes it really small.
< h6>< sub>hello< /sub>< /h6> makes something like this:

hello


You can also make a heading using Steemit markdown. #_hello with a space instead of an underscore will create a heading 1 text. ##_hello will create a heading 2 text.

#Do not forget to put a space between the pound sign and the text. Otherwise, you'll make a Steemit hashtag.


Subscript

The < sub>...< /sub> tag is the subscript tag. This is how it will function without the heading tag.


Superscript

The < sup>...< /sup> tag will function like this.


Bullet List

You can use *,+, or - with a space then text to create a list.

  • Hello
  • Hello
  • Hello


Numbered List

You can use a number, parenthesis, space, and then text to make a numbered list. #) Hello

  1. Hello
  2. Hello


Block Quote

Create a block quote by using < blockquote>...< /blockquote>

You can also use > and then text to make a block quote using Steemit markdown.

Hello World


Hyperlink

Create a hyperlink with < a href="INSERT URL HERE">...< /a>.

Steemit markdown also will create a link with TEXT]( URL but close both the brackets and parentheses.

For example, Nick Sinard Reviews.


Hyperlinking Images

You can use < a href> for hyperlinking images as well, but the image must be in this tag < img src="IMAGE URL">.

< a href="URL HERE">< img src=" IMAGE URL HERE">< /a>

For example,


Center Text & Images

Make sure your images are centered with < center>...< /center>. If you use < a href> use < center> on the outside. If not, it might mess with the hyperlink and image.

< center>< a href="URL HERE">< img src=" IMAGE URL HERE">< /a>< /center>


YouTube Videos

Simply insert a YT URL. No code or markdown needed.


D.Tube Videos

Sadly, inserting D.Tube videos isn't as simple as YT videos. In fact, you can't insert a D.Tube video in a post. The best you can do is screenshot the thumbnail of a video and hyperlink it.


Div Pull

You can pull your images or text to the left or right. Use < div class="pull-left">...< /div> or < div class="pull-right">...< /div>.

You can also use the < div> tag to make images smaller. Use it twice with an < img src> image and it shrinks the image. Do it 3 times and it will shrink even smaller.

< div class="pull-left">
< div class="pull-left">
< img src="INSERT IMAGE URL">
< /div>
< /div>



Tables


Create tables with

Ranking/Points/Username
-/-/-
1/200/Steemit

But replace the / with |

RankingPointsUsername
1200Steemit

Conclusion

I hope this post helped some people. I will be making another post soon about how to create a table with HTML. I'll then show you how to make a menu using it, and I'll show you how to make a slider to show off your images.


Resources:

https://steemit.com/stylinggiude/@ladyluck/size-your-text-and-photos-how-many-you-want-micro-sizing

https://steemit.com/steemit/@steemitguide/how-to-contruct-a-2-or-3-column-table-using-steemit-s-raw-markdown-editor-tutorial-and-codes-for-beginners

https://steemit.com/howto/@dadview/how-to-add-hyperlinks

https://steemit.com/basic/@magnebit/some-basic-html-formatting-in-steem

https://steemit.com/steemit/@mushroomuser/adding-dtube-videos-to-your-post

https://steemit.com/writing/@minion/professional-tutorial-for-post-formatting-both-for-beginners-and-advanced-users

https://steemit.com/steemit/@thecryptofiend/markdown-basics-for-beginners