Ganti Text Old Post & New 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? Kalau anda tertarik silahkan ikuti langkah-langkah dibawah ini

1. Pada menu klik Template -> 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" />


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

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

Source : http://hermanblogtips.blogspot.com/2009/02/secara-default-setiap-template-blogger.html

1 comment for "Ganti Text Old Post & New Post dengan Icon Gambar"

Post a Comment

sdfdasfdsaffsdsaf tessss
fsadfsdafsdffs