Cara Membuat Read More dengan Image

Tutorial berikut ini bukanlah hal yang baru bagi para blogger senior, karena postingan ini berasal dari mereka, meskipun saya lupa dari mana asal usul sebenarnya dari kode-kode HTML yang akan disajikan sehingga sumbernya tidak bisa dituliskan.

Sekilas "read more" adalah link yang memutus postingan menjadi sebuah ringkasan dan jika di klik maka kita akan menuju ke postingan secara lengkap.

Untuk membuat "read more" ikuti langkah-langkah berikut

• Silahkan menuju ke halaman blogger anda
• Pilih "template" dan "edit HTML"
• Pilih/Klik "Lanjutkan"
• Centang " Expand Template Widget"
• Tekan Ctrl F untuk mencari kode </head> lalu pasang tepat diatasnya kode HTML berikut ini :

<b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 280; summary_img = 250; img_thumb_height = 70; img_thumb_width = 100; </script><br /> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div> "+removeHtmlTag(f.innerHTML,e)+"</div> ";f.innerHTML=c}; //]]> </script><br /> </b:if><br /> </b:if>

• Tekan Ctrl F untuk mencari kode <data:post.body/> lalu ganti dengan kode HTML berikut ini :

<b:if cond='data:blog.pageType == "static_page"'><br /> <data:post.body/><br /> <b:else/><br /> <b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <span class='rmlink' style='float:left'><a expr:href='data:post.url'><img src="http://i.picasion.com/pic58/570223598e0f20cd757d47c77a681624.gif" width="50" height="50"/></a></span><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if><br />
Keterangan:

1. var thumbnail_mode = "float";  Bisa diganti dengan no-float meskipun perubahannya tidak tampak secara signifikan. 
2. summary_noimg = 250; Angka menunjukkan jumlah total karakter yang ditampilkan dari hasil ringkasan tiap postingan tanpa gambar
3. summary_img = 250; Angka menunjukkan jumlah total karakter yang ditampilkan dari hasil ringkasan tiap postingan dengan gambar/thumbnail
4. img_thumb_height = 120; Angka menunjukkan ukuran tinggi image/gambar/thumbnail dalam pixel
5. img_thumb_width = 120; Angka menunjukkan ukuran lebar image/gambar/thumbnail dalam pixel 

• Langkah selanjutnya adalah melihat hasilnya dengan meng-klik "pratinjau"
• Terakhir "Simpan Template" kemudian tutup

Semoga bermanfaat...