Cara Membuat Blog Navigation dengan Icon Arah Panah

Cara Memasang Blog Navigation atau Blog Pager dengan Icon Arah Panah - Kemungkinan anda memilih untuk membaca artikel ini karena bosan dengan tulisan Older Post dan Newer Post yang sering muncul di bagian bawah artikel dan ingin segera merubahnya. Atau anda sedang mencari opsi lain dari sekian tutorial yang telah anda baca tentang Blog Pager. Atau pula karena alasan lain yang hanya anda sendiri yang tahu.

Apapun alasan anda, itu untuk anda, dan bagi saya tutorial ini saya harap menjadi solusi buat anda. Jika berminat mengubah Older Post dan Newer Post menjadi arah panah ikuti langkah di bawah ini.

Langkah 1 : Ganti kode CSS blog pager anda (jika ada) yang terdapat di atas kode ]]></b:skin> atau </style> dengan kode di bawah ini.

#blog-pager {padding:25px;margin:0}
#blog-pager a.home-link{text-align:center;display:none}
#blog-pager-newer-link, #blog-pager-older-link {background:linear-gradient(180deg,#2388ad ,#1f7797 50%,#1b6885);box-shadow: 0 0 4px #bbb;border-radius:5px;border:2px solid #eee;padding:1px 10px}
#blog-pager-newer-link{float:left;margin-right:3px}
#blog-pager-older-link{float:right;}
#blog-pager-newer-link a,#blog-pager-older-link a{color:#fff}

Langkah 2 : Cari dan hapus kode ini

<b:includable id='nextprev'>……sampai…..</b:includable>

Ganti dengan ini

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <div style='float:right'>
    <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'> &#9668; </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'> &#9658; </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>
  <div class='clear'/>
</b:includable>

Langkah 3 : Simpan template

Silahkan ganti warna background dan font sesuai keinginan anda.

Demikian tutorial tentang Cara Membuat Blog Navigation dengan Icon Arah Panah. Semoga bermanfaat dan selamat mencoba!

Baca Juga: