Mengganti Pager Link 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

Tuju ke menu Tata Letak

Pada tab menu, pilih Edit HTML

Backup template anda dengan mengklik Download Template Lengkap

Centang kotak kecil Expand Template Widget

Cari kode berikut :

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>

</b:if>

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



<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>

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

Ganti tulisan <data:newerPageTitle/> dengan Next dan <data:olderPageTitle/> dengan Previous

Sekarang klik tombol Simpan Template

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 :

Tuju ke menu Tata Letak

Pada tab menu, pilih Edit HTML

Backup template anda dengan mengklik Download Template Lengkap

Centang kotak kecil Expand Template Widget

Cari kode berikut :

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>



</b:if>

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



<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>



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

Perhatikan kode yang saya tebalkan berwarna hijau.

Ganti tulisan <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan alamat icon yang sudah disiapkan. Sehingga hasilnya menjadi seperti berikut :

<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’><img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/></a>



</b:if>

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



<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’><img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/></a>



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

Sekarang klik tombol Simpan Template

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

Anda sedang membaca artikel tentang Mengganti Pager Link Blogger Dengan Icon dan anda bisa menemukan artikel Mengganti Pager Link Blogger Dengan Icon ini dengan url http://blackyz-art.blogspot.com/2013/07/mengganti-pager-link-blogger-dengan-icon.html. Anda boleh menyebarluaskan atau mengcopy artikel Mengganti Pager Link Blogger Dengan Icon ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.