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 '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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SaXOU28thDpSW7XL_2Kgr26zrWU80mKSs4PGBfnGjsKrhNCWF6cmZNz7KCdIhERNFbMMUpUW1dFY-F0lO1mghXPFWu2e5UgvEk0hffubMCluRNUS3gu8Dwsr8hcJZKb5zhAUPMjI71o/s1600/sidebar.jpg) top repeat-x;

Before

After

Now follow the Safety Saving Steps.

And



Some Header Images for you



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFMcu0ywwhtWgndIhhP87wmnHsLAbIOWSjL6Wuw27Di2xOhLKTjUlzQgSK21sU3zH36w84nfPSg5BXcddgmMeowEHvzxJeS6QQvZJMs-izkariQXY5SJtjqAi7e4xbGQyVTQMwQNPhe5Nc/s1600/bg_sb_title.jpg



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSc_ojFzX3T_4gApK31gkAjxjyBsD1NrmJeEKdqgP0Q8eki4RMu-dIm2GO7Tj2TuOvLcbxG5s_62rd3StBKUAhI6qnbYQNWrqS47mc5k7YWsPEt2KAZj3eQ15kRtyUW7W4Ah-V4pnaCRn/s1600/sidebar-h.jpg



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHipTcf6yR-x64kgCsEf0G6aoNOkyvotMsJeF18l2THBRhn29Y7zoLyI6Xc4axB0q6D_HXvEqHOHXuWe4GaPEc2RlNTk1VyLrbwytodfEASFb6s_XRHnZzBbm0JZHudXYSA3-pY34YKN4l/s1600/bg_sb1_g.gif



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqtM6eHsJjcP5iqJ7fgABCTUhBzkCwm0HSQC5UTUMrGwmpS9ivNj6BvsaDcdxVMwudbk72yk7TdJf2z78q5nV8_mMaFugtWA7xvod-GcknjmfTcnjoG7cIMfqRke3FGTMIt0FztdvPOEM/s1600/bg_sb1.jpg



Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7c6a0tQWsT5gH26RegAhCYZlmTqtWZjpLCgRmMTghvFGYlvhWvpg9bHPovN8_x11Lud1fcLACcpXNVpgIircfphHbsLEp-6YBwWx3jG1V4GbjPROnTENsTQaJuDIkEK0F_E7LZ6B6hs/s1600/bg_sb2.jpg

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