Add Blogger Post Pager With Thumbnail and Post Title

This time we will make post pager in addition to using post title also use image post as post pager thumbnail.

By using thumbnails on next previous post, the post pager view is more interesting. You can see the post image above

How, are you interested in trying to use it?

Please follow the steps below.

Please copy CSS style and save above code </ head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{left:10px}
.panahkanan,.halaman-kanan a div:before{right:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{right:0}
.isihalaman-kiri img{left:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageleft,.current-pageright {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageleft{left:0;padding-left:40px;}
.halaman-kiri a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageright  {right:0;padding-right:40px}
.halaman-kanan a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-left{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Then please replace the blog pager HTML code as below.

<b:includable id='nextprev'>
..........
..........
..........
</b:includable>

Please replace with HTML code below

<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <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'>&#171; Next Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><i class='fa fa-chevron-left panahkiri'/><span class='pager-title-left'>Next</span><br/>This Is The Current Newest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <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'>Previous Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkanan'/><span class='pager-title-left'>Previous</span><br/>This Is The Oldest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
  </div>
<div class='clear'/>
</div>
</b:if>
            </b:includable>
            <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
      <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>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
  <div class='clear'/>
</b:includable>

Then please add the following HTML code below post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if>

So the appearance becomes as below

<b:includable id='post' var='post'>
  <article class='post hentry'.............
..........
..........
..........
  </article>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if>
</b:includable>

Then please add the following javascript code above code </ body>

<script type='text/javascript'>
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data)
            .find('.post-title')
            .text() + "' src='" + $(data)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        newerLink.html(thumb + '<div><h6>Next</h6><h5>' + $(data)
            .find('.post-title')
            .text() + '</h5></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data2)
            .find('.post-title')
            .text() + "' src='" + $(data2)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        olderLink.html(thumb2 + '<div><h6>Previous</h6><h5>' + $(data2)
            .find('.post-title')
            .text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>

And make sure you have installed the jquery library and Awesome Fonts on your blog.

Good luck....