Cara Mengganti Read More dengan Gambar

Pada Artikel yang lalu saya pernah membahas tentang Membuat Read More Otomatis (Automatic Read More). Nah bagaimana kalau tulisan Read More kita ganti dengan gambar. Tentu akan terlihat lebih menarik bukan?
Bagi yang belum faham cara membuat Read More di Blog, supaya tidak bingung, sebaiknya terlebih dahulu membaca artikel Membuat Read More Otomatis (Automatic Read More) yang sudah ada di blog ini.
Kali ini saya akan menjelaskan bagaimana cara mengganti Read More dengan gambar.
Langkah Pertama / First Step
• Seperti biasa masuk ke www.blogger.com.
• Pilih rancangan atau tata letak.
• Klik edit HTML.
• Sebelum melangkah ke pemasangan kode, silahkan download template anda, klik download template lengkap.
• Kemudian centang Expand widget template.
Langkah Kedua / Second Step
Gunakan Ctrl + F untuk mencari kode seperti atau yang mirip dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'
><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kode yang berwarna merah dengan kode seperti di bawah ini. Jadi seperti ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><img src='http://lh5.ggpht.com/_9b1traaMESE/SpeKqaOoi8I/AAAAAAAAAyw/7XvVW9lxqjk/read more.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Simpan Template.!

Ket: Kode yang berwarna merah dapat anda ganti dengan alamat url gambar anda sendiri sesuai template warna anda.

Selesai..mudah bukan? Bagi yang belum mengerti dengan apa yang saya jelaskan silahkan bertanya melalui kotak komentar di bawah ini.

1 comment:

  1. blogwalkinggg....
    Visit back yuaa.... :)

    ReplyDelete

Terima kasih sudah berkunjung, komentar dan saran anda sangat saya hargai demi perkembangan blog ini.