Blogger Tricks : Adding background image to sidebar titles

0 comments
Save to del.icio.us 0 hits!


To put a background image on sidebar titles that will blend to your header image or your template in whole. This technique will make your sidebar titles more readable and recognizable.


So here's how to do it.


  • First is to make your own image which measures 200px wide and 100px in height.
(I recommend Photoshop for doing this but if you don't have this software, you may want to download a software similar to Photoshop - Gimp )


Samples:

1.Gradient Effect
2.Solid Color



  • Upload it in your hosting website of your choice.(Photobucket(Recommended), Imageshack and etc)

  • Locate this line in your edit html box.

(
Note: Before making any changes to HTML, it's advisable to backup your template)



.sidebar h2 {
background:
url(http://bp3.blogger.com/_xn2gmPb9TfM/R5SF7ODdQbI/AAAAAAAAA
wY/NR6uYhiytks/s320/sidebar _bg.gif) no-repeat center left;
margin:0;
padding:.2em 0;
}

  • Be sure to replace the URL i posted above with your background image.

  • Note:The statement “no-repeat center left” ensures that the background image appears only to the left of the heading, and does not repeat across the whole width.


Still have any problem ? Post it in the comment box and i shall be hopefully quick to reply

Related Posts :



Comments
0 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to my feed

Post a Comment

About Me

Latest posts

Blogger Zone