Cara membuat auto read more di blogger

Cara membuat auto read more di blogger

by Toke Zone ~ Jumat, 23 Maret 2012

Cara membuat auto read more di blogger - Semua informasi yang ada di sini merupakan, tutorial/panduan yang pernah saya gunakan. Kali ini saya akan memberikan tutorial terbaru untuk blog yang tidak bisa secara otomatis memenggal kata saat di Homepage bukan setiap posting. Maksud saya adalah membuat Auto read more pada blog, Read more otomatis. Merupakan artikel dari O-om.com.

Hebatnya ini read more mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan.

Untuk penjelasan sudah tahu sekarang tinggal di praktekkan saja, oke akan saya mulai dengan cara step by step agar memudahkan anda untuk melakukan bercobaan, sebelumnya harap Backup dulu tempalte anda.

1. Login blogger
2. Menuju rancangan, klik submenu Edit HTML (centang Expand widget tempalte)

Oh iy saya hampir lupa, Saya sarankan untuk yang memiliki read more sebelumnya, apabila ingin mencoba tutorial ini harap di hapus kode read more sebelumnya.

3. Masukkan kode di bawah ini, sesudah 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)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

4. Setelah itu masukkan kode di bawah ini dengan mengganti kode  <data:post.body/>

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

5. Simpan template,

Lihat hasilnya, maka blog anda akan terlihat lebih rapi. Dan pengunjung bisa melihat posting dengan cara harus menuju ke link posting dan pengunjung bisa berkomentar.