» » Membuat Auto Readmore

Membuat Auto Readmore


Hari ini saya ingin berbagi kepada sobat blogger yaitu membuat auto readmore pada blog. Read more adalah penggalan atau potongan konten/artikel , biasanya hanya pada paragraf pertama dari keseluruhan artikel. Jadi yang tampak pada tampilan home blog adalah hanya ringkasan artikel tersebut. Sebenarnya membuat redmore bisa sobat lakukan dengan memotong artikel sobat pada postingan sobat. Namun, hal ini agak kurang menarik dan cukup ribet. Oleh karena itu saya share Tutorial Membuat auto readmore di blog untuk memudahkan sobat dalam memotong artikel tanpa harus memotong artikel tersebut secara manual. Berikut langkah - langkah memasangnya :

Ini langkah untuk tampilan blogger versi terbaru :
  • Hal yang pertama sobat harus lakukan ya tentunya harus login dulu ke blogger.com
  • Kedua ke Menu Template
  • Terlebih dahulu backup dulu template sobat dengan cara Cadangkan/Pulihkan
  • Setelah itu Edit HTML → Lanjutkan
  • Jangan lupa centang Expand Template Widget 
  • Kemudian cari kode </head> ( gunakan tombol F3 untuk memudahkan pencarian )
  • Kemudian letakkan script dibawah ini diatas kode </head>
 Dan ini langkah untuk tampilan blogger versi lawas :
  • Hal yang pertama sobat harus lakukan ya tentunya harus login dulu ke blogger.com
  • Kedua ke Menu Design/Rancangan → Edit HTML
  • Terlebih dahulu backup dulu template sobat dengan cara Download Full Template/Download Template Lengkap
  • Setelah itu jangan lupa centang Expand Template Widget 
  • Kemudian cari kode </head> ( gunakan tombol F3 untuk memudahkan pencarian )
  • Kemudian letakkan script dibawah ini diatas 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[
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>



  • Kemudian cari kode <data:post.body/> dan ganti kode <data:post.body/> 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:left'><a expr:href='data:post.url'>Readmore » <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


  • Langkah terakhir Save 
 Keterangan :
  • summary_noimg = 250 ; ( Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail )
  • summary_img = 250 ; ( Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail )
  • img_thumb_height =120 ; ( Thumbnail 'tinggi dalam piksel )
  • img_thumb_width = 120 ; (Thumbnail 'lebar dalam piksel )
  • Sobat juga bisa mengganti tulisan Readmore misalnya dengan Baca selengkapnya atau dengan kata lain sesuai yang sobat inginkan.
Selamat mencoba

0 Komentar untuk "Membuat Auto Readmore"