Mengganti Pager Link/halaman Blogger Dengan Icon

Kembali lagi dengan modifikasi template blogger, kali ini saya akan berbagi ilmu dengan teman-teman semua tentang cara mengganti pager link dengan icon. Jadi untuk teman-teman yang tertarik untuk membuatnya anda bisa baca tutorial ini sampai finish. Pager link blogger adalah tulisan yang bisa anda temukan di bagian bawah posting homepage blog. Teks yang saya maksud adalah tulisan Posting Lama, Halaman Muka dan Posting Lebih Baru.

Nah, tulisan yang saya tandai itulah yang akan diganti dengan icon. Barangkali anda sudah sering melihatnya bukan.

Mengganti Posting Lama, Posting Lebih Baru dengan Next dan Previous

1. Login ke blogger dengan id anda
2. Tuju ke menu Tata Letak
3. Pada tab menu, pilih Edit HTML
4. Backup template anda dengan mengklik Download Template Lengkap
5. Centang kotak kecil Expand Template Widget
6. Cari kode berikut :
   

   <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>
   
   

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>

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

   <b:else/>

   <b:if cond=’data:newerPageUrl’>

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

   </b:if>
   </b:if>

7. Ganti tulisan <data:newerPageTitle/> dengan Next dan <data:olderPageTitle/> dengan Previous
8. Sekarang klik tombol Simpan Template
9. Selesai

Barangkali tidak terlalu ribet dan lumayan simple. Oke, silahkan mencoba.

Mengganti Pager Link Blogger Dengan Icon

Untuk mengganti teks Posting Lama dan Posting Lebih Baru dengan icon, anda harus sudah menyiapkan icon terlebih dahulu. Misalnya seperti icon di bawah ini.

Kalau sudah punya icon, silahkan dihosting (upload) dulu ke tempat penyimpanan gambar anda. Misalnya di tinypic.com, photobucket.com atau yang lainnya. Kemudian catat alamat URL penyimpanan icon tersebut. Misalnya untuk icon yang sudah saya siapkan, alamat URLnya seperti ini :

• Halaman Muka (Home)
  http://i38.tinypic.com/28ko7za.jpg
• Posting Lebih Baru (Newer Post)
  http://i37.tinypic.com/2a6tcwo.jpg
• Posting Lama (Older Post)
  http://i33.tinypic.com/mr7dqs.jpg

Silahkan diganti kalau memang kurang cocok. Sesuaikan icon dengan warna dan desain template blog anda. Nah, alamat URL icon inilah yang akan digunakan untuk mengganti teks Halaman Muka, Posting Lebih Baru dan Posting Lama. Untuk mengerjakannya hampir sama seperti langkah di atas.

Pertama :
Ganti alamat icon menjadi seperti ini

<img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/>
<img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/>
<img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/>

Kedua :

1. Login ke blogger dengan id anda
2. Tuju ke menu Tata Letak
3. Pada tab menu, pilih Edit HTML
4. Backup template anda dengan mengklik Download Template Lengkap
5. Centang kotak kecil Expand Template Widget
6. Cari kode berikut :
   

   <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>

   
   

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>

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

   <b:else/>

   <b:if cond=’data:newerPageUrl’>

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

   </b:if>
   </b:if>

7. Perhatikan kode yang saya tebalkan berwarna hijau.
8. Ganti tulisan <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan alamat icon yang sudah disiapkan. Sehingga hasilnya menjadi seperti berikut :
   

   <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’><img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/></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’><img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/></a>

   </span>

   </b:if>

   
   

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>

   <a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/></a>

   <b:else/>

   <b:if cond=’data:newerPageUrl’>

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

   </b:if>
   </b:if>

9. Sekarang klik tombol Simpan Template
10. Selesai

Hasilnya akan seperti ini :

Tutorial diatas sudah selesai, dan kalau temen-temen menggunakan cara seperti diatas, pasti hasilnya akan sama dengan gambar itu. Saran saya hanya satu jangan terlalu banyak memasukkan kode HTML ke dalam template, nanti loadingnya menjadi berat seperti blog yang sudah lama saya buat (maklum masih dalam taraf belajar) sampai sekarang belum pernah saya buka lagi karena berat banget. 

Selamat mencoba dan semoga bermanfaat