Blogger Post Pager With Post Title And Thumbnail Support HTTPS

Ditulis oleh: Adhy Suryadi
Ditulis pada: 7/01/2017

Sebelumnya saya sudah membagikan cara membuat post pager menggunakan post title atau custom post pager.

Nah kali ini kita akan membuat post pager selain menggunakan post title juga menggunakan image post sebagai thumbnail post pager.

Dengan menggunakan thumbnail pada next previous post, maka tampilan post pager semakin menarik. Sebagai demonya, silahkan cek post pager pada halaman berikut:

DEMO

Bagaimana, Anda tertarik untuk mencoba menggunakannya?

Silahkan ikuti langkahnya di bawah ini.

Silahkan copy style CSS dan simpan di atas kode </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>

Kemudian silahkan ganti kode HTML blog pager seperti yang di bawah ini.


<b:includable id='nextprev'>

..........

..........

..........

</b:includable>

Silahkan ganti dengan kode HTML di bawah ini


            <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>

Kemudian silahkan tambahkan kode HTML berikut di bawah postingan


        <b:if cond='data:blog.pageType == &quot;item&quot;'>

         <b:include name='nav-post'/>

        </b:if>

Sehingga penampakannya menjadi seperti di bawah ini


            <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>

Kemudian silahkan tambahkan kode javascript berikut di atas kode </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>

Dan pastikan Anda sudah memasang jquery library dan Font Awesome di blog Anda.

Blogger Post Pager With Post Title And Thumbnail Support HTTPS

Ditulis oleh: Adhy Suryadi Ditulis pada: 7/01/2017

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 7/01/2017