Membuat Tombol Next dan Previous Pada Blog

Membuat Tombol Next dan Previous Pada Blog

Assalamualaikum wr. wb. dan salam kreatif bagi kalian para blogger yang setia mengunjungi pena sang mahasiswa. Pada tutorial kali ini, pena sang mahasiswa akan menunjukkan cara membuat tombol next dan previous pada blog agar blog kalian terlihat lebih keren dan perfect. Kurang lebih tampilannya seperti pada gambar di bawah ini.

Tombol Previous dan Next

Pertama-tama copy script berikut ini.

.pagebutton-nextprevious {margin-bottom: 10px; overflow:hidden; padding:0;margin-right:5px;margin-left:5px;} .pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left; border-right:1px solid #ddd; padding:0; background:#5498c9;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:#5498c9; 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:#5498c9;color:#ccc } .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;} .pagebutton-nextprevious li a:hover span, .pagebutton-nextprevious li a:hover i { color: #ccc; } .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-duration: 0.4s; transition-timing-function: ease-out; }

Jika selesai, lalu kalian save dengan meng klik simpan tema. Kemudian masuk ke platform blogger kalian, masuk ke Tema dan klik edit HTML. Nah kalian cari kode ]]></b:skin>  lalu paste script yang telah kalian copy di atas ]]></b:skin> untuk memudahkan kalian mencari code/script tekan Ctr + F untuk menggunakan kotak pencari.

Selanjutnya copy script berikut.

<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>
</i></b:else></a></i></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>
</i></b:else></a></i></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>

Kemudian kalian harus menuju ke tata letak. Di bawah blog post atau comment system tambahkan gadget dan pilih HTML/java script. Setelah itu paste kode yang telah kalian copy tadi di gadget tersebut. Terakhir klik simpan/save.

Tambah Gadget HTML/Javascript

Jika kalian telah melakukan semua langkah-langkah di atas coba kalian cek blog kalian. Apakah tombol Next dan Previous sudah muncul atau belum.

Baiklah demikian tutorial pena sang mahasiswa mengenai Membuat Tombol Next dan Previous Pada Blog. Jangan lupa share artikel ini agar dapat menambah ilmu banyak orang. Mohon maaf jika terdapat kesalahan dalam penulisan artikel ini terutama jika terdapat kesalahan kata. Jika kalian mempunyai kritikan, saran, maupun question, silahkan hubungi saya melalui contact form yang disediakan atau melalui kolom komentar yang ada di bawah. Akhir kata semoga bermanfaat, dan wassalamualaikum wr. wb.

Tweet