Cara Membuat Read More Blog Bergambar

Kali ini saya akan berbagi dan sudah saya pelajari cara membuat "Read More" bergambar untuk artikel pada Blog, Tentunya fungsi "read more" ini bagi kalangan blogger sudah tidak asing lagi karerna merupakan panduan standar dalam membuat artikel. 

Daripada saya simpan di notepad dan nanti tanpa sengaja terhapus, maka sebaiknya saya simpan dalam bentuk artikel di blog saya ini , sehingga manfaatnya bukan hanya untuk saya tetapi untuk banyak orang terutama para blogger nubi tentunya. Trik ini saya dapatkan dari Blog Triks , lumayan disana banyak panduan-panduan tentang blog. 

Baiklah tidak perlu banyak basa basi, berikut ini panduannya :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Beri tanda cheklist (centang) pada kotak "expand widget template"
3. Cari kode berikut di Template blog kamu (gunakan CTRL+F untuk mencari kodenya) :
<p><data:post.body/></p>

4. Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".
5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
 <span class="fullpost">

</span>
 8. Lalu Simpan.
 9. Ketika membuat artikel disana ada 2 tab pilihan, yang "Compose" dan "Edit Html", Pilih yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :
<span class="fullpost">


</span>
 10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini :  
<span class="fullpost">
sementara sisanya yaitu keseluruhan posting letakkan di antara kode  :
<span class="fullpost"> dan </span>

Nah itu cara membuat "Read More... " standart Selanjutnya untuk membuat "Read More" bergambar
1. Dihalaman Edit HTML, ganti tulisan Read More atau lainya yang sobat pake buat link "baca selanjutnya" dengan kode berikut :
 <img src="link gambar kamu"/>
 
2.Langkah terakhir dan terpenting adalah Save Template

Berikuit ini contoh-contoh gambar "read more..."

 

http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif

http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif

http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif

http://i496.photobucket.com/albums/rr329/grandisyf/Read-more-3_grandis.gif

http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif 

Demikian panduan singkat tentang cara membuat "Read More" bergambar untuk artikel pada Blog.

Semoga bermanfaat... :)