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 ibarat itu tentu saja lebih ringan daripada tombol next page yang memakai angka. Kode-kode yang digunakan hanya membutuhkan isyarat HTML dan CSS saja, berbeda dengan tombol next page angka yang juga membutuhkan isyarat javascript yang sanggup memperberat loading blog anda.

Tanpa menunggu usang lagi, yuk eksklusif 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 ibarat semula.

Berikut langkah-langkahnya

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

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

Kemudian masukkan isyarat 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 isyarat ibarat ini pada template anda

<b:includable id='nextprev'>

Bila sudah ketemu taruhlah isyarat 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 pola tampila tombol next adalah ibarat 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.