2009/03/02

How to change "Older Post" , "Newer Post" into icon

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

4 comments:

mknace unlimited said...

cool explaination

Vinu said...

Wow..Its Great..
Thanks Yaar

Client said...

Très bien ... Merci !

Anonymous said...

Dear All, Thank you for your help. Your solutions work well

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.