Cara Membuat Read More Otomatis di Blogger

3:21 AM in Blogger, Tutorial

Kali ini saya akan mencoba memposting Cara Membuat Read More Otomatis di Blogger, Read More berfungsi supaya pada halamat awal blog, artikel yang kita posting tidak dimuat semuanya. Dengan menggunakan Read More artikel akan otomatis dipotong, untuk membacanya lebih lengkap dengan meng klik Readmore. Dengan menggunakan Read More otomatis postingan akan tertata dan hanya ditampilkan cuplikan/sebagian isi postingan pada halaman utama blog. Cara membuatnya, silakan ikuti tutorial dibawah ini :

• Login ke blogger 
• Klik Rancangan kemudian Edit HTML
• Conteng di kotak Expand Widget Template
• Selanjutnya cari kode </head> , untuk memudahkan pencarian tekan CTRL+F
• Kemudian copy kode dibawah ini, dan pastekan tepat diatas kode  </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)

********************************************/
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>

• Kemudian cari kode ini <data:post.body/>  , ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Kalau sudah SIMPAN TEMPLATE
Semoga bermanfaat :)