If you wanted to gather more sources of information, kindly click the hyperlinks below.

1. Markdown Cheatsheet by Adam Prichard (2017)
2. Mastering Markdown by Github (2014)
3. Formatting your Steemit posts using HTML markup by @johnrhytnmic(2017)

It is up to you what markup you would use whether HTML or Markdown but for the following guide ,I am mostly using HTML because I am more comfortable using it.

• Image Headings

https://images.hive.blog/325x55/https://images.hive.blog/DQmUN6uL4SDQDL2iA1JeTFeQGnZRUKpM7J6JYCE7CYbxxaf/Copy%20of%201.png

Here is how it looks:

Next thing is formatting your text including the text alignment and text empahsis -such as bold ,italic, etc.

• Alignment

  • Align Left

    
    In default, your text will always be aligned left.
    Here is the code:
    <div class="text-left">This Text is aligned to the left.</div>

    Here is how it looks:

    This Text is aligned to the left

  • Align Center

    
    Text that are aligned to the center are mostly captions of your pictures, lyrics of songs and many more.
    Here is the code:
    <div class="text-center">This Text is aligned to the center</div>

    Here is how it looks:

    This Text is aligned to the center.

  • Align Right

    
    Here is the code:
    <div class="text-right">This Text is aligned to the right</div>

    Here is how it looks:

    This Text is aligned to the right.

  • Justify

    
    In format compositions, it is always a must to justify your text. And I have been using this alignment in my blogs since it is very neat and clean to see
    Here is the code:
    <div class="text-justify">This Text is aligned to the justify</div>

    Here is how it looks:

    This Text is justified and to have a better view, I intended to make this long so you could see that it is both aligned to the left and right side. This makes the text very presentable and formal.

• Text Emphasis

  • Bold

    
    Here is the code:
    <b>This text is bold.</b>
    
    

    Here is how it looks:

    This text is bold.

  • Italic

    
    Here is the code:
    <i>This text is italic.</i>
    
    

    Here is how it looks:

    This text is italic.

  • Sub

    
    You could use this when putting captions below your picture. I got this idea from @ybanezkim26. Visit also his blog, he's a great one.
    Here is the code:
    <sub>insert your photo caption</sub>
    

    Here is how it looks with a photo(just add the cod for putting text to center):

    
    
    _{How to Format your Blog in an Epic Way}

  • Blockquote

    
    Here is the code:
    <blockquote>This text is in a blockquote.</blockquote>
    
    

    Here is how it looks:

    This text is in a blockquote.

  • Strikethrough

    
    Here is the code:
    <strike>This text has a strikethrough.</strike>
    
    

    Here is how it looks:

    This text has a strikethrough.

• Center

  In some instances, your uploaded images may not be at full width with respect to at hive.blog's website width. As a result, your images would be aligned to the left which leaves a gap on the right. This is not good to look and so it is better to pull it to the center.
  
  Here is the code:
  <center>insert your image link here </center>
  
  

  Here is how it looks

• Pull-left / Pull-right

  
  Also, there are situations where you have a lot of pictures and you want it to be included in the blog. As a result, your blog looks very crowded with pictures or it looks very lengthy. I recommend to have some of your pictures placed side-by-side.
  
  Here is the code:
  <div class="pull-left">insert image link here</div>
<div class="pull-right">insert image link here</div>
  
  

  Here is how it looks

• Image Hyperlink

  
  Here is the code:
  <a href="insert the link to where it is referenced to">insert image link the image name </a>
  Example:
  <a href="https://hive.blog/hive-174578/@jason04/only-investors-belong-in-hive-or-by-jason04"> ![123.gif](https://images.hive.blog/DQmUG2oAvyZ1QDkc24tzJVVePPNLLDWuP9uLuYXqPBH492E/123.gif) </a>

Here is how it looks(click the picture and it takes you to that blog ):

• Text Hyperlink

  
  Here is the code:
  <a href="insert the link to where it is referenced to">insert text here </a>
  Example:
  <a href="https://hive.blog/hive-174578/@jason04/only-investors-belong-in-hive-or-by-jason04">Only INVESTORS Belong in HIVE | Investor of Time and Right Effort</a>

Here is how it looks:

So for tables, I am gonna be using the markdown code. The previous codes that I used were on HTML formats. I am comfortable dealing with HTML codes than the markdown because HTML codes deals with keywords while the markdown deals with symbols. And I think keywords are more easy to remember than symbols.

But for this element I am using the markdown codes because it is much easier than the HTML code for tables.

Here is the code:
Column 1 Title | Column 2 Title
------------ | -------------
Row 2,Column1 Content | Row 2,Column2 Content
Row 3,Column1 Content | Row 3,Column2 Content

Here is how it looks

Column 1 Title	Column 2 Title
Row 2,Column1 Content	Row 2,Column2 Content
Row 3,Column1 Content	Row 3,Column2 Content

Moreover, you could also input pictures to the tables. Sometimes, I used tables as my pictures frames. Like this one:

• Bulleted List

  
  Here is the code(erase the [space] portion of the code and take note of the spaces :
  [no space]-[single space] Item A
[two spaces]-[single space] Item A.1
[four spaces]-[single space] Item A.1.1
  _{On the main heading of the list, there is no space before the "-" symbol. On the subheading or the content of that heading, you add two spaces before the "-" symbol. And if that subheading contains another subheading, you add four spaces and so on.
  Also remember that every after the "-" symbol, there is always a single space or else the list won't work.}

Here is how it looks:

• Item A
  • Item A.1
    • Item A.1.1

• Numbered List

  
  Here is the code(erase the [space] portion of the code and take note of the spaces :
  [no space]1.[single space] Item A
[three spaces]a.[single space] Item A.1
[six spaces]a1.[single space] Item A.1.1

1. Item A
   1. Item A.1
      1. Item A.1.1

• Horizontal Rule

  It is used to separate the contents of your blog by adding a horizontal line. But the disadvantage of this one is that it is not visible in night mode of hive.blog.
  
  Here is the code:
  <hr>
  
  

  Here is how it looks:

• Custom Blog Dividers

  I made several custom made blog dividers and if you wanna get one feel free to visit this blog and feel free to contact me
  

• About the Author Statement

Lastly is the about the author section. And again, I inherited this idea from @ybanezkim26. Thank you so much sir! You influenced a lot of people including me.

Anyway, this about the author section is where you say your ending statement and who you are as a blogger which includes your blog niche, your hobbies and anything about you.

Here is a sample code:
<div class="pull-left">
https://images.hive.blog/400x400/https://images.hive.blog/DQmVPZSXpCxUorKd2jnPKX8k2kiRQoUkX8yLcySMUCdzzQY/dasxza.png
</div>
<div class="text-justify">
<b>Spread Positivity and Keep the Vibes Up!</b>
<p>
<sub>
What's up Hivers ! Give me a Hive Five.......................Nice! This is Chris Jason A. Oswa, your boy @jason04. I am currently a Computer Engineering here in Cebu,Philippines. I am a gamer ever since and if you are too, join me in my blogs. I often do travel to places but sometimes, I just enjoy the moment and I can not take pictures on my travels. Other than that, I also love doing graphics and designs, so if you got some proposals regarding that matter, do not hesistate to contact me. Thanks for dropping by ladies and gents! If you like my blog, I would appreciate it if you upvote and follow me. Also, don't forget to comment and let's have fun in the comments section. See yah next time!
</sub>
</div>
Scroll through the bottommost part of this blog and view my about the author section. You could also visit other peoples blogs especially Filipinos because as what I have observed, most Filipino hivers are having this one.

• GIF Footer

These GIF footers shows the main niche that you are gonna be showing to the community. In this way people could know what type of blogs are you gonna be creating including but not limited to arts, photography, gaming, travels and many more. This is just somehow related to your about the author statement but in a graphical or in an animated way.

I also sell GIF footers for everyone and please feel fee to contact me if you wanna have yours.

AESTHETIC GIF FOOTERS

All of those formatting are useless if your content is a trash or is in a bad quality. No matter how good your layout is , if your blog is plagiarized or is a spammed content, your effort in formatting your blog will be put in vain. Might as well have a good quality and legit content. After all, it boils down to the substance of your content and its authenticity. It's just that formatting your blogs in a visually appealing way adds favor to your blog.

Wow. You reached this far? Thank you! That's it for today's blog. Hope you enjoyed it and had fun :)

Spread Positivity and Keep the Vibes Up!

_{What's up Hivers ! Give me a Hive Five.......................Nice! This is Chris Jason A. Oswa, your boy @jason04. I am currently a Computer Engineering here in Cebu,Philippines. I am a gamer ever since and if you are too, join me in my blogs. I often do travel to places but sometimes, I just enjoy the moment and I can not take pictures on my travels. Other than that, I also love doing graphics and designs, so if you got some proposals regarding that matter, do not hesistate to contact me. Thanks for dropping by ladies and gents! If you like my blog, I would appreciate it if you upvote and follow me. Also, don't forget to comment and let's have fun in the comments section. See yah next time!}