Cara memasang auto read more pada setiap postingan

Berbagi ilmu atau sharing adalah hobby saya, silahkan tinggal kan komentar ataupun kesan serta pesan anda lewat kolom post di bawah.

      Mungkin ada sebagian template yang sudah di pasang read more otomatis, tetapi bagaimana dengan yang belum di pasang ? kemungkinan blog tersebut hanya memakai " insert jump break " pada setiap postingan nya, dan hal itu membuat kita lelah karena harus menggunakan hal tersebut pada setiap postingan. Tetapi tenang saja, saya mempunyai script yang berguna untuk mempermudah kita dalam membatasi artikel yang akan tampil dan memberikan read more otomatis pada setiap postingan.

1. Buka layout Kemudian pilih edit html
2. Jangan lupa beri centang pada " expand widget template"
   
3. Temukan kode </head> Kemudian letakkan script di bawah ini persis diatasnya </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
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>

Jangan disimpan dulu, Kemudian temukan kode <data:post.body/> setelah ketemu hapus dan ganti 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:right;padding-top:20px;'><a expr:href='data:post.url'> Baca Selengkapnya "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kemudian simpan,  Lihat pada script pertama bagian atas ,
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;

 Anda bisa merubah itu sesuai dengan keinginan hati anda.

Setelah itu silahkan anda bereksperimen tentang ukuran dan yang lain lain. Sekian tutorial dari saya.

Hormat Kami,

www.tutorialbloggingindonesia.blogspot.com