Add Navigation Icons to your blog posts

Do you want to include stylish navigation buttons under your blog posts ? I thought so, follow this tutorial to include this simple hack within your blog posts.

As always go to your template/edit html section click on expand widgets and copy the code to a plain text editor like notepad.



Find this whole section and delete it :

<b:includable id='nextprev'>
.....
</b:includable>

Paste this instead (The bold represents the links to navigation images you can change them to your own if you like):


<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://photos1.blogger.com/blogger2/
3880/707811929476148/1600/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://photos1.blogger.com/blogger2/3880/
707811929476148/1600/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

and your new navigation icons will look like this :




By Hactro`s Place

Tags: blog navigation buttons, blogger navigation