Membuat “Read More…” atau “Baca Selengkapnya..” revisi

Membuat read more di blogspot yang manual dengan menambahkan kode  <!–more–> itu masih kurang keren alias kurang gaul, nah biar readmore otomatis berjalan tida usah menambahkan kode <!–more–> dalam setiap postingan. Kita bisa gunakan read more otomatis. berikut langkah-langkahnya:
1. Login ke blogger
2. Click Design
3. Click Edit HTML
4. Click Expand Widget Templates
5. Cari kode </head>
6. Copy kode di bawah ini dan simpan di atas </head>
<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
visit http://anakciremai.com to get more trick blogger
********************************************/
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>
7. Cari Kode <data:post.body/>
8. Ganti <data:post.body/> dengan kode di bawah ini.
<!– Auto read more Start –>
<!– http://www.anakciremai.biz –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/>
<style>.fullpost{display:inline;}</style>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<data:post.body/>
<b:else/>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
</b:if>
</b:if>
<!– Auto read more End –>
9. Save Template
Dari tadi ngomongin readmore, yang belum tahu read more seperti ini contohnya:

Readmore itu berfungsi untu memotong tulisan yang panjang menjadi beberapa kata saja. jadi saat kita klik misalnya contoh di atas read more cara membuat breadcumb navigator di blogspot, maka tulisan lengkap akan muncul. begitulah kira-kira. yang kurang paham comment ya kang.