Replace Older, Newer Together With Abode Blogger Links Alongside 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 i of these links, they volition lead maintain him to the page alongside the listing of your previous posts.
The discover of the posts on these pages volition endure the same equally the discover of the posts on your top dog page.

What nosotros tin do:

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

So let's start customizing them...

1. Log inward to your Blogger Dashboard, larn to Template > Edit HTML

2. Click anywhere within the code expanse 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Or notice inward 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 alter these fragments of codes equally it follows:

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

You take away to REPLACE next parts inward master copy code alongside ANY TEXT yous like:

replace <data:newerPageTitle/> with, for illustration NEXT POST
replace <data:olderPageTitle/> with, for illustration PREVIOUS POST
replace <data:homeMsg/> (only the initiative of all one) with, for illustration HOMEPAGE

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

Add the below code merely at the starting fourth dimension of each of the colored fragments of codes from stride 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 yous desire to appear

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

You tin identify whatever variety of painting demo yous desire All yous lead maintain to create is run this code for the pic:

<img src="URL ADDRESS"/>

...just supplant URL ADDRESS, alongside the URL of your hosted picture
...and inward code, REPLACE the master copy link code for text alongside painting demo 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 initiative of all one) alongside the pic for homepage

Screenshot