Cara membuat read more otomatis dan thumbnail pada blogger

Langkah-langkahnya seperti berikut :

1. Pertama setelah masuk pada Dashboard akun Blogger kemudian akses menu Rancangan >> Edit HTML.
2. Kedua jangan lupa centang opsi Expand Template Widget agar seluruh kode HTML yang ada pada template blog kita muncul, sehingga akan mempermudah kita saat mencari kode HTML yang kita tuju dan dinginkan.
3. Ketiga cari tag </head> dan simpanlah kode di bawah ini diatas kode </head>.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 180;

img_thumb_width = 200;

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

     4.  Keempat carilah kode <data:post.body/> lalu gantilah kode tersebut dengan kode dibawah 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 Selanjutnya "<data:post.title/>"</a></span>

</b:if>

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

Setelah itu Save Template, bila semua langkah telah dilakukan maka sampai sini seharusnya berhasil.

*Catatan

untuk kode ini kita dapat merubah tergantung keinginan kita

• summary_noimg = 430; adalah potongan atau ringkasan artikel postingan tanpa gambar/thumbnail
• summary_img = 340; adalah  potongan ringkasan artikel postingan dengan gambar/thumbnail
• img_thumb_height = 180; adalah ukuran tinggi dari gambar/thumbnail
• img_thumb_width = 200; adalah ukuran lebar dari gambar/thumbnail

Kurang jelas bisa di tanyakan di komentar di bawah !