Sunday , 17 December 2017

Add Rounded Border Around Headings in Blogger

rounded-border-for-bloggerHeadings in posts play an important role in SEO. Headings help us to get good position in search engines. Every good blogger should add headings in his/her posts to get more visitors from search engines and headings also helps to attract visitors so in this tutorial we are going to make our posts more attractive to readers by adding headings with rounded borders around them in Blogger blog. In most of Blogger themes or templates we see simple headings with not much style, it is good for search engines that we use headings in our posts but it is not as attractive as it should be to visitors of our blogs. So that is why we should add some little more CSS to our headings to attract users. This tutorial is for Blogger users not for WordPress users but if they know where to add CSS then they can use the same code for Blogger blogs to add rounded border around headings in their WordPress blogs. And you should also take a look at this article that how to add HTML5 speech recognition search box to website it will help your blogs visitors to speech and search without typing any word.

How to Add Rounded Border Around Headings

It is very simple to do so, all we need is to add few lines of CSS code into Blogger template manually and it should be done. Just follow the steps carefully make sure you have taken backup of your Blogger blog before doing any change in the source code.

1. Go to Blogger > Template > Edit HTML > Proceed.
2. Press Ctrl+F to search the line of code which is given below:

]]></b:skin>

3. Just above it paste the following code:

h3
{
border:2px solid black;
padding: 6px;
border-radius:25px;
-moz-border-radius:25px;
}
  • If you are adding H3 tags for headings in your posts then don’t change h3, otherwise change it to whatever you are using like H2 or H4 etc.
  • If you want to change the colour of the border then change black to any colour you like.
  • And remember you can add the same code given above with different heading tag means you can copy and paste the above code with H2, H3 and H4 tags individually to add rounded border around all H2, H3 and H4 headings in your blog posts as right now it will only add rounded border on H3 tag.

4. After pasting the code click on Save template and it is done.

Need Any Help?

If you still need any help regarding this tutorial then simply comment below with your problem that you are facing and once again make sure you take backup your blog before changing source code.

Leave a Reply