Changing Sidebar header images

If you are using a some what developed blogger template , you can see a image in the back ground of the caption of your side bar gadgets. Changing these is a some what complicated task. Really , Changing is not complicated , but creating a suitable graphic is the complicated task. If you know graphic designing , this will be easy. For others , it's better to skip this lesson and read the next one.



Here is the side bar header image of my blog




So , here is the way to change it

First of all , create a suitable sidebar header image.Then upload it to a image hosting site.

Now,

1. Edit your Template
2. Now find out sidebar h2 ( press 'Ctrl' + F to open your browser's search box)



Now scroll down few lines and you will find out a code line similar to

background:#f5fbfe url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElc-nPDVg0bpFgm6DXxBpCyV4jnj0ZhITLLr4WAYTduR0qUMPBPMkfaVoPfwrYQj29Gmb587X3sMxKu4ZBv6Os8mRqnRIw1yGCz0L8mgA33HmQ6SsbNzBPVMTN2G-JFPpw7Fs7WJXBNE/s1600/sidebar-top.gif) no-repeat top center;

or

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElc-nPDVg0bpFgm6DXxBpCyV4jnj0ZhITLLr4WAYTduR0qUMPBPMkfaVoPfwrYQj29Gmb587X3sMxKu4ZBv6Os8mRqnRIw1yGCz0L8mgA33HmQ6SsbNzBPVMTN2G-JFPpw7Fs7WJXBNE/s1600/sidebar-top.gif) ;

or

sidebar h2 { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlQybe9ni2F9B6dhUicxS8q4sn3fMKdh6tJ9ADs7TDGsfNKDtPMMzH3mQmiRkHjFq4cAxXB0oKT3cRF-R0TyT9fdUEn_fkQeVE6GD-baZW2TjQp509ZJuHyaQ878J-73TLi22jcx8UdE/s1600/widget-title.gif) right no-repeat;


or another code line which is very similar to above code lines

just change background URL to the URL of the image , that you created.



Now follow the Safety Saving Steps.

And

Changing the Header Image ( Logo )

As you see in this blog template's header image ( http://testblogbydragond.blogspot.com/ ) , it says Gagan84 ! so , though you like this template , though your blog is on vehicles , at your blogs header it will say Gagan84 . Don't you like to use your own logo ? yep , why not !

lets say we want to use a logo as ' Hummer H2'

Firstly ,

we have to find out this Gagan84's image url. For that

1. view your blog
2. Right click on that logo and select 'Copy Image Location'.

ex : - 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMyp8TdXTLZp7suQWOSca6Lzt9E2b4RY6kTwzyZ_hGl_ZoKzh5F7X9oLLmAg1N79RFNv7z1QNUCxaZr_Eq2tTnnjvmkKOrtBfRJ8tyiP2G2Dfj4UsJWjo4m3Dzj9y_rZNkzxUZYI06Bqn/s1600/2cp5m6q.png'

3. And also Save that image in your computer.


Editing,

1. Open saved image from MS Paint ( Or any other advanced graphic software. )
2. Find Out your Image's resolution. ( At Paint , go to Image Tab , Attributes and find out Width & Height )
3. Go to PowerPoint 2007 and design a Logo
4. Paste it on Paint
5. Cut the borders of the new logo to be the same resolution of the previous.
6. If it is too large , resize it at PowerPonit

* You have not to care about the resolution if there are no information about the resolution

This is what I designed , For the background of logo , select the previous logo's background color by color picking tool of Paint. And Fill your Logo's background color.

Now Upload your New Logo to a Image uploading site ( Imageshack ) or to a separate page of your blog and copy the Image Location.

Now,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F'
3. Paste your previous Logo's Url
4. Find out it

Now, Paste your New Logo's Image Location on the previous Logo's Image Url.

For me , I paste my New logo's Image location ( http://img22.imageshack.us/img22/994/111jwl.png ) that i uploaded ti Imageshack.us , with previous Logo's Image Location ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMyp8TdXTLZp7suQWOSca6Lzt9E2b4RY6kTwzyZ_hGl_ZoKzh5F7X9oLLmAg1N79RFNv7z1QNUCxaZr_Eq2tTnnjvmkKOrtBfRJ8tyiP2G2Dfj4UsJWjo4m3Dzj9y_rZNkzxUZYI06Bqn/s1600/2cp5m6q.png )

Now follow the Safety Saving Steps.

And


Tip :- Some times , there may be no Image Logo , at those occasions just find the name that is written instead of logo amoung the HTML and change it.