Wordpress Style Older Posts and Newer Posts Links in Blogger

In this Tutorial Iam Going to Guide You How to Change the "Older Posts","Newer Posts". links in Blogger to Wordpress Style Links.This is a Simple Blogger Trick That We Can Able to do By Tweaking Some Html.It Looks Quite Simple and Professional.


How to Add Word press Style Older,Newer Post Links To Blogger:.


Login to Blogger < Dashboard < Edit Html.
Now Check Expand Widget Templates.
Now Search for the Below Code in the Template.




<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;' expr:title='data:newerPageTitle'><data:newerPageTitle/></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;' expr:title='data:olderPageTitle'><data:olderPageTitle/></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>

Now Look at  the Code Higlighted In the Above Box.



<data:olderPageTitle/> Older Posts in your template.
    <data:newerPageTitle/> Newer Posts in your template
    <data:homeMsg/> Home in your template.

Now Changing Older Post and Newer Post with the Below Words:.
    <data:olderPageTitle/> replace &#8592; Previous Entries
    <data:newerPageTitle/> replace Next Entries &#8594;
    <data:homeMsg/> replace HOME

Now if You Wanna Change the Older Post and Newer Post with Icon Then Just Add the Below Html Tags to it.


    <data:olderPageTitle/> replace it With <img alt='previous' border='0' src='icons Code Here' title='previous'/>
    <data:newerPageTitle/> replace it With <img alt='Next' border='0' src='icons Code Here' title='Next'/>
    <data:homeMsg/> replace it With <img alt='HOME' border='0' src='icons Code Here' title='HOME'/>



0 comments:

Blogger Template by Clairvo