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 'Ctrl' + 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
Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg
Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg
Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif
Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg
Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/SbIMdc_Cd3I/AAAAAAAABKU/6KOOmrZup6Y/s1600/bg_sb2.jpg
