These are the links below pointed by arrows to be get replaced in picture which i was talking about.

Now how to change these links with icons is very easy.
Got to LAYOUT > Edit HTML > Expand Widgets
Now follow these steps to replace codes :-
Find the code in red lines and replace them with lines in green following each red line-
1.<data:newerPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/Newer_post_icon.png'/>
2.<data:olderPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/older_post_icon.png'/>
3.<data:homeMsg/>
Replace with
<img src='http://bandofgirls.googlepages.com/home_icon.png'/>
Please Host these images to your hosting image service and change these urls with yours as they may exceed bandwidth.
Now preview it . If its Ok
You can save your template.
How the links will appear after changing these codes -

I hope you will like these trick and icons for sure and its an advice to please host these images to your server.



22 comments:
i'd like to do this but with an icon that changed when hover, can you explain me? thanks
i am not able to understand what you are saying zetha please explain in detail..
Awesome tip Anshul .. really simple to implement, and looks great. It took me just a few minutes to implement, and totally love it.
I even added "hr" tags for a bit of special effect.
Thanks for this, and other great tips.
Awesome.......Working
:thanks:
My older post/newer post links have disappeared! What code do I reinsert in the layout template to get them back and change it to newer/previous?
@karel these are the codes .Find the first line of code and add the codes of blogpager like below in your codes to make it work.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<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"' title='Newer Posts'><< Newer</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"' title='Older Posts'>Older >></a>
</span>
</b:if>
</div>
<div class='clear'/>
oh really??? i was searching for the same solution for my personal blog. thanks for sharing.
Waooo nice information.
this post really made my blogging easy thanks for sharing.
i hope u will share these type of smart blogging tips
thankyou
Wow! This is so cool! I liked it and will use it..Good job! I'm waiting for such more good posts form your site :)
My older post/newer post links have disappeared ?
pls hlp
@tanuj Just give me your all ocdes i will do it proper.
Well u have discuss the really nice trick. but the images must be related to post which give the idea of post.
Image and content must be balanced.
but thanks alot for sharing.
I have the same problem, my links have dissapeared, i have entered the ones you gave above but it doesnt link them?
@madeleine the image links are on googlepages and it has closed so change image links with yours to make it show.
Thanks Friend.....
Its worked......
http://eazy-online-income.blogspot.com
nice tips and web..........................thanks
www.apparu.tk //
www.worldmp3andmovies.tk
Ye it works thanks :)
www.exalism.com
nice blog
thanks dude :)
http://huliganproductions.blogspot.com/
nice tip - it works horray......
http://www.ergoflex.co.uk/
Thanks for helping me find the solution to the problem, hope links wont disappear any more.
thanks for the help - it works:) Any more good tips.
http://www.ergoflex.co.uk/
Post a Comment