Adding a Side bar header image to a Imageless Side bar header

One reader asked me , whether there is a way to add a side bar header image to a side bar that dose not contain a image. After few trials I found out the way. It is really simple. I tried this trick for few of my blogs that haven't a image for it's side bar and it works well. There will be a problem with resolution. Yet , no error was found.


1. Edit your Template
2. Now find out


sidebar h2


( press 'Ctr
l' + F to open your browser's search box)

Now you will find out some code lines Very similar to these


.sidebar h2,.rsidebar h2, .lsidebar h2{
color: #515151;
font-size: 16px;
font-family: Lucida sans unicode,Arial, Tahoma, Verdana;
font-weight: normal;
text-transform: titlecase;
margin: 0px 0px 5px;
padding: 3px 5px 5px 5px;
border: 1px solid #DEDBD1;
background: #EBE9E1;


Remember , codes lines can be slightly different from above because code lines varies from template to template.


Now replace


background: ( a color code );


with


background: url( URL of your Image) top repeat-x;



Ex:-

background: url(http://3.bp.blogspot.com/_6pbSFKC8YH4/Sa9yymvvrAI/AAAAAAAAAWc/g97-fHkkEBQ/s1600/sidebar.jpg) top repeat-x;


Before



After



Now follow the Safety Saving Steps.

And



Some Header Images for you

http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg


http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

http://4.bp.blogspot.com/_XByc9SCisZM/SbIMdc_Cd3I/AAAAAAAABKU/6KOOmrZup6Y/s1600/bg_sb2.jpg

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/SbIMdc_Cd3I/AAAAAAAABKU/6KOOmrZup6Y/s1600/bg_sb2.jpg




feedburner

Every New lesson , directly to your Mail Box .....

1 comments:

I.N Rockz on May 17, 2009 at 9:39 PM said...

thnxx dragon d really help ful

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

The Word Validation image has been removed and no need to Sign In. So don't be lazy ..........

 
This blog sucks under Internet Explorer.

Buy me a Coffee


Powered By

Latest Site News


Animated 3D Dock removed in order to speed up loading time and to help IE users.

This site will be come up with a DOMAIN name soon.

Link and Win competition will start as soon as the Domain name added. Join with us. You could be the winner.

Site Info

since 2009 April

Submit a Lesson

Visitors

of Visitors read Pages.

Followers

Lessons by DragonD | Template by Simran | Logo by lahirulcd | Temaplate redesigned by DragonD| Icons by DryIcons.com | Licensed under CC license Creative Commons License