Cara Mengganti Tulisan Navigasi Blogger dengan Gambar - Mengganti Tulisan Newer Older Post

Kalau sebelumnya saya pernah membahas cara menambah gambar pada tulisan navigasi Blogger, maka sekarang adalah "Cara Mengganti Tulisan Navigasi Blogger dengan Gambar". Lalu apa bedanya? Kalau pada tutorial sebelumnya kita hanya menambah gambar tanpa menghapus tulisan navigasi yang ada, sedangkan untuk yang kali ini kita akan menghapus tulisan navigasi tersebut dan akan menggantinya dengan gambar navigasi pilihan kita. Sebagai contohnya, teman-teman bisa memperhatikan pada bagian paling bawah postingan blog ini maka ada gambar dua panah GIF yang mengarah ke kanan dan kiri serta gambar Home di tengahnya, seperti berikut

Jika teman-teman tertarik untuk membuat yang seperti itu silahkan untuk login dulu ke akun blogger.
1. Klik Tata Letak
2. Dan jangan lupa untuk mencentang kotak "Expand Widget Template"
3. Selanjutnya carilah kode <data:newerPageTitle/> dan kalau dah ketemu ganti dengan kode berikut

<img src='http://lh5.ggpht.com/_RVpTV2JOOxA/S6Y6r7zjmmI/AAAAAAAACaE/aWbL6AYV1aw/panah_kiri_t4belajarblogger.gif'/>

maka tulisan newer post-nya teman-teman akan menjadi gambar:

4. Carilah kode <data:olderPageTitle/> dan gantilah dengan kode berikut

<img src='http://lh4.ggpht.com/_RVpTV2JOOxA/S6Y6ru37VvI/AAAAAAAACaA/nNyLy4yHxk8/panah_kanan_t4belajarblogger.gif'/>

Maka nanti tulisan older post pada blog teman-teman jadi seperti ini:

5. Selanjutnya cara mengubah tulisan home/halaman depan dengan gambar rumah. Silahkan untuk mencari kode <data:homeMsg/> maka nanti teman-teman akan menemukan dua kode yang sama, dan pilihkah yang paling atas - sebagai contoh, lihat susunannya berikut
-------------------------------------------
<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>
-------------------------------------------
maka yang telah saya tandai dengan warna merah itu harus diganti dengan kode berikut

<img src='http://lh5.ggpht.com/_RVpTV2JOOxA/S6Y6rNjq_6I/AAAAAAAACZ8/tGBNhNe6oRY/halaman_depan_t4belajarblogger.png' title='Home/Halaman Muka'/>

Dan nanti tampilan tulisan home/halaman depan akan tergantikan dengan gambar:

6. Kalau sudah selesai, jangan lupa klik simpan template. Silahkan untuk melihat tampilan blog anda, dan agar ketiga gambar tersebut bisa anda lihat maka cobalah untuk mengklik postingan mana saja yang ada di blog teman-teman dan usahakan pada postingan yang bukan paling pertama maupun postingan yang terakhir

Jika teman-teman memilki gambar sendiri untuk mengganti tulisan newer, older post, serta home/halaman depan - silahkan untuk mengganti URL gambar milik saya dengan URL gambar pilihan milik teman-teman (kalau mau lho, kalau nggak ya nggak apa2^), berikut yang harus diganti:

1. Untuk maka URL-nya http://lh5.ggpht.com/_RVpTV2JOOxA/S6Y6r7zjmmI/AAAAAAAACaE/aWbL6AYV1aw/panah_kiri_t4belajarblogger.gif

2. Untuk maka URL-nya http://lh4.ggpht.com/_RVpTV2JOOxA/S6Y6ru37VvI/AAAAAAAACaA/nNyLy4yHxk8/panah_kanan_t4belajarblogger.gif

3. Untuk maka URL-nya http://lh5.ggpht.com/_RVpTV2JOOxA/S6Y6rNjq_6I/AAAAAAAACZ8/tGBNhNe6oRY/halaman_depan_t4belajarblogger.png

Tips cepat untuk menemukan URL gambarnya: Gunakan tombol Ctrl+F

Semoga Bermanfaat_


Tags: Cara mengganti tulisan navigasi, navigasi blogger jadi gambar, mengganti newer older post jadi gambar, bagaimana ubah newer older post home jadi gambar, ganti tulisan newer older dengan icon