Replace Older, Newer Together With Domicile Blogger Links Amongst An Icon Or Text

Newer Post, Home too Older Post are links that seem on the bottom of the posts. When a visitor click on 1 of these links, they volition stimulate got him to the page alongside the listing of your previous posts.
The seat out of the posts on these pages volition locomote the same every bit the seat out of the posts on your primary page.


What nosotros tin do:

A. Change the text of Newer, Older, Home links
B. Place a film beside them (a minor icon, arrow, or whatever...)
C. Add an prototype instead of the links

So let's start customizing them...

1. Log inwards to your Blogger Dashboard, become to Template > Edit HTML

2. Click anywhere within the code surface area too notice - using CTRL + F keys - the next code:
    <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;' 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>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Or notice inwards this code the next fragments which corresponds to each page links
  • <data:newerPageTitle/> represents Newer Posts link
  • <data:olderPageTitle/> represents Older Posts link
  • <data:homeMsg/> represents Home link

Now modify these fragments of codes every bit it follows:

A. Change the text of Newer Posts, Older Posts too Home Links


You postulate to REPLACE next parts inwards master code alongside ANY TEXT you lot like:
  • replace <data:newerPageTitle/> with, for instance NEXT POST 
  • replace <data:olderPageTitle/> with, for instance PREVIOUS POST
  • replace <data:homeMsg/> (only the firstly one) with, for instance HOMEPAGE

    B. Place a film beside Newer Posts, Older Posts too Home links


    Add the below code simply at the showtime of each of the colored fragments of codes from pace 2.
    <img src="URL Address"/>

    So it should expect similar this:
    <img src="URL Address"/><data:newerPageTitle/>
    Note: Replace URL Address text alongside the url address of the prototype you lot desire to appear

    C. Replace Older Posts, Newer Posts too Home links alongside an image/picture


    You tin identify whatever sort of film you lot desire All you lot stimulate got to produce is locomote this code for the pic:
    <img src="URL ADDRESS"/>
    ...just supplant URL ADDRESS, alongside the URL of your hosted picture
    ...and inwards code, REPLACE the master link code for text alongside film code
    • replace <data:newerPageTitle/> alongside the pic for newer (next) posts
    • replace <data:olderPageTitle/> alongside the pic for older (previous) posts
    • replace <data:homeMsg/> (only the firstly one) alongside the pic for homepage
    Screenshot
     Home too Older Post are links that seem on the bottom of the posts Replace Older, Newer And Home Blogger links alongside an prototype or text

    3. That's it! Preview too Save the Template.

    Comments