MEMBUAT RINGKASAN READ MORE PADA BLOGSPOT

Dengan fungsi ini, setiap entri posting di blog anda akan diringkaskan dan di set dalam read more. Image yang ada pada setiap entri akan disetkan kepada ukuran yang lebih kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan memudahkan secara auto jumlah teks yang akan dipaparkan pada satu entri.

Untuk mencoba fungsi auto read more ini, silahkan ikut beberapa langkah di bawah:

P/S: Sebelum itu, silahkan backup template anda terlebih dahulu sebagai langkah berjaga-jaga.

1) Sign in akun blogger anda

2) Dashboard > Design > Edit HTML > klik kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F , cari kode:  

</head>

4) Copy kode di bawah dan pastekan sebelum/di atas kode </head>yang anda cari dalam langkah 3 tadi

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</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) Sekali lagi, dengan menggunakan ctrl + F , cari kode di bawah kode:

<data:post.body/>

6) Copy kode di bawah dan gantikan pada kode <data:post.body/>tadi

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLfehReN7VrovjhxyFKMVcUVqeNgVGpNrB2T-JM9dPOv1c7CKVFSzd3f0gv_KMStjZf8jgif4hiB7U2Ygmy9c-cbSkLGKkvBNGdz3U4xdssCC5M02bKcBLuzuqd3IsECqUIvpf7BI-J0/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Pada url yang diboldkan purple di atas, masukkan url button pilihan anda. Pilih button di sini


7) Akhir sekali klik preview, dan jika tidak error, klik save.

Selamat mencoba! :)