You're here: Home » Design » Stylize your Blog Post Headers

Stylize your Blog Post Headers

On Mar 1, 2010 under Design

We are tired of seeing the default post style and we want our posts to look different and more attractive. The way you stylize your posts gives a unique identity to your blog. Now I am going to give some tips which may help you in changing the looks of your blog posts.

Header Style 1

Do u like the above style? If yes then just use the code below to get that effect.

.entry h2

{

background:#FEFFD7url(http://webfroze.com/wp-content/uploads/hbgs1.png)no-repeat;

border-bottom-left-radius: 8px 8px;

border-bottom-right-radius: 8px 8px;

border-top-left-radius: 8px 8px;

border-top-right-radius: 8px 8px;

font-size: 20px;

font-weight: normal;

line-height: 30px;

padding: 2px 10px 2px 50px;

text-shadow: #BBB 1px 1px 1px;

}

I have used it for Heading 2 style. You can use the above code for any heading style by just adjusting the font size.  You change the color of the style by changing the background image and color in the above code.  In many themes you can find .entry in css stylesheet if not just create a CSS style with the above code. I got inspiration from problogdesign and I made this.

Header Style 2

Do u like the above style? If yes then just use the code below to get that effect.

.entry h2

{

background:#E3F0F2url(http://webfroze.com/wp-content/uploads/hbgs2.png)no-repeat 7px 50%;

background-position: 7px 50%;

border: solid #6CC;

border-bottom-left-radius: 4px 4px;

border-bottom-right-radius: 4px 4px;

border-top-left-radius: 4px 4px;

border-top-right-radius: 4px 4px;

padding: 10px 10px 10px 45px;

text-align: left;

}

Using the above code is similar to the first style. The first style I have used in my blog but the above code I have not tried but you wont experience any problem while using it. Both the codes are similar  only changes are in background image, color, fonts and alignment. I got inspiration from shoutmeloud and I made this.

Comments on this entry (no comments)

Did you like this post? You can share your opinion with us! Simply click here.

Leave a Reply

CommentLuv badge