How to Make Stylish Heading in Blogger Like Wordpress - FindersAdda : Tutorials of Make Money, Computer or Internet

Tuesday, 21 November 2017

How to Make Stylish Heading in Blogger Like Wordpress

Hello Friends! How are You? I hope, you will be well and also hope that you found my last post on "How to add multiple authors in blogger" and it will be very helpful for you. Thank you very much for all lovely comment and suggestion. You've inspired me to write another post.

In this article, I am going to learn "How to Make Stylish Heading in Blogger Like Wordpress" Let's begin...

How to add stylish heading in blog post

Why should we add stylish heading?

We add a stylish heading in our blogger blog post so that our blog post shows very nice. Wordpress has many plugins to add this type of stylish heading but blogger doesn't have available this plugin yet.

That's why we have created some css code for add this type of plugin in blogger. if you are running your blog on blogger then you must add this plugin in blogger blog post, 

How to add Stylish Heading in Blogger Blog Post?

1) First of all, copy the below CSS code and then open your blogger account in the new tab of the web browser.
.blog-posts .topic-head{background-color: #6e9be5; width: 100%;padding:5px;color:white;font-style:bold;font-size:20px;}.blog-posts .topic-head::before{font-family: "FontAwesome";content: "\f0a4";margin-right: 5px;color:red;}
2) Then click on the Theme option besides blogger dashboard.

3) Then click on the Edit HTML option and then click the mouse pointer anywhere between code and press Ctrl + F button and find ]]</b:skin>

paste the css code above ]]</b:skin>

4) Now paste the CSS code above the ]]</b:skin> and then click on the Save Theme option.

5) Now click on the Post option beside blogger dashboard.

6) Then click on the New Post option above blogger dashboard.

7) Now write your post in Post box and then click on the HTML option.

8) Now find your heading in HTML and paste the below code instead of heading. 
<div class="topic-head"> Write your heading </div>
9) Now write your heading instead of "Write your heading" and then publish your post.

Paste this code instead of heading and write your heading instead of heading

Once again, I hope you liked this post so much. If you loved this post, Then, share with your friends and also give comments and some suggestion that what should i improve in this post. 

Thank You So Much.

By Sumit Kumar Gupta

About Author


Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.


Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.