Cara Menciptakan Tombol Next Post / Post Pager Newer Di Sertai Gambar(Thumbnail)

Post pager newer link berfungsi untuk menerangkan Artikel sebelum dan setelah artikel yang sedang anda Baca..

Tombol ini berdasarkan aku sendiri sangatlah bagus, Karena sanggup mengundang orang/ para pengunjung untuk meng kliknya sehingga sanggup meningkatkan Page View..

Untuk tampilannya yang kita buat akan ibarat Gambar ini :

Dengan menggunakan post pager newer/ Tombol next post maka akan semakin menarik apalagi untuk yang kali ini di sertai Gambar.. Bisa dibilang ini Adalah CUSTOM dari pager yang hanya menggunakan Title

Bagaimana Sangatlah menarik tentunya.. Jika kalian berminat menggunakannya juga Maka silahkan ikuti Langkah Langkah Berikut ini..

Cara menciptakan tombol Next post / post Pager Disertai Gambar..

Untuk langkah Yang pertama ini Silahkan Copy aba-aba CSS nya dan Pastekan aba-aba tersebut sempurna 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>

Jika Sudah ganti semua Tag aba-aba ibarat Dibawah ini..

<b:includable id='post' var='post'> ........ ........ </b:includable>

Jika gundah maksudnya apa.. maksudnya yaitu ganti semua aba-aba yang Ada mulai dari <b:includalble id='post' var='post'> hingga </b:includable>

Nah gantinya yaitu menggunakan aba-aba berikut 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>

Jika sudah tinggal kita pasang saja script pemanggilnya Tepat Dibawah artikel, Kalo untuk template aku meletakkan nya dibawah Kode /article

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

Dan untuk finishing atau Langkah terakhirnya yaitu meletakkan aba-aba Java Script dibawah ini sempurna 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>

Selesai Sudah ..

Saran sebelum memasang Script

Backup terlebih Dahulu Template anda sebelum melaksanakan Pengeditan .. Dan juga pastikan template anda sudah terpasang jquery library serta font awesome.. 

Baca juga : Cara menciptakan sitemap otomatis

Sebab bila tidak menggunakan font awesome tanda panah nya tidak akan muncul, yang muncul hanya gambar kotak yang ada haris silangnya..

Penutup

Sekian dari aku perihal artikel cara menciptakan tombol next post atau pager newer link pada Blogspot.. Saya akhiri salam..

Share this post