Merubah Tampilan Home, Next and Prev Pada Bagian Bawah Postingan Blog

Sempat ingin membagikan sebuah trik sederhana ke teman-teman semua. Namun saya ragu apakah trik ini di cari atau di sukai oleh teman-teman. Jika kita melihat template bawaan blogger, biasanya pada halaman utama dan halaman postingannya. Pada bagian bawahnya itu akan kita jumpai tombol home, next and prev (beranda, postingan lama dan postingan baru) atau biasa dikenal dengan istilah blog pager.

Nah pada artikel ini, saya akan memberikan sebuah trik cara memodifikasi tampilan tombol itu. Dimana akan kita berikan sedikit hiasan warna agar membuat tampilan tombol itu menjadi lebih menarik dari sebelumnya. Sebagai contoh: coba lihat halaman utama blog ini atau lihat gambar diatas. Pada artikel ini, saya mengambil kode yang ada pada template blog bawaan blogger.

1. Silahkan teman-teman cari kode di bawah ini:

<b:includable id='nextprev'>
  <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'><data:newerPageTitle/></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'><data:olderPageTitle/></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'/>
</b:includable>

Atau biar lebih gampangnya tekan tombol Ctrl+F masukkan kata kunci "id=nextprev" dan enter. Maka akan kita jumpai kode seperti diatas.

2. Setelah ketemu, lihat pada langkah 1 (satu) pada kode yang bertuliskan warna merah itu. Ganti semua kode tersebut dengan kode di bawah ini:

<div id='blog-pager'>
  <b:if cond='data:olderPageUrl'>
    <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='View More'>View More</a>
      </b:if>
     <b:if cond='data:newerPageUrl'>
    <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Back'>Back</a>
  </b:if>
</div>

Pada trik ini kita telah menghilangkan / menghapus tombol home. Sehingga yang tersisa adalah tombol next dan prev.

3. Memberikan hiasan warna serta penyesuaian lebar pada blog pager tadi dengan menggunakan css. Copy kode di bawah ini dan pastekan diatas </style> atau ]]></b:skin>.

#blog-pager {background: #93D0E2; width: 100%; text-align: center; padding:6px;}
#blog-pager a, #blog-pager a:hover {color:#fff}
#blog-pager:hover {background: #4190A8;transition: all 0.5s ease-in-out;}

4. Langkah terakhir adalah menyimpan pekerjaan kita tadi (save template).

Bagi teman-teman yang ingin menghilangkan blog pager tersebut pada halaman postingan (hal yang paling sering di cari blogger). Kamu bisa menambahkan tag kondisional pada langkah ke 2 (dua).
Baca: Pengenalan Tag Kondisional Pada Blogspot

Sebagai penerapannya, tempatkan kode tag kondisional tersebut seperti pada contoh di bawah:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='blog-pager'>
------lihat kodenya pada langkah no 2------
</div>
</b:if>