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

Showing gadgets in selected pages

All right , now we are stepping to some serious business.Hope you all know about adding a gadget by the layout page. Lets take 'Labels' gadget as a example.

Now lets say you want to show this gadget , labels only in my home page. Then

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for <b:widget id

Now you will out many code lines which are starting from ,and finaly you will see a code line similar to <b:widget id='Label1' locked='false' title='Labels' type='Label'>

just below that you will see a code line as <b:includable id='main'>

Just paste this single code line below that line <b:if cond='data:blog.homepageUrl == data:blog.url'>

and scroll down until you find out these 2 code lines ( don't use search , just scroll down )

</div>
</b:includable>

remember , you should find out first </div> code line after <b:includable id='main'>

now paste this line just below </div> and above </b:includable>

</b:if>



<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>


Remember , you may have some what different code lines than the above

Now follow the Safety Saving Steps.

And


If you want to apply this trick to your other gadgets too , just search under term <b:widget id and you will find plenty of gadgets.

Add a Nav Bar

In advanced blogs , you will be able to see a navigation bar.In some blogs templates , they may provide you a navigation bar. But you may have to edit it. If there is a navigation bar with links as 'home' , 'post-rss' and so on , you have less work. If you don't have such links , then you may have to do some extra work.

This is how the navigation bar of my old template looks like before editing

Now lets see how to edit the navigation bar , if it was provided.


1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search under a name of your navigation button , for a example 'Home'

Now press 'Next' until you find some code lines very similar to

<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href="Paste your URL here"> Example 2 </a></li>

<li><a href="Paste your URL here"> Example 3;/a></li>

you will surely find out <li><a expr:href='data:blog.homepageUrl'>Home</a></li> because it is common for every modern blog template.

Now just change these lines to what you want

<li><a href="Paste your URL here"> Button's name </a></li> <li><a href="Paste your URL here"> Button's name ;/a></li>

ex:-

If you want to add navigation button for your post on 'Red mangoes'

<li><a href="http:\\www.friuts.blogspot.com\Red mangoes.html"> Red Mangoes ;/a></li>

Now follow the Safety Saving Steps.

And


If there is no navigational bar provided for you then,

add a page element [ Learn how to add a page element though your template don't have a one )

( If you already have a one like this , no need of editing template )

Now add link list as discribed above

<li><a href="Paste your URL here"> Button's name </a></li> <li><a href="Paste your URL here"> Button's name ;/a></li>


Press