Modfikasi Link Navigation Feet (Navigasi Older dan Newer Post) Pada bagian bawah posting di Blogger

Navigation Feet ini berisi link untuk "Recent posts", "Older posts" dan "Halaman Utama" yang masih standar, tanpa format atau gaya. Pada artikel ini saya akan menunjukkan kepada Anda bagaimana untuk modivikasi ke format yang lebih menarik.


1. Klik tab "Layout" dan kemudian ke "Edit HTML"


2. Centang pada kotak "Expand widget template", dan download dulu template anda untuk mengembalikan perubahan jika nantinya terjadi kesalahan. Kemudian dalam kolom teks, cari kode berikut:

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

Kode dibawah ini yang terdapat diatas adalah kode yang menampilkan link navigasi. Pengertian masing-masing kode tersebut adalah:

<data:newerPageTitle/> – Recent posts

<data:olderPageTitle/> – Older posts

<data:homeMsg/> – Halaman Utama

3. Modivikasi:

Mengubah Tulisan Ke teks lain. Untuk mengganti teks ke teks lain yang anda sukai, hanya perlu mengganti kode link pada kode diatas dengan teks pilihan anda. Sebagai contoh, untuk link posting yang lebih baru, hapus <data:newerPageTitle/> ganti dengan "Newer posts atau lebih baru dll".

Mengubah link teks menjadi link gambar, seperti dibawah ini:



Untuk mengganti teks menjadi gambar, kita dapat mengikuti langkah-langkah seperti diatas dan ganti semua label dengan gambar yang sesuai.

Sebagai langkah awal, anda bisa menggunakan kode dibawah ini pada blog anda beserta URL gambarnya. Nanti setelah anda melihat hasilnya, barulah anda bisa mengganti URL gambarnya dengan URL gambar lain yang anda sukai:

<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 alt='data:newerPageTitle' src='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/s1600/botong_atras.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 alt='data:olderPageTitle' src='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/s1600/botong_adelante.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img alt='data:homeMsg' src='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/s1600/botong_home.gif'/> </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>

Ket. Bagian yang warna merah diatas adalah URL yang bisa anda ganti ke URL gambar lain.

Format link. Jika Anda hanya ingin memberikan format yang lebih baik pada link tersebut, hanya dengan mengubah atribut berikut:

# blog-pager-newer-link - Untuk "Recent posts"
# blog-pager-older-link - Untuk "Older posts"
# home-link - Untuk "Halaman Utama"