Membuat Read More Pada Blog Secara Otomatis

Posted by

Tutorial ini ditujukan kepada kawan-kawan yang masih menggunakan template bawaan blogger. Bila sudah menggunakan template dinamis, ini diabaikan saja yah. Kelebihan menggunakan template bawaan blogger adalah kita tidak hutang budi sama penyedia template blog gratisan sehingga menanamkan link/URL-nya di dalam blog kita.

Beginilah Cara Membuat Read More Pada Blog Secara Otomatis
1. Tentunya kawan-kawan harus membuka akun blog kawan sendiri.
2. Bila sudah masuk blogger (dasbor) pilihlan elemen Template lalu klik Edit HTML lalu klik Lanjutkan.(klik disini bila belum paham tampilan blog)
3. Centang Expand Template Widget (ada tanda kotak disamping tulisan itu)
4. Lalu carilah kode </head> (gunakan Ctrl + F, untuk mempercepat pencarian) lalu salin/copylah Kode di bawah ini  dan tempatkan pas diatas kode</head> tadi.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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(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>
5. Sudah ditempatkan kode di atas bukan. Selanjutnya cari kode <data:post.body/>  kemudian hapus kode <data:post.body/> tersebut dan gantikan kode scrip di bawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
6. Lalu simpan template blog anda kawan. 
Semoga bermanfaat
Sumber : bos-tutorial.blogspot.com


Blog, Updated at: 18.55

Update

    Sering Dibaca