Cara Membuat "Read More" Otomatis Di Blog

Panduan blogger untuk blogger pemula.Panduan blogger yang akan membahas,membantu serta menjelaskan kepada sobat blogger semua tentang " Panduan Cara Membuat "Read More" Otomatis Di Blog ".Fungsi Read More pada sebuah blog adalah penting.Biasanya para blogger memakainya untuk tujuan supaya blognya keliatan lebih rapih dan agar tidak tampak melorot kebawah.Dalam kegunaanya,Read More banyak dicari para blogger.Sebenarnya pemasangan Read More bisa juga dipasang secara manual jika kita memposting sebuah artikel.Namun dalam panduan kali ini,akoe akan membantu sobat blogger dalam memasang "Read More" secara otomatis.

Berikut ini adalah langkah-langkah yang bisa sobat tempuh,caranya adalah :

• Login ke blogger
• Klik Rancangan
• Edit HTML
• Centang kotak kecil "Expand widget template"
• Kemudian cari kode </head>
• Kalau sudah ketemu pastekan kode di bawah ini di atas kode tersebut 

<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 <data:post.body/>
• Kalau sudah ketemu ganti kode <data:post.body/> tersebut dengan kode di bawah 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> 

• Simpan Template
• Selesai...

Catatan:

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)

Sumber : http://tjoretan-akoe.blogspot.com/2012/07/panduan-cara-membuat-read-more-otomatis.html