April 18, 2018

Cara Membuat Tombol Next Page Sederhana di Blog

Cara membuat tombol next page pada blog - Kali ini admin akan membagikan sedikit tutorial bagaimana cara membuat tombol next page yang biasa terdapat di homepage blog.

Didalam sebuah template tombol next page biasanya terdiri dari 2 model
  1. Tombol Next Page Dengan Angka
  2. Tombol Next Page Dengan Tombol Home dan Next 
Kedua jenis tombol next page tersebut tentunya memilih kekurangan dan kelebihan masing-masing. Tetapi disini admin akan menyampaikan tutorial membuat tombol next page yang hanya terdiri atas tombol home dan next saja.

Mengapa?

Tombol next page dengan model seperti itu tentu saja lebih ringan daripada tombol next page yang menggunakan angka. Kode-kode yang dipakai hanya membutuhkan kode HTML dan CSS saja, berbeda dengan tombol next page angka yang juga membutuhkan kode javascript yang bisa memperberat loading blog anda.

Tanpa menunggu lama lagi, yuk langsung simak dan ikuti cara-caranya berikut ini :

Cara Membuat Tombol Next Page

Cara Membuat Tombol Next Page di Blog

Sebelum anda melakukan tutorial ini sebaiknya backup dulu template anda supaya jika terjadi sesuatu yang tidak diinginkan bisa dikembalikan seperti semula.

Berikut langkah-langkahnya
  • Buka blogger => Tema
  • Pilih Edit HTML
  • Masukkan Kode CSS berikut ini tepat diatas kode </style> atau ]]></b:skin>
/* Blog pager */
#blog-pager{text-align:center;padding:0;}
#blog-pager .home-link{display:inline-block;}
#blog-pager a{background:#008FFF;display:block;margin:15px 0 20px;padding:0 12px;line-height:25px;color:#fff;font-weight:400;z-index:999;border-radius:2px}
#blog-pager a:hover{text-decoration:none;color:#fff;background:#d85c58}
#blog-pager a.blog-pager-older-link{float:right;padding:0 12px}
#blog-pager a.blog-pager-newer-link{float:left}

  • Langkah selanjutnya carilah kode berikut ini pada template anda
<b:includable id='mobile-nextprev'>
  • Kemudian masukkan kode berikut ini tepat dibawahnya 
<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'>Prev</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'>Next</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>

Apa cukup sampai disitu?
Belum. Masih ada beberapa langkah lagi yang harus anda lakukan.
  • Berikutnya carilah kode seperti ini pada template anda
<b:includable id='nextprev'>
  • Bila sudah ketemu taruhlah kode berikut ini tepat dibawahnya
<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'>Prev</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'>Next</a>

</span>

</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:if cond='data:mobileLinkUrl'>

<div class='blog-mobile-link'>

<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>

</div>

</b:if>

</div>

<div class='clear'/>
  • Klik Simpan untuk melihat hasilnya
Jika anda berhasil melakukannya, maka contoh tampila tombol next yaitu seperti ini

Klik Disini Untuk Melihat Hasilnya

Bagaimana? Mudah bukan? Sekian artikel tentang cara membuat tombol next page sederhana di blog yang bisa admin sampaikan. Apabila ada yang ingin ditanyakan, monggo jangan malu-malu untuk bertanya.

Baca Juga : Cara Membuat Tombol Like Dibawah Postingan

Akhir kata, Terimakasih telah berkunjung ke Blog Firdaus, semoga postingan ini bermanfaat bagi pembaca.

Komentarlah yang sopan
Jangan spam
Dilarang gunakan link aktif
Dilarang komentar yang menyinggung SARA dan berkonten negatif

Terima kasih :)