Membuat Read More Otomatis Tanpa Mempengaruhi Struktur Laman

Sahabat masih Ingin Belajar yang ingin merapihkan atau meminimalis tampilan postingan nya kini kita akan membahasa cara Membuat Read More Otomatis Tanpa Mempengaruhi Struktur Laman yang biasanya saya temukan di berbagai artikel orang lain itu setiap hasil read more nya itu selalu berpengaruh terhadap laman atau jika di laman read more nya tidak terbuka atau tidak berjalan perintah scriptnya, atau mungkin saya yang kurang teliti dalam hal melakukan langkah-langkahnya,,, hee hee maklum saya juga masi pemula.. ok langsung aja ya ke langkah-langkahnya ;
1. Login Ke Blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Download template lengkap untuk jaga-jaga bila mana terjadi kesalahan
6. Cari kode </head> dengan bantuan Ctrl + F atau F3
7. Letakan Script Read More di bawah kode </head>


<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 345; 
summary_img = 345; 
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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>

Keterangan:

summary_noimg = 345;  adalah jumlah ringkasan tulisan jika tidak ada gambarnya

summary_img = 345;  adalah jumlah ringkasan tulisan jika ada gambarnya

img_thumb_height = 120; adalah tinggi gambar

img_thumb_width = 120; adalah lebar gambar

8. Temukan kode <data:post.body/> kemudian ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<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'>Baca Selengkapnya &gt;&gt;</a>
</b:if>
</b:if>

9. Simpan dan lihat tampilannya,