_{Image Source}

There are already numerous Markdown tutorials here in Steemit (and all across the web) that have helped a lot of people. So, why am I posting another one? Well, we all know that posts are only active for 7 days and the Search function is pretty hard to deal with. Also, not all people have bookmarked those tutorials and not all people follow the same people or resteem the same posts. It's also pretty hard to dig up posts in a blog page.

I will be basing this tutorial on how I make my own posts while referencing 2 different sources that i found:

• Markdown Cheatsheet
• Markdown Tutorial

However, this tutorial of mine will focus only on those features that I usually use.

---

Let's Start with Headers!

Emphasizing some words is a must in making a catchy blog entry. Why? Reading everything in one single font style will be harder to show which words are important. 'What's this sentence about? it's too long maybe I'll skip it, it doesn't look that important anyway.'

Headers work like a greeting before you do a speech or say more words. Imagine a random guy walking in a classroom and starts lecturing - it will cause confusion. Some people may recognize him as the professor right away, but some people may still question his identity - maybe he's a prankster (Like in this Youtube Video). Watch:

Now, imagine a professor walking in - standing in front of the crowd and introduces himself "I'm the Professor". That will make things a whole lot easier, right?

Markdown headers are easy to use. There are 6 header sizes, numbered from 1 to 6 where 1 is the largest:

# You can <h1>
## Just Add <h2>
### Your Chosen <h3>
#### Words For <h4>
##### Your Header <h5>
###### Like this <h6>

Make sure there's a space after the # (hashes) and before the <h+#> (closing header tag)

If you want to make the header centered just do this:

# <center> Your header goes here! </center> <h1>

Again, make sure the spacing is proper because if not it will mess up your code.

---

Line & Breaks

In markdown, simply pressing 'Enter' to go to the next line will work however if you need extra spaces in between lines you can use a break code.

<br>

Or if you want a space in between 2 topics in your blog entry, you can add a horizontal line as well:

***

This helps in organizing your entry and segregating the thoughts of your posts. We dislike clutter and chaos - best separate 2 things tackling different ideas so they don't get mixed up by the readers.

---

Font Styles!

Font Styles add emphasis to your words, this is where bold letters and italics come in, as well as other styles and combination of such styles:

**Add 2 asterisks or stars on both ends to make me bold.**
*Adding just 1 on both ends will make me italicized.*
*_You can also use a combination by doing an asterisk plus an underscore like this._*
~~You can also do a strikethrough by adding 2 tildes on both ends.~~

---

Lists and Blockquotes

This is very helpful when you are providing steps and enumeration as well as when you're quoting someone or another website (or maybe yourself). For explaining how to use "lists" I will provide you exact instructions from one of the source: Markdown Cheatsheets.

1. First ordered list item
2. Another item
??* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
??1. Ordered sub-list
4. And another item.

???You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

???To have a line break without a paragraph, you will need to use two trailing spaces.??
???Note that this line is separate but within the same paragraph.??
???(This is contrary to the typical GFM line break behavior, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses

Above instructions were taken from Markdown Cheatsheets.

Here's my simple take on doing lists:

- Just add a hyphen
- Or a dash
- Whatever you call it

That's the only thing I use when creating lists, not very diverse but still useful. Haha. Now, onto blockquotes:

> You can simply use that right arrow to make blockquotes.

> You can also do blockquotes in multiple paragraphs continuously.
> 
> Don't forget to add an arrow symbol on the linebreak too.

>> There's also this thing called a double blockquote.

---

Hyperlink Time!

There are different ways of adding links to your blog entry. Some ways look better than the others though. You can simply add a URL and that's it, but we all know that doesn't look good and it can be long sometimes. You can also add some simple words the add the links there and make them clickable. Or if you're being fancy - add an image.

https://steemit.com/@deveerei - This can be considered a hyperlink because it will automatically become clickable.
[https://steemit.com/@deveerei] - If it's not clickable then add Square brackets and enclose your link to activate hyperdrive, I mean hyperlinks.
[Deveerei's Steemit](https://steemit.com/@deveerei) - Or just add some words and make them into hyperlinks.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - You can also make use of an image and make it clickable (that image URL is fake btw).
[<img src="https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png">](https://steemit.com/@deveerei) - Just in case the first one doesn't work - incorporate some HTML in there to get it going. (I prefer this one)

---

Adding Images and Image Positioning

Images are the life of most blog entries - it makes everything so much more interesting. However, badly placed images are a pain to look at. So take note of these things:

• Image Composition - How your image looks greatly influences its capacity to capture attention, especially the 1st image on your blog entry - since it will reflect on the feed as your post's thumbnail. It's like the headline image of your own newspaper.
• Image Position - Images can be centered or aligned to the left or right or can be left alone no indentation sticking on the left side of your blog entry (no codes)
• Image Sizes - Image sizing can be a difficult feat to conquer. Steemit can be viewed on mobile as well as on desktop modes (not to mention tons of other apps based on Steemit that can look the same as mobile or desktop or none at all). Always take into consideration your image sizes - it's scalability both in mobile/desktop modes.

How to add images to your blog posts? (Take note I'm using a fake image URL here and they're inside a code box so they won't show up - if you want to seep previews, you can try using the codes and adding working image URLs by creating your own post.)Do these:

https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png - Simply adding the image URL will work.
![Image Name](https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png) - You can also add an alternate name ot the image inside square brackets then the image URL inside parentheses.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - Adding a hyperlink to your images also works as mentioned on the previous topic (See above).

You can also change your image positions like this:

<center>https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png</center> 

You can try adding center codes on both sides to place the image at the center of your blog entry.

<div class="pull-left">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>

<div class="pull-right">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>

Or if you want to have your image wrapped around by text or afloat on the left or right side you can use the codes above. If it doesn't work properly add additional lines (pressing enter) after the opening codes and before the closing codes. If it still doesn't work, add additional lines before and after the opening and closing codes.

If you just want the image to stay afloat but not be wrapped around by the previous or next paragraph's texts, simply add a break (<br>) before or after the opening/closing codes.

---

Videos

Adding videos in posts are fairly easy, the direct YouTube URL should work, or try the embed codes. Embed codes should be used for most websites not YouTube. I haven't tried using DTube yet so I cannot provide any advice on it.

Sample direct YouTube code:
http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE

Sample YouTube embed codes:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

From: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

---

Code Boxes and Tables

Code boxes are fairly easy to use and has different usages:

• Adding codes into your blog entry without activating/using them.
• Getting a different look on some parts of your entry.
• Can be used for emphasizing or segregating infomation too.

Simple use 3 back ticks: ``` before and after the text/codes.

Or use <code> to open and </code> to close.

The following instructions for tables came from Markdown Cheatsheets:

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

---

_{Image Source}

Cheers! Steem On!

---

This is my first contribution to the Steemit Philippines Community. Thanks, @steemitphcurator, @steemcurator01, @steemcurator02, @steemcurator08. I've informed the community moderators that I will be making some graphics to contribute to the main blog's postings. I will work on in tonight or in the next few days.

_{Original Article posted by me}

Maraming Salamat!

Thank you so much!