Change Older Post And Newer Post Link With Images Blogger



Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.

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:

zethä said...

i'd like to do this but with an icon that changed when hover, can you explain me? thanks

Anshul said...

i am not able to understand what you are saying zetha please explain in detail..

Ishan said...

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.

Admin said...

Awesome.......Working

:thanks:

karel zeman said...

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?

Anshul said...

@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 + &quot;_blog-pager-newer-link&quot;' title='Newer Posts'>&lt;&lt; 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 + &quot;_blog-pager-older-link&quot;' title='Older Posts'>Older &gt;&gt;</a>
</span>
</b:if>

</div>
<div class='clear'/>

Holy Quran said...

oh really??? i was searching for the same solution for my personal blog. thanks for sharing.

Web Solutions said...

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

Memory Foam Mattress said...

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 :)

Tanuj verma said...

My older post/newer post links have disappeared ?
pls hlp

Anshul said...

@tanuj Just give me your all ocdes i will do it proper.

SEO Dubai said...

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.

madeleine louise. said...

I have the same problem, my links have dissapeared, i have entered the ones you gave above but it doesnt link them?

Anshul said...

@madeleine the image links are on googlepages and it has closed so change image links with yours to make it show.

kirru said...

Thanks Friend.....

Its worked......

http://eazy-online-income.blogspot.com

Prabhakaran said...

nice tips and web..........................thanks

www.apparu.tk //

www.worldmp3andmovies.tk

Angel Gruev said...

Ye it works thanks :)
www.exalism.com

Bad_Trip said...

thanks dude :)

http://huliganproductions.blogspot.com/

Mattress specialist said...

nice tip - it works horray......
http://www.ergoflex.co.uk/

Mattress specialist said...

Thanks for helping me find the solution to the problem, hope links wont disappear any more.

Mattress specialist said...

thanks for the help - it works:) Any more good tips.
http://www.ergoflex.co.uk/

Post a Comment