Spiga

Adding Background Image to Post Titles

Code

Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6″ (it can be something else also,So try searching) which looks like this

 

 

Now to get the background image in there you have to add the code “background: url()” like this:

 

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

 

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}
height: 80px;

 

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

Related Posts by Categories



0 comments:

Post a Comment

Add to: Mr. Wong Add to: Webnews Add to: Icio Add to: Oneview Add to: Yigg Add to: Linkarena Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Simpy Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Add to: Newsvine Add to: Blinkbits Add to: Ma.Gnolia Add to: Smarking Add to: Netvouz Add to: Folkd Add to: Spurl Add to: Google Add to: Blinklist Information