Friday, 16 August 2013

How to Stylify the Headings in WordPress Blogs?

How to Stylify the Headings in WordPress Blogs?

 

WordPress is undoubtedly the best Blogging Platform for professionals because every thing is very easy here.So many plugins are there to make your task much simpler.Blogger lacks same facilities.However customization in blogger is much more easier than wordPress.However you can also play with your blog’s look and feel by customizing stylesheet.css code in your self hosted wordpress blog.Today i will show you “How to stylify your headings in WordPress blog?”.It is well know that style attracts visitors.The default Heading of WordPress has very ordinary look.It will really attract visitor,if you can make it a bit stylish.The look of default heading in wordPress is shown below:
h1 How to Stylify the Headings in WordPress Blogs?

How to Stylify the Headings in WordPress Blogs?

For making the heading of your wordpress blogs stylish,you should add some css codes in your Stylesheet.css file.The whole demonstration is shown below:
  • First of all,Log into the Admin Panel of your WordPress Blog.You can do this by visiting http://www.yourblog.com/wp-admin.
  • Then Navigate to Appearance > Editor > style.css.The screenshot of the same is shown below:
editor How to Stylify the Headings in WordPress Blogs?
  • Now add the below given code according to your need and finally click on “Update File” button.

1.Stylifying the H2 tag in WordPress Blog

h2 How to Stylify the Headings in WordPress Blogs?
To stylify the H2 tag in your wordPress blog like the above show figure,find “h2″ and replace it with the following css code:
h2 {
background-color: #e3f0f2; background-image: url(http://bloggerspassion.com/wp-content/plugins/thesis-style-box/images/note.png?9d7bd4); background-position: 7px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(102, 204, 204); color: #111111; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 14px; line-height: 21.983333587646484px; margin-bottom: 1.571em; padding: 10px 10px 10px 45px;
}
Recommended Article-Top 10 Related Posts Plugins for WordPress Blog

2.Stylifying the H3 tag in WordPress BLog

h3 How to Stylify the Headings in WordPress Blogs?
To stylify the H3 tag in your wordPress blog like the above show figure,find “h3″ and replace it with the following css code:
h3 {
border-bottom: 2px solid rgb(225, 112, 75);
font-size: 1.5em;
font-weight: bold;
line-height: 1.375em;
margin: 10px 0px;
padding: 5px 0px;
display: block;
}

3.Stylifying the H4 Tag

h4 How to Stylify the Headings in WordPress Blogs?
To stylify the H4 tag in your wordPress blog like the above show figure,find “h4″ and replace it with the following css code:
h4 {
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(40, 109, 164);
clear: both;
color: rgb(46, 104, 134);
font-family: ‘Carrois Gothic SC’,sans-serif;
font-size: 16px;
letter-spacing: -1px;
line-height: 22px;
margin: 0px 0px 5px;
padding: 3px 7px;
}

5.Stylifying the H5 Tag in your WordPress BLog

h5 How to Stylify the Headings in WordPress Blogs?
To stylify the H5 tag in your wordPress blog like the above show figure,find “h5″ and replace it with the following css code:
h5 {
color:#289728;
border-bottom:1px solid #289728;
padding:3px;
font: 12px bold sans-serif, arial;
}

How to Use the customized Headings while writing Blog Post?

If you have already added the above CSS codes in your Stylesheet.css files then it would be really very easy for you to use them in your blog Posts.To use them,simply select your sentence and choose the required Heading Tags as shown below:
wordpress headings How to Stylify the Headings in WordPress Blogs?

From the Edior’s Desk

It was my simple effort to guide you so that you can easily stylify the headings in your wordPress Blogs.It will definitely increase your traffic.All the above writtens steps are quite simple and easy to understand.However if you are still facing any issue then feel free to ask me through your comments.
Your positive and negative comments are really very precious for us

 

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Auto Scroll Stop Scroll