Let's Talk About Headers - Tutorial for Beginners

in Steemit Philippines3 years ago (edited)


Writing GIF from Dribbble

I have already discussed about headers in my previous blog post: Markdown Tutorials for Steemit Beginners. This is what I've discussed there:

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.


For today's blog, we will take it up a notch. Instead of plain text headers with different sizes only, I'm gonna teach you how you can use fancier headers the easy way.

a.png

The above header is a sample of a header I made using this method I'm talking about. It's actually very simple and can be done in a few easy steps.

b.png

Head over to a font website. I suggest use 1001Fonts.

image.png

c.png

Choose from the font characteristics and highlight the ones that you need. Then, enter the desired header text on the text box.

image.png

I suggest highlight the price tag button so you will only use the ones free for commercial use. You can also change the size of your header here, as well as the font and the background colors.

d.png

Once you found a font you like, simply right click on the text then click on Save Image or Save Image As.

image.png

e.png

After saving the image, just head over to your Post Submission screen on Steemit then upload the image that you saved.

image.png

f.png

Lastly, format your header properly if needed. Like putting in centered by using the center markdown: image.png. You can also try different colors as mentioned before like on this "Step 5" header. You can also add a hyperlink to the header if needed using the markdown: image.png.


Markdown Headers are Good

asdad.png

2e323e32e.png

dqwdqd.png

awdqwdwqd.png


I hope that you learned something from this blog. Most articles are very plain or can be too cluttered when they use headers that are too fancy. This easy way of making simple but effective headers can really make your blog posts stand out.

If ever you followed this tutorial on how to make headers, tag me on it, so I can see how good you've done!

I myself will be using this way to design my blog post's headers moving forward because I think it adds a lot to the article.

asdasdasd.png

This is my second tutorial contribution to the Steemit Philippines Community. Thanks, @steemitphcurator, @steemcurator01, @steemcurator02, @steemcurator08.

Maraming Salamat!

Sort:  
 3 years ago 

Sobrang ang laking tulong po nito. Salamat sa iyong suporta.😇

 3 years ago 

Walang anuman sir!

 3 years ago 

Was looking for some tutorial on this a while ago..will definitely take note on this...thank you for sharing

 3 years ago 

You're welcome! Hope it helps!

 3 years ago 

It's very valuable @deveerie. Very helpful. Thanks!

 3 years ago 

Thanks and you're welcome!

 3 years ago 

Thanks for sharing this Kuya!

 3 years ago 

this tutorial looks great and easy to understand

 3 years ago 

Thanks dude!

 3 years ago 

maraming salamat po nito.

 3 years ago 

walang anuman!

 3 years ago 

Thanks for sharing Dev this is very helpful especially for the newbies.

 3 years ago 

You're welcome Gini!

Coin Marketplace

STEEM 0.20
TRX 0.13
JST 0.030
BTC 67271.13
ETH 3515.41
USDT 1.00
SBD 2.70