Remove Next / Previous links and replace them with images

Let's start with something simple by adding a next and previous button image and remove the "older" and "newer" links.

This tutorial is a little bit tricky but easy enough to do. Firstly, go to your "edit template" page and click on "expand template".

Now, there should be a main wrapper code but if there isn't look for the following lot of code or something similiar, which will be at the very top-most lot of code for the next/previous links in your template:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<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;' 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>

In the above code find the code in red and replace it with the following bit of code:

<img align='left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZVAZM6erwrHxxqwBJ88_rfmtiDpJfT80ZAIgLrJ9dOvly123SAot0GnQPhunEE-8qW7ZuklTLhEhpsIslBgrHpPWT_qupplGRYta83MsbuCTT6MIBJpxpxEdZbWgc7jJn0I0RRYsZ7ZV/s97/previous.jpg' style='margin:-3px 0 -5px 0;'/>

Then, find the code in blue and replace it with the following lot of code:

<img align='right' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3zeRPlfjNcyqZ1mHjOVjd3sws1vukQdpMdYM9sV8XGy1O-KyeBjpIxInwnso0j8HLW598QL400Lh85l60nQKnQs3P3cWIakjQtFAqiYhHTiXx-igryKRyywMSCZGBeIm_uI_7sfzu0i-6/s97/next.jpg' style='margin:-3px 0 -5px 0;'/>

Then locate the css code for the blog pager, newer link, and older link near the top of your template and change it to the code below:

#blog-pager {
  background:#000000;
  text-align: center;
  padding:8px 0 10px 0;
}

#blog-pager-newer-link {
  float: $startSide;
  display:show;
  margin-top:0;
  margin-left:10px;
}

#blog-pager-older-link {
  float: $endSide;
  display:show;
  margin-top:0;
  margin-right:10px;
}

Preview your template and if it looks great, then save your template. Sometimes the home link in the blog pager will be out of alignment, but with this tutorial the blog pager's padding is out of alignment a little bit when you click on the older link on your blog. It's only off by one or two pxs though.