https://files.peakd.com/file/peakd-hive/jason04/TQFyWJ3e-HOW20TO20FORMAT20YOUR20BLOG20IN20AN20EPIC20WAY.gif
<div class="text-justify">
What's up my homeys! Another day, another time for blogging. This is your boy @jason04 saying "Spread positivity and keep the vibes up"! 

<br>These days have been a lot stressful because of a lot of school works and catching up with the deadline is a must. I had a free time this day so I thought of sparing some time to blog. I was supposed to add another entry for my series " Minecraft Creations" but that takes a lot of time including the creation of the structure and formatting my blog and the write-ups so I opted to share how I format my blogs. I also searched several markdown codes that are necessary for the blogs.

Not to brag but I have been receiving a lot of compliments about how cool my blog layout is, so I decided to share to you all how I format my blogs. No one did ask for it but let me just share it anyway.

Other than having a good substance of your content, one way of attracting readers is the way of how you format your blogs. Making your blogs presentable attracts the eye and thus, you could gather a lot of people to read your blogs.

Other thing is that it makes your posts more organized and you could somehow emphasize the very important or crucial information that you are referring to your content. 
</div>

<strong>If you wanted to gather more sources of information, kindly click the hyperlinks below. </strong>
1. <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown Cheatsheet</a> by Adam Prichard (2017)
2.  <a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a> by Github (2014)
3. <a href="https://steemit.com/steemit/@jonrhythmic/formatting-your-steemit-posts-using-html-markup-text-formatting-guide"> Formatting your Steemit posts using HTML markup </a>by @johnrhytnmic(2017)

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

https://images.hive.blog/DQmWVug9F5fsMfpRdjaAWr6FodQog2JLwqno9f5E6FU6oxH/1.png

<img src="https://files.peakd.com/file/peakd-hive/jason04/rwWjRRUI-1207.png" alt="1 7.png">

![HOW TO FORMAT YOUR BLOG IN AN EPIC WAY.png](https://images.hive.blog/DQmSCnehyh8jJmMfk4KXxJfyVhUCcxZ3PVaQePJmCAmPhrt/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY.png)

<div class="text-justify">Before anything else, let's start on how I do my blog thumbnails. There are a lot of vector graphics software that you could use like Adobe Illustrator or Inkscape (the one I mostly used) but if you wanted some premade templates, I could recommend you to use <a href="canva.com"><b><i>Canva</i></b></a>. There are a lot of premade templates that you could use and edit it in your likings. 
</div>
<table>
<tr>
<td>
https://images.hive.blog/DQmUG2oAvyZ1QDkc24tzJVVePPNLLDWuP9uLuYXqPBH492E/ONLY%20INVESTORS%20BELONG%20TO%20HIVE.gif
</td>
<td>
https://images.hive.blog/DQmRn21H7U8oZUvSxswu3rg8jcTdCNex94ix635LysMsRyE/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY.gif
</td>
</tr>
</table>
<div class="text-justify">
Moreover, you could observe that most of my thumbnails are GIFs or animated. I know that it would be tedious to do that if you would use a manual software but that animation is already offered by Canva.  There are about 10 animations that you could use in Canva so there is no hassle in making animated thumbnails. 
<blockquote>If ever you wanted to make one,  first thing that you should do is to choose a template or create a blank page with a custom dimensions(you could still use a template with your blank page).  Next is to do your blog thumbnail (make it simple but elegant). 
<br><br>After finishing all edits and revisions to your blog thumbnail, duplicate the page  and set the animation time for the first page to 0.1 s with no animation. This is because the first thing that the blog preview would show is the very first frame or image of the gif. Then set the second page to your desired length of animation time and as well as choose the kind of animation that you want
<br><br>Lastly, save the your thumbnail as a GIF and upload it to your draft.
</blockquote>

Anyway, this is just my suggestion or my style. You could still stick to your own preference though. I just find it fun to do and I also love how it makes my blog attractive.
</div>

<img src="https://files.peakd.com/file/peakd-hive/jason04/lyomvIu9-1206.png" alt="1 6.png">
<div class="text-justify">
Now, let us talk about headings or titles of the various sections of your blogs. This headings are important to divide your topics into different parts and so readers could easily locate the specific part that they want to navigate in your blog.

<br>
- <h3>Text Headings </h3>
Here are like 6 main header sizes and here is the code:
<center>`<h1>Heading 1</h1>` 
`<h2>Heading 2</h2>` 
`<h3>Heading 3</h3>` 
`<h4>Heading 4</h4>` 
`<h5>Heading 5</h5>` 
`<h6>Heading 6</h6>` </center>
<blockquote>Here is how it looks:</blockquote>
<center>
<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</center>
</div>

- <h3>Image Headings</h3>
<div class="text-justify">
There are times when you have several main headings which contains sub-headings. So for the main headings, I often use pictures for my main headings which you could observed from my blogs including this. Feel free to follow how I make my image headings. You can make this in Canva or in your desired graphics software.<br><br><b>Dimensions :</b> 1625 x 320 <i> (my recommended size or higher provided that you follow the aspect ratio) and you could also change the height and the width if you would like to. I recommend higher px for higher quality</i>
<br><br><b>Syntax:</b><i> If you already had the image with 325 x 64 size or close to that ratio, it is good to go. But if you had the image on a higher size (width that is like 120 up), follow the code "<b>https://images.hive.blog/325x55/ and insert here the imagelink</b>. You could also change the length and width depending on your preference."</i>
</div>
<br>Here is the code:

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

<blockquote>Here is how it looks:</blockquote>

<center>![Copy of 1 (1).png](https://images.hive.blog/325x55/https://images.hive.blog/DQmWvuz1sMTBQkUGSciRAnGeyhEYYyN5GvURzRMN6jVjx34/Copy%20of%201%20(1).png)
<br>![Copy of 1 (2).png](https://images.hive.blog/325x55/https://images.hive.blog/DQmbRJZHMYTKdEZJbKstUx6tLt5KGHXM4v3dV5Wx1rBzSBb/Copy%20of%201%20(2).png)
<br>https://images.hive.blog/325x55/https://images.hive.blog/DQmUN6uL4SDQDL2iA1JeTFeQGnZRUKpM7J6JYCE7CYbxxaf/Copy%20of%201.png</center>



<img src="https://files.peakd.com/file/peakd-hive/jason04/4xBEai0Y-1208.png" alt="1 8.png">
Next thing is formatting your text including the text alignment and  text empahsis -such as bold ,italic, etc.
- <h3>Alignment</h3>
  - <h4>Align Left</h4>
In default, your text will always be aligned left.
<b><i>Here is the code: </i></b>
`<div class="text-left">This Text is aligned to the left.</div>`<blockquote>Here is how it looks: </blockquote><div class="text-left">This Text is aligned to the left</div>

  - <h4>Align Center</h4>
Text that are aligned to the center are mostly captions of your pictures, lyrics of songs and many more.
<b><i>Here is the code:</i></b>
`<div class="text-center">This Text is aligned to the center</div>`<blockquote>Here is how it looks: </blockquote><div class="text-center">This Text is aligned to the center.</div>
  - <h3>Align Right</h3>
<b><i>Here is the code:</i></b>
`<div class="text-right">This Text is aligned to the right</div>`<blockquote>Here is how it looks: </blockquote><div class="text-right">This Text is aligned to the right.</div>

  - <h4>Justify</h4>
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
<b><i>Here is the code:</i></b>
`<div class="text-justify">This Text is aligned to the justify</div>`<blockquote>Here is how it looks: </blockquote><div class="text-justify">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.</div>
- <h3>Text Emphasis</h3>
  -  <h4>Bold</h4>
<b><i>Here is the code:</i></b>
`<b>This text is bold.</b>`<br><br><blockquote>Here is how it looks:</blockquote><b>This text is bold.</b>

  -  <h4>Italic</h4>
<b><i>Here is the code:</i></b>
`<i>This text is italic.</i>`<br><br><blockquote>Here is how it looks:</blockquote><i>This text is italic.</i>
  - <h4>Sub</h4>
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. 
<b><i>Here is the code:</i></b>
`<sub>insert your photo caption</sub>`<br><blockquote>Here is how it looks with a photo(just add the cod for putting text to center): </blockquote>
https://images.hive.blog/DQmRn21H7U8oZUvSxswu3rg8jcTdCNex94ix635LysMsRyE/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY.gif
<center><sub>How to Format your Blog in an Epic Way</sub></center>
  -  <h4>Blockquote</h4>
<b><i>Here is the code:</i></b>
`<blockquote>This text is in a blockquote.</blockquote>`<br><br><blockquote>Here is how it looks:</blockquote><blockquote>This text is in a blockquote.</blockquote>
  -  <h4>Strikethrough</h4>
<b><i>Here is the code:</i></b>
`<strike>This text has a strikethrough.</strike>`<br><br><blockquote>Here is how it looks:</blockquote><strike>This text has a strikethrough.</strike>

<img src="https://files.peakd.com/file/peakd-hive/jason04/41MUf3Cp-1209.png" alt="1 9.png">


- <h3>Center</h3><div class="text-justify">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. </div>
<b>Here is the code:</b>
`<center>insert your image link here
</center>`<br><br><blockquote>Here is how it looks</blockquote>

<center>
![HOW TO FORMAT YOUR BLOG IN AN EPIC WAY (4).png](https://images.hive.blog/DQmTUAWVpB5EJFHYv1yRT9SEX1uXRT4EEvTmj6Yx4Rq7Uut/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY%20(4).png)
</center>
- <h3>Pull-left / Pull-right</h3>
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.</div>
<br><b>Here is the code:</b>
`<div class="pull-left">insert image link here</div>`
`<div class="pull-right">insert image link here</div>`<br><br><blockquote>Here is how it looks</blockquote>
<div class="pull-left">

![HOW TO FORMAT YOUR BLOG IN AN EPIC WAY (5).png](https://images.hive.blog/DQmTq9ZXwDxuDn8xmZoKWsEAzzig5A3uBZRaDiMUP9BbytG/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY%20(5).png)
</div>

<div class="pull-right">

![HOW TO FORMAT YOUR BLOG IN AN EPIC WAY (6).png](https://images.hive.blog/DQmf99qijPvPubtvzfm7zieLoP5L84xwsrV7VWq7eEd6yvZ/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY%20(6).png)
</div>
<br><div class="text-justify">You could also use this code for a combination of a picture with a text on the side. Moreover, if you use two languages for your blogs, you could also have a text on the left side with a text on the right side with the other language.</div>

<br><img src="https://files.peakd.com/file/peakd-hive/jason04/hEZu5mGA-12010.png" alt="1 10.png">
<div class="text-justify">A hyperlink is a clickable or tappable image or text that leads you to a file or a link. Commonly, text are the ones who are hyperlinked to a certain site. Images are rarely used for hyperlinks because unlike text, text somehow gets highlighted when hyperlinked to another site.</div>

- <h3> Image Hyperlink</h3>
<b>Here is the code:</b>
`<a href="insert the link to where it is referenced to">insert image link the image name
</a>`
<b>Example:</b>
`<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>`
<blockquote>Here is how it looks(click the picture and it takes you to that blog ):</blockquote>

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

- <h3>Text Hyperlink</h3>
<b>Here is the code:</b>
`<a href="insert the link to where it is referenced to">insert text here
</a>`
<b>Example:</b>
`<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>`

<blockquote>Here is how it looks:</blockquote>
<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>

<img src="https://files.peakd.com/file/peakd-hive/jason04/vS8riqnk-12011.png" alt="1 11.png">
<div class="text-justify">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.

<b>Here is the code:</b>
`Column 1 Title | Column 2 Title`
`------------ | -------------`
`Row 2,Column1 Content | Row 2,Column2 Content`
`Row 3,Column1 Content | Row 3,Column2 Content`

<blockquote>Here is how it looks</blockquote>

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. <b>Like this one:</b>
<table>
<tr>
<td>
https://images.hive.blog/DQmUG2oAvyZ1QDkc24tzJVVePPNLLDWuP9uLuYXqPBH492E/ONLY%20INVESTORS%20BELONG%20TO%20HIVE.gif
</td>
<td>
https://images.hive.blog/DQmRn21H7U8oZUvSxswu3rg8jcTdCNex94ix635LysMsRyE/HOW%20TO%20FORMAT%20YOUR%20BLOG%20IN%20AN%20EPIC%20WAY.gif
</td>
</tr>
</table>
</div>

<img src="https://files.peakd.com/file/peakd-hive/jason04/mg5Hi3nU-12014.png" alt="1 14.png">
<div class="text-justify">
If you have something to enumerate and the information is important, it is better to have it in a bulleted or numbered list than to enumerate it in a sentence form. It is because information in a list form is more emphasized and can be seen easily by the readers.
</div>

 - <h3>Bulleted List</h3><br><b>Here is the code<i>(erase the [space] portion of the code and take note of the spaces :</i></b>
`[no space]-[single space] Item A`
`[two spaces]-[single space] Item A.1`
`[four spaces]-[single space] Item A.1.1`<div class="text-justify"><sub>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.<br>Also remember that every after the "-" symbol, there is always a single space or else the list won't work. </sub></div>
<blockquote>Here is how it looks:</blockquote>

- Item A
  - Item A.1
     -  Item A.1.1
 - <h3>Numbered List</h3><br><b>Here is the code<i>(erase the [space] portion of the code and take note of the spaces :</i></b>
`[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
<div class="text-justify"><sub> Unlike the bulleted list, the pattern of the spaces for adding a subheading is by threes. If you wanted to add another subheading of a subheading, you add three spaces plus the space of the previous subheading.</sub></div>

<img src="https://files.peakd.com/file/peakd-hive/jason04/WJbA0YlP-12015.png" alt="1 15.png">
<hr>
A blog divider or a visual divider is a design component that assists in grouping or dividing the composition into parts that has the same context or topics.

- <h3>Horizontal Rule</h3>It is used to separate the contents of your blog by adding a horizontal line.<b><i> But the disadvantage of this one is that it is not visible in night mode of hive.blog.</i></b>
<br><b>Here is the code:</b>
`<hr>`<br><br><blockquote>Here is how it looks:</blockquote>
<hr>

- <h3>Custom Blog Dividers</h3>I  made several custom made blog dividers and if you wanna get one feel free to visit this <a href="https://hive.blog/hive-156509/@jason04/beautify-your-blog-with-these-aesthetic-blog-dividers-or-get-yours-now-giveaway">blog</a> and feel free to contact me
https://images.hive.blog/DQmZHetoYpDLrQttggTXZzr6mhyBDU16Bvmcih8wbe3YWJa/Black%20and%20Orange%20Beer%20Saying%20Facebook%20Post.png

<img src="https://files.peakd.com/file/peakd-hive/jason04/WU6L7plX-12016.png" alt="1 16.png">
- <h3>About the Author Statement</h3>
<div class="text-justify">
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.

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

<b>Here is a sample code:</b>
`<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.
- <h3>GIF Footer</h3>
<div class="text-justify">
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.

<br>I also sell GIF footers for everyone and please feel fee to contact me if you wanna have yours.
https://images.hive.blog/DQmPf1aoNAS2fkQNXxSh2fUqBL5PFodtAVRLo8FdkJtN8LW/GIF%20FOOTER.gif

</div>
<center><a href="https://hive.blog/hive-174578/@jason04/aesthetic-gif-footers-for-hivers-or-made-by-jason04">AESTHETIC GIF FOOTERS</a></center>

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.

https://images.hive.blog/DQmWVug9F5fsMfpRdjaAWr6FodQog2JLwqno9f5E6FU6oxH/1.png<div class="text-justify"><h2> Wow. You reached this far? Thank you! That's it for today's blog. Hope you enjoyed it and had fun :) </h2></div>
https://images.hive.blog/DQmWVug9F5fsMfpRdjaAWr6FodQog2JLwqno9f5E6FU6oxH/1.png
<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>
<br>
https://images.hive.blog/DQmWXySposr7Jkcm8V9RozgL78tHH5dFeAGp9m56Y5KpeN1/Copy%20of%20700.gif