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 :

Posting Lebih Baru

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


Posting Lama

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


Beranda

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


Left

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


Right

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


Home

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

Komentar