Modifikasi Readmore Dengan Gambar

Pada posting sebelumnya tentang membuat readmore saya telah bahas pada postingan disini. Nah sekarang saya masih ingin membahas tentang pasang readmore, tapi kali ini readmore dengan gambar alias backgroundnya menggunakan gambar. Mungkin sudah biasa sobat menggunakan fungsi readmore yang menggunakan teks tulisan, nah sekarang menggunakan gambar. Apakah sobat ingin mencoba memasangnya? Jika ingin silahkan lanjut baca hehe...

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini

]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.read_more {
background:url(http://img412.imageshack.us/img412/8126/reedmorebgvk0.gif) no-repeat right; /* SILAHKAN SOBAT GANTI GAMBARNYA DENGAN MILIK SOBAT */
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}

7. Setelah itu cari kode berikut ini:

<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>

8. Setelah ketemu, ganti tulisan Read More... dengan kode ini:

<p class='read_more'>» Read More... </p>

9. Simpan template dan lihat hasilnya...

Moga manfaat...!

Lihat juga disini