Change newer older post link blogger

Changing Older Post and Newer Post with Next and Previous

Before

After

Follow the steps below:

1. Log in to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click “Download Full Template”, please back up first your template (important)
5. Please check the small box beside Expand Widget Template

Wait for a while until the process finished. Find the following code on your 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>

Look at the code in red printed.
Change the code <data:newerPageTitle/> with the word Next and the code <data:olderPageTitle/> with the word Previous


Click Save Template button
Finished. 



Changing Older Post and Newer Post with Icon
To change Older Post and Newer Post with icon, the first step is preparing the icon which you want to use. For example the icons look like this:

Please upload the icons you have to a server that you usually use to place an image, and note the URL address. For example the icons’ URL address as follow:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800

Change the above code into like this:

<img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800' title='Next'/><img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800' title='previous'/><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800' title='home'/>

If you have had the code as above, the next step is to place it on your template code, here are the ways:

1. Log in to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click “Download Full Template”, please back up your template first (important)
5. Please check the small box beside Expand Widget Templates

---

Your Ad Here

---

Wait for while until the process finished. Find this code on your 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>

Look at the code in red printed
Change the code <data:newerPageTitle/>, <data:olderPageTitle/>, and <data:homeMsg/> with your icon code. E.g.

<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'><img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800' title='Next'/></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'><img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800' title='previous'/></a>      </span>    </b:if>   <b:if cond='data:blog.homepageUrl != data:blog.url'>      <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800' title='home'/></a>      <b:else/>      <b:if cond='data:newerPageUrl'>        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>      </b:if>    </b:if>

Click Save Template button


The example of the result will be like this: