Membuat Next dan Previous Button di Bawah Posting

- Tombol next, home, dan previous biasanya terletak di bawah kolom komentar artikel. Karena tombol tersebut adalah tombol bawaan default template. Untuk merubahnya berada dibawah posting blog, berikut merupakan tutorial dan langkah-langkahnya.
Ini penampakannya sob :D

Langkah-langkah pemasangannya sebagai berikut :

Masuk blogger, lalu pilih Template
Tekan Ctrl+F, Cari kode <style> atau */]]></b:skin>

Copy code berikut dan letakkan di atas salah satu kode tadi

/* -- PAGE PAGINATOR -- */
.pagebutton-nextprevious {background:#188DFF;margin-bottom: 10px;   overflow:hidden; padding:0;border-radius:5px;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left;  border-right:1px solid #ddd; padding:0; background:#188DFF;color:#ffffff;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}
.pagebutton-nextprevious li.previous {float: right; padding:0; background:#188DFF; margin:0;color:#ffffff}
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }
.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover  {background:#FD4848;color:#ffffff }
.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 55px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.pagebutton-nextprevious li i { color: #ffffff; font-size: 18px; }
.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #ffffff; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.pagebutton-nextprevious li a span { font-size: 15px; color: #ffffff;  font-family:oswald,Helvetica, arial; margin:0;transition:all 400ms ease-in-out}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #fff; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }
.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,
.pagebutton-nextprevious li.next, .pagebutton-nextprevious li.previous{transition:all 400ms ease-in-out}

Sesuaikan warna yang telah saya markup dengan warna yang sesuai dengan warna blog anda.

Kemudian copy dan pastekan kode berikut ini di template, di daerah bawah postingan blog sobat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='pagebutton-nextprevious'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next' title='Newer Post'/>
<b:else/>
<i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous' title='Older Post'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a>
</b:if>
</li>
</ul>

<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if>

Setelah semuanya selesai, kemungkinan di blog kamu masih ada blog pager bawaan dari blogger template kamu. Letaknya berada setelah komentar di bawah sendiri. Nah, silahkan hidden blog pager bawaan template sobat. Cari kode seperti berikut :

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center;}

Tinggal sobat tambahkan kode visibility:hidden untuk menyembunyikannya, sehingga hasilnya akan seperti ini :

#blog-pager-newer-link{float:left;visibility:hidden}
#blog-pager-older-link{float:right;visibility:hidden}
#blog-pager{text-align:center;}

Selesai.

Semoga artikel yang saya bagikan ini bisa bermanfaat bagi sobat blogger.
Mohon meninggalkan jejak di blog baru saya ini :)
Membuat Next dan Previous Button di Bawah Posting