How to change "Older Post" , "Newer Post" into icon Posted by vuluganck | at Monday, March 02, 2009

When you visit my site , at the end of the page you will see the icons instead "Older Post", "Newer Post" , "Home".
Before you change , it is a word default :
After you change ,It looks like this:

It is not important , but it can make your visitors can easily see the "next" place to press.
But I think it is cool huh?Very nice on your blog.

How can do it ? just do these simple steps below:

1.Login your account in blogger.com--->Layout--->Edit HTML--->stick Expand Widget Templates.
2.Try to find the whole code like this:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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/><br/></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/><br/></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>

Ok when you have found it , you will see the red code form.
Just change it by another word such as : "Next", "Previous","Home"....
Or if you like to change it into icon, you have to paste this code instead the red code:
<img src='http://i259.photobucket.com/albums/hh283/boy_proDX/home.png'/>
The blue code is an URL of the icon (image), you can search the beautiful icons on web and paste that image URL instead the blue URL.

Finally , save your template and join.
If you have any problem , contact me and i will help you.
Dont forget to link back and subcribe me.
Thanks much