Cara Mengganti Tulisan Older Post dan Newer Post Dengan Icon Gambar

Secara default, setiap template blogger akan dilengkapi dengan older post dan newer post yang masing-masing berfungsi untuk menampilkan postingan lama dan baru.

Nah agar tampilannya lebih menarik, anda bisa menggantinya dengan icon-icon mungil. Contohnya seperti gambar dibawah ini.


Menarik bukan? Klu anda tertarik silahkan ikuti langkah-langkah dibawah ini

1. Pada menu klik Layout -> Edit HTML
2. Biar aman backup dulu template anda dengan klik Download Full Template
3. Beri tanda centang pada kotak "Expand Widget Template"
4. Lalu cari kode <data:olderPageTitle/>
5. Kalau sudah ketemu ganti kode tersebut dengan kode icon dibawah ini.


kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/bt-right.png" border="0" >

kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward2.png" border="0" />

kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward3.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward1.png" border="0" />

6. Contohnya anda mau menggunakan icon maka ganti kodenya dengan <img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/bt-right.png" border="0" />.

7. Untuk mengganti tulisan newer post. Cari kode <data:newerPageTitle/> lalu ganti dengan kode icon dibawah ini.


Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/bt-left.png" border="0" /></a>

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back2.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back3.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back1.png" border="0" />

8. Sepertinya kurang maknyus jika tidak mengganti tulisan homenya. Ok, untuk menggantinya cari kode <data:homeMsg/>. Biasanya ada 2 kode yang sama. Ganti kode yang pertama dengan kode icon dibawah ini.


Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home2.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home1.png" border="0" />

Kode:

<img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home3.png" border="0" />

9. Setelah itu, klik Save Template.
10. Selesai. Silahkan klik View Blog untuk melihat hasilnya.

Untuk mendapatkan icon-icon cantik lainnya. Coba kunjungi http://www.iconarchive.com. Disana tersedia ribuan icon yang bisa anda download secara gratis.

credit : http://hermanblogtips.blogspot.com