0 Cara Membuat ReadMore Bergambar

Jika pada postingan sebelumnya saya hanya memberikan tips tentang cara membuat ReadMore biasa, sekarang saya akan memeberikan tips untuk menjadikan ReadMore menjadi bergambar supaya website kita terlihat lebih menarik lagi. Kalau begitu nggak usah banyak bacot lagi langsung aja kita pelajari cara membuat ReadMore bergambar.

1. Login ke blogger.com

2. Klik Layout/Tata Letak ---> Edit HTML

3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML

4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”

5. Cari kode seperti ini <p><data:post.body/></p>

6. Kemudian ganti kode tersebut dengan kode 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>

Catatan :

Jika pada postingan sebelumnya tulisan Read Morenya seperti tulisan yang berwarna merah. Tetapi pada postingan ini kita akan mengganti tulisan tersebut menjadi gambar. Caranya ganti kode “Read More” yang berwarna merah dengan kode ini Maka hasilnya kurang lebih akan jadi seperti ni :

<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'><IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a> </b:if>

7. Kemudian klik tombol simpan template

8. Langkah selanjutnya pilih Menu Settings ---> Formatting

9. Pada kotak “Post Template” masukkan kode seperti ini :

 <span class="fullpost">

</span>

10. Kalau udah selesai silahkan klik simpan

11. Langkah selanjutnya adalah cara memposting artikel. Pada saat memposting artikel ganti dulu dari menu Compose/Tulis ke Edit HTML

12. Maka akan muncul script seperti ini :

 <span class="fullpost">

</span>

13. Letakkan sebagian tulisan sebelum kode  ( sebagai posting pendek yang akan ditampilkan di menu utama ). Kemudian letakkan semua postingan sesudah kode <span class="fullpost"> dan sebelum kode </span>

14. Kalau masih belum jelas perhatikan contoh di bawah ini :

Assalamu� alaikum para penggendeng blogger yang telah menungguku selama beribu-ribu tahun. Pada postingan kali ini saya akan menjelaskan tentang cara membuat read more (baca selengkapnya) pada blog. Fungsinya agar postingan kita yang terlalu panjang menjadi lebih pendek dan enak untuk dilihat.

<span class="fullpost"&gt;Assalamu� alaikum para penggendeng blogger yang telah menungguku selama beribu-ribu tahun. Pada postingan kali ini saya akan menjelaskan tentang cara membuat read more (baca selengkapnya) pada blog. Fungsinya agar postingan kita yang terlalu panjang menjadi lebih pendek dan enak untuk dilihat. Oke jika anda berminat untuk membuatnya, silakan ikuti tips berikut ini :

1. Login ke blogger.com

2. Klik Layout/Tata Letak ---> Edit HTML

3. Klik tulisan Download Template Full untuk berjaga-jaga kalau ada kesalahan pengeditan

4. Beri tanda centang pada kotak di sebelah tulisan Expand Template Widget

5. Cari kode seperti ini <p><data:post.body/></p> biar cepat klik Ctrl+F

6. Kemudian ganti kode tersebut dengan kode ini :</span>