Cara Merubah Tulisan Older Post dan Newers Post dengan icon

Halo sobat semua, kali ini masih dalam seputar Blogger Hack sesuai dengan judul diatas Cara Merubah Tulisan Older Post dan Newers Post dengan icon setelah yang sebelumnya saya telah membahas bagaimana Cara Merubah Tulisan Older Post dan Newers Post ,bedanya kalau yang ini menggunakan gambar atau icon, bagi sobat yang berminat
berikut cara merubahnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari kode seperti dibawah

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>

</div>

Ganti kode yang berwarna biru dengan Url lokasi tempat penyimpanan gambar atau icon milik sobat.
Berikut contoh gambar atau icon berserta kodenya :



http://i1002.photobucket.com/albums/af149/Imtikhan/Posting_lebih_baru.gif




http://i1002.photobucket.com/albums/af149/Imtikhan/Posting_lama.gif




http://i1002.photobucket.com/albums/af149/Imtikhan/Beranda.png




http://i1002.photobucket.com/albums/af149/Imtikhan/left.png




http://i1002.photobucket.com/albums/af149/Imtikhan/right.png




http://i1002.photobucket.com/albums/af149/Imtikhan/home.png


Berikut contoh perubahan kode diatas :

<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="http://i1002.photobucket.com/albums/af149/Imtikhan/Posting_lebih_baru.gif"/></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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="http://i1002.photobucket.com/albums/af149/Imtikhan/Posting_lama.gif"/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://i1002.photobucket.com/albums/af149/Imtikhan/Beranda.png"/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://i1002.photobucket.com/albums/af149/Imtikhan/Beranda.png"/></a>
</b:if>
</b:if>

</div>

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Share this post