Change Home, Older Posts, and Newer Posts with Icons

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 :

<span class="Apple-style-span" style="color: rgb(7, 55, 99); font-family: arial;"><span class="Apple-style-span" style="white-space: normal;"><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:includable id='nextprev'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><div class='blog-pager' id='blog-pager'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:if cond='data:newerPageUrl'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span id='blog-pager-newer-link'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><data:newerPageTitle/></b></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></a></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></span></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></b:if></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> </span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:if cond='data:olderPageUrl'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span id='blog-pager-older-link'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><data:olderPageTitle/></b></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></a></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></span></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></b:if></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> </span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:if cond='data:blog.homepageUrl != data:blog.url'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><a class='home-link' expr:href='data:blog.homepageUrl'></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><data:homeMsg/></b></span><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></a></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:else/></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b:if cond='data:newerPageUrl'></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><a class='home-link' expr:href='data:blog.homepageUrl'></span><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><data:homeMsg/></span></b><span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></a></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></b:if></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></b:if></span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> </span> <span class="Apple-style-span" style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"></div></span></span></span>

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

• Change the blue words with image script 

Examples :






So it will look like this :

<span class="Apple-style-span" style="color: rgb(17, 17, 17); font-size: 14px; line-height: 22px;"><span class="Apple-style-span" style="font-family: arial;"><span class="Apple-style-span" style="color: rgb(204, 0, 0); white-space: normal;"><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'><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><img border='0' src='</span></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: blue; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">http://robots1996.fileave.com/Posting_lebih_baru.gif</b></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">' /></span></span></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'><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><img border='0' src='</span></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: blue; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">http://robots1996.fileave.com/Posting_lama.gif</span></b></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">' /></span></span></a> </span> </b:if>  <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><img border='0' src='</span></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: blue; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">http://robots1996.fileave.com/Beranda.png</b></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">' /></span></span></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><img border='0' src='</span></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: blue; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="border-style: none; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">http://robots1996.fileave.com/Beranda.png</b></span></span><span class="Apple-style-span" style="border-style: none; color: black; list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-style: none; color: rgb(56, 118, 29); list-style-type: none; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">' /></span></span></a> </b:if> </b:if>  </div></span></span></span>

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.