Cara pasang auto readmore di blog

Selamat pagi kawan blogger, akhir-akhir ini seperti menemukan semangat lagi untuk sekedar membuat postingan mengenai tutorial blogspot, sekedar untuk menjawab pertanyaan teman-teman mengenai bagaimana mengubah ini dan itu pada laman blogspot.

Langsung saja kali ini saya akan share mengenai bagaimana cara memasang fitur auto readmore pada template blogspot anda yang template nya kebetulan tidak memiliki fitur Readmore.

Langusng saja pertama-tama silahkan langsung ke halaman EDIT HTML anda dan cari kode </head> kemudian letakan script dibawah ini di atas kode </head> tersebut. Bila sudah, jangan lupa di simpan terlebih dahulu.

copy kode di bawah ini :

<script type="text/javascript">  

  

var thumbnail_mode = "float" ;  

summary_noimg = 250;  

summary_img = 250;  

img_thumb_height = 120;  

img_thumb_width = 120;  

  

</script>  

<script type="text/javascript">  

  

//<![CDATA[  

/****************************************** 

Auto-readmore link script, version 2.0 (for blogspot) 

(C)2008 by Anhvo 

visit http://en.vietwebguide.com to get more cool hacks 

********************************************/  

function removeHtmlTag(strx,chop){  

if(strx.indexOf("<")!=-1)  

{  

var s = strx.split("<");  

for(var i=0;i<s.length;i++){  

if(s[i].indexOf(">")!=-1){  

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);  

}  

}  

strx = s.join("");  

}  

chop = (chop < strx.length-1) ? chop : strx.length-2;  

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;  

strx = strx.substring(0,chop-1);  

return strx+'...';  

}  

  

function createSummaryAndThumb(pID){  

var div = document.getElementById(pID);  

var imgtag = "";  

var img = div.getElementsByTagName("img");  

var summ = summary_noimg;  

if(img.length>=1) {  

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';  

summ = summary_img;  

}  

  

var summary = imgtag + '<div>  

  

' + removeHtmlTag(div.innerHTML,summ) + '</div>  

';  

div.innerHTML = summary;  

}  

//]]>  

  

</script>  

Masih berlanjut pada pada halaman EDIT HTML, Beri tanda centang terlebih dahulu pada "Expand widget template" lalu temukan kode seperti ini <data:post.body/> (tips: gunakan ctrl+f untuk pencarian tag-tag tertentu agar memudahkan)

Apabila sudah, hapus kode <data:post.body/> tadi dan ganti dengan kode di bawah ini.

<b:if cond="data:blog.pageType != "item"">  

<div expr:id=""summary" + data:post.id">  

<data:post.body></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" href="http://www.blogger.com/blogger.g?blogID=2408199066501952979">READ MORE - <data:post.title></data:post.title></a></span></b:if>  

<b:if cond="data:blog.pageType == "item""><data:post.body></data:post.body></b:if>

Silahkan di simpan dan anda sudah berhasil memasang feature auto readmore pada blogspot anda.

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba, dan semoga tutorial ini bermanfaat untuk kawan-kawan blogger sekalian. wassalam.