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

Didalam sebuah template tombol next page biasanya terdiri dari 2 model

Tombol Next Page Dengan Angka
Tombol Next Page Dengan Tombol Home dan Next

Kedua jenis tombol next page tersebut tentunya menentukan kekurangan dan kelebihan masing-masing. Tetapi disini admin akan memberikan tutorial menciptakan tombol next page yang hanya terdiri atas tombol home dan next saja.

Mengapa?

Tombol next page dengan model menyerupai itu tentu saja lebih ringan daripada tombol next page yang memakai angka. Kode-kode yang digunakan hanya membutuhkan aba-aba HTML dan CSS saja, berbeda dengan tombol next page angka yang juga membutuhkan aba-aba javascript yang sanggup memperberat loading blog anda.

Tanpa menunggu usang lagi, yuk pribadi simak dan ikuti cara-caranya berikut ini :

Cara Membuat Tombol Next Page

Sebelum anda melaksanakan tutorial ini sebaiknya backup dulu template anda supaya kalau terjadi sesuatu yang tidak diinginkan sanggup dikembalikan menyerupai semula.

Berikut langkah-langkahnya

Buka blogger => Tema
Pilih Edit HTML
Masukkan Kode CSS berikut ini sempurna diatas aba-aba </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 aba-aba berikut ini pada template anda

<b:includable id='mobile-nextprev'>

Kemudian masukkan aba-aba berikut ini sempurna 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 hingga disitu?
Belum. Masih ada beberapa langkah lagi yang harus anda lakukan.

Berikutnya carilah aba-aba menyerupai ini pada template anda

<b:includable id='nextprev'>

Bila sudah ketemu taruhlah aba-aba berikut ini sempurna 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 teladan tampila tombol next yakni menyerupai ini

Klik Disini Untuk Melihat Hasilnya

Bagaimana? Praktis bukan? Sekian artikel wacana cara menciptakan tombol next page sederhana di blog yang sanggup 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 , biar postingan ini bermanfaat bagi pembaca.

Cara Menciptakan Tombol Next Page Sederhana Di Blog

Mengapa?

Cara Membuat Tombol Next Page