Mengubah Navigasi Next dan Prev menjadi Judul dan Thumbnail di bawah postingan Blogspot
Next dan Previous merupakan salah satu menu navigasi yang ada di suatu blog, selain menu atas dan menu di sidebar. Biasanya navigasi next dan prev ini terdapat pada bagian bawah blog.
Menu navigasi selain berguna untuk memudahkan pengunjung dalam menemukan artikel kita, juga berguna untuk menunjang SEO, karena menu navigasi juga di crawl mesin pencarian google.
Dengan menu navigasi yang tampilannya berubah menjadi judul dan thumbnail, tentu saja membuat pengunjung akan semakin tertarik dengan artikel-artikel anda.
Untuk mengetahui bagaimana cara membuatnya, silakan ikuti langkah berikut!
Cara Mengubah Next dan Prev menjadi Judul dan Thumbnail di Blogspot
Langkah-langkahnya adalah sebagai berikut:
1. Silakan copy-paste kode berikut, kemudian taruh di atas </head>
<b:if cond="data:view.isPost">
<style type="text/css">
/*<![CDATA[*/
.sisih{margin:0;padding:0;min-height:170px;height:auto}
.sisih-tengen,.sisih-kiwo{transition:all .3s ease-in-out;color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.sisih-kiwo{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.sisih-tengen,.sisih-kiwo{-webkit-box-sizing:border-box}
.sisih-tengen{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.current-pageleft,.current-pageright,.sisih-tengen a,.sisih-kiwo a{font-size:16px;font-weight:700;background:0 0;text-decoration:none;line-height:1.1}
.sisih-tengen a,.sisih-kiwo a,.current-pageleft,.current-pageright{color:#fff}
#blog-pager,.isisisih-tengen,.isisisih-kiwo{margin:0!important}
.panahtengen,.panahkiwo,.sisih-kiwo a div:before,.sisih-tengen a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important}
.panahkiwo,.sisih-kiwo a div:before{left:10px}
.panahtengen,.sisih-tengen a div:before{right:10px}
.sisih-tengen a:hover,.sisih-kiwo a:hover{text-shadow:1px 1px 2px rgba(150,150,150,1)}
.isisisih-tengen img,.isisisih-kiwo img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isisisih-tengen img{right:0}
.isisisih-kiwo img{left:0}
.sisih-kiwo a div,.sisih-tengen 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}
.sisih-kiwo a div,.current-pageleft{left:0;padding-left:40px}
.sisih-kiwo a div:before{content:'\f053';font-family:FontAwesome}
.sisih-tengen a div,.current-pageright{right:0;padding-right:40px}
.sisih-tengen a div:before{content:'\f054';font-family:FontAwesome}
.sisih-kiwo a div h6,.sisih-tengen 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}
.sisih-tengen a:hover:after,.sisih-kiwo a:hover:after{opacity:0}
@media screen and (max-width:428px) {
.sisih-kiwo,.sisih-tengen{width:100%}
}
/*]]>*/
</style>
</b:if>
2. Silakan cari kode berikut <b:includable id="nextprev">, untuk mempermudah silakan klik wilayah kode di blog kemudian gunakan Cntrl+F. Kemudian copy-paste kode berikut, di atas kode tersebut.
<b:includable id='nav-post'>
<b:if cond="data:view.isPost">
<div class='sisih'>
<div class='blog-pager' id='blog-pager'>
<div class='sisih-kiwo'>
<div class='isisisih-kiwo'>
<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Next Post</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkiwo'/><span class='pager-title-left'>Next</span><br/>This Is The Current Newest Page</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='sisih-tengen'>
<div class='isisisih-tengen'>
<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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Previous Post »</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahtengen'/><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>
3. Langkah selanjutnya letakkan kode berikut di bawah postingan. Kode bisa bermacam-macam, kalo di blog saya kodenya </article>
<b:if cond="data:view.isPost">
<b:include name='nav-post'/>
</b:if>
4. Langkah terakhir adalah menyematkan javascript-nya di atas </body>
<script type='text/javascript'>
//<![CDATA[
!function(t){var e=t("a.blog-pager-newer-link"),r=t("a.blog-pager-older-link");t.get(e.attr("href"),function(r){var i=1==t(r).find(".post-body").length?"<img alt='"+t(r).find(".post-title").text()+"' src='"+t(r).find(".post-body img:first").attr("src",function(t,e){return e.replace(/.*?:\/\//g,"//").replace("s1600","s386")}).attr("src")+"' class='pager-thumb' width='386' height='170'/>":"";e.html(i+"<div><h6>Next</h6><h5>"+t(r).find(".post-title").text()+"</h5></div>")},"html"),t.get(r.attr("href"),function(e){var i=1==t(e).find(".post-body").length?"<img alt='"+t(e).find(".post-title").text()+"' src='"+t(e).find(".post-body img:first").attr("src",function(t,e){return e.replace(/.*?:\/\//g,"//").replace("s1600","s386")}).attr("src")+"' class='pager-thumb' width='386' height='170'/>":"";r.html(i+"<div><h6>Previous</h6><h5>"+t(e).find(".post-title").text()+"</h5></div>")},"html")}(jQuery);
//]]>
</script>
Demikian postingan Cara Mengubah Next dan Prev menjadi Judul dan Thumbnail di bawah postingan Blogspot, semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam
