Cara Membuat Auto Readmore Blogspot

Pada postingan terdahulu Optimasi SEO Blogspot pernah membuat postingan Artikel Cara Menghilangkan Readmore Bawaan Blogspot, dari pada kita repot-repot setiap membuat postingan menggunakan jump break, lebih baik kita menggunakan widget ni.

Auto Readmore ini sudah kami coba dan berjalan dengan baik, dengan catatan harus benar dalam penerapannya.

Langkah-langkahnya:

1. Login ke akun Blogger.com
2. Masuk ke Dashboard > Template > Edit HTML.
3. Back up dulu template anda.
4. Copy-paste script dibawah ini dan letakkan tepat dibawah </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 100;
img_thumb_width = 100;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

Catatan : Rubah tulisan yang berwarna merah sesuai dengan ke inginan kita.

• summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
• summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar 
• img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan 
• img_thumb_width = 100; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.

5. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;'expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Readmore...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Silahkan ganti tulisan Readmore... dengan kata-kata yang kita inginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan alamat URL link gambar yang kita sukai. Selamat Mencoba.

Tweet