Cara pasang Auto Read More Otomatis #Terbaru

All About Blogspot templates : Fungsi Read More tanpa hosting file .JS, memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya  kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:

Fungsi Read More Standar dengan pemenggalan artikel bawaan blogger

Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat menjawab pertanyaan zhoe_haemy pada artikel "Cara merubah ukuran, jenis font dan warna pada judul post" sehubungan dengan fitur readmore pada blognya tidak berfungsi.

Fungsi Read More berikut ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.

Tidak hanya itu, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page blog anda. Hebat bukan??? Yah.. anggap hebat lah....

   NOTE!!    Bagi anda yang sudah memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, jika sudah tinggal lanjutkan langkah-langkah berikut ini:

Pertama : silahkan langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.

<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</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 Berakhir -->

Kedua : Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :

<!-- Auto read more Mulai -->
<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 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'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->

Ketiga : Save Template!. Selesai.

Cara Memodifikasi Auto Read More.

• Thumbnail_mode : setting menjadi "yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen - temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
• Pada kode kedua, para Blogger juga Bisa merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan.

Demikian tutorial sederhana Cara pasang Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.