Mengganti Link Home, Older Post & New Post Dengan Gambar

Satu lagi tips untuk membuat tampilan blog semakin asik dan ciamik. Biasanya dibagian bawah postingan blog terdapat link teks older post, home dan new post, nah...biar tambah siip link teks tersebut kita rubah dengan gambar atau icon yang bisa menambah daya tarik pengunjung blog. Trik ini biasa digunakan pada kebanyakan blog profesional selain menambah daya tarik, fungsi dari link ini akan menjadi optimal untuk pengunjung blog dalam menavigasi halaman blog...Tertarik ???

Oke buat sobat blogger yang ingin mencoba trik ini, silakan ikuti langkah-langkahnya:

1. Login ke blog sobat.
2. Klik "Design" kemudian klik "Edit HTML".
3. Centang "Expand Widgets Templates' box".
4. Untuk New Post cari kode di bawah :

<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 + "_blog-pager-newer-link"'
expr: title = 'data: newerPageTitle'><data:newerPageTitle/></ a>
</ span>
</ b: if>

Ganti baris kode diatas yang berwarna merah "<data:newerPageTitle/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDgjb6DI7w2JkLEe52coB2Mjsm0QEzEjW-dCeYIyeUVZojX_B-ZYCUlV3uMaSF8Cc32xyxXG_0h7tct0BwywC0IDlPJZiKCPGeTeOIU4KX_0tJ9zTjyV_81M2-6fyFiEwZ1k8EGwuG8jN/s800/newer.png"/>".

5.Untuk Older Post cari kode di bawah : 

<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 + "_blog-pager-older-link"'
expr: title = 'data: olderPageTitle'><data:olderPageTitle/></ a>
</ span>
</ b: if>

Ganti baris kode diatas yang berwarna merah "<data:olderPageTitle/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXqOG2sJXyQz-z3Z5F2hH1e7BRgXX0je9uLIDIC0MTB8t9Yerw8fqa8s-ura6Rmn4q8BTUL7gMA3USPHPkMvS6sC-IcVQDUOMAKQbNwy3yd2lZdE2gLOyqZQKceyaScIbBNSrCrcl2lyJ/s800/older.png"/>".

6.Untuk Home cari kode di bawah : 

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

1. Ganti baris kode diatas yang berwarna merah "<data:homeMsg/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPrlBfKuUDQPii3TPi-On0LehA9gYsDRr4RR2afwdwYa-aD_j-whBqLZOzcUfXhY0lVHIY73J4C306NnEZAQfR38lTdC8fwJ_lLdAQOnJILxxD2KPPETkLGj-ZYqgLbvZdnUWkiLadFBb/s800/home.png"/>".
2. Gunakan CTRL+F untuk memunculkan search bar browser agar lebih mudah untuk mencari kode-kode di atas. Cukup ketikan newerPageUrl, olderpageUrl dan homepageUrl untuk mempercepat pencarian.
3. Untuk menggunakan gambar / icon sendiri, sobat blogger cukup mengganti link URL gambar / icon yang sobat inginkan.
4. Klik "Save" dan lihat hasilnya...

.:Semoga Bermanfaat:.

Related Post