Mengganti Pager Link Blogger Dengan Icon

Mungkin bukan hal yang luar biasa untuk mengganti pager link blogger dengan icon. Bagi anda yang tertarik untuk mengganti teks itu, bisa membaca tulisan ini sampai tuntas. 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. Silahkan lihat [Demo Pager Link] dan gambarnya seperti ini :


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

Mungkin ga 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 :


Oke, selamat mencoba dan semoga bermanfaat.