Icons For The Boring "Home", "Newer Posts", "Older Posts".

Hi guys once again :)
This tutorial will help you in changing the "Home", "Older Posts" and "Newer Posts" buttons with Iconz.
Isn't it cool? yep it is. This give you blog a better look and gives your reader a view that you are constantly doing something fr your blog. Older posts and newer posts are old timers. We need something interesting every now and then to get our blog going and making it look professional and cool. This is going to be simple as all my other tutorial. As usual just follow the steps.
Before doing this back up your template.
Here are the steps:

• Log in to your blogger account
• Go to Design>>>Edit HTML
• Tick "Expand Widget Templates"
• Then find this code :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>

There might be two types of such codes but find the same exact code as above 

• Change the blue words with image script 

<img border='0' src='ICON URL'/>

Examples :

<img border='0' src='http://robots1996.fileave.com/Beranda.png'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/>

So it will look like this :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
</b:if>
</b:if>

</div>

Now If you want cool Icons for your blog goto > google and search for icon for home, older posts and newer posts and search this in images you will get some cool icons.

Upload them to some sites like tinypic or imageshack. and change this blue image location to the ones you have uploaded.

• If you are done then save template and see the changes.

Enjoy and if you have any problem let me know.

Posted in: Blogging