Cara Membuat Auto Read More

Bagi sobat yang masih awam dengan ngeblog pasti ada yang aneh dengan blognya. Pada kolom postingan blognya (biasanya halaman pertama/homepage) akan terlihat memanjang ke bawah entah sampai mana, dan tentunya hal ini kurang efisien untuk blog kita, dan imbasnya akan membuat pengunjung blog kita tidak nyaman dengan blog kita yang berantakan. Pada kesempatan kali ini Sunu melalui blog Ladang Tutorial akan memberikan panduan tentang membuat Auto Readmore di Blogger.com.
Cara membuat auto readmore ini sangat mudah, bahkan untuk sobat yang baru belajar ngeblog sekalipun :) Dengan menggunakan cara ini, postingan sobat pada homepage, label, arsip dan lainnya akan diringkas sesuai pengaturan sobat.
Jadi nantinya kolom postigan blog sobat Ladang Tutorial akan menjadi seperti ini nih

Berikut cara menginstall autoreadmore di blogger:
1. Login akun blogger sobat terlebih dahulu.
2. Klik Template dan pilih Edit HTML.
3. Tekan CTRL+F dan cari kode </head> di kolom pencarian yang sudah disediakan.
4. Lalu masukkan kode ini di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 60;
img_thumb_width = 100;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
********************************************/
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:0; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="http://4.bp.blogspot.com/--5Kdxy8Dld0/UR-GFSLxeAI/AAAAAAAABzo/sWIrDCLIKA0/s1600/nothumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="'+img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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. Bila sudah, cari kode <data:post.body/> lalu ganti dengan kode ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</b:if>
</b:if>

6. Klik Preview terlebih dahulu untuk memastikan apakah script sudah bekerja atau belum, karena terkadang terdapat lebih dari satu kode <data:post.body/>.

7. Bila sudah berhasil, langsung Klik Simpan :)

Sekarang kita atur readmorenya'
var thumbnail_mode = &quot;no-float&quot :
Untuk menampilkan thumbnail, ganti no-float dengan float untuk mengaktifkan thumbnail (float kiri).
summary_noimg = 200;
Menampilkan banyak karakter bila readmore tanpa gambar (settingan no-float).
summary_img = 200;
Menampilkan banyak karakter bila readmore menggunakan gambar.
img_thumb_height = 60;
img_thumb_width = 100;
Untuk mengatur Tinggi dan Lebar thumbnail dalam piksel.

Sekarang Readmore di blogmu sudah jadi, dan blog akan terkesan lebih rapi dan loadingpun tidak lambat.

Untuk teman-teman yang masih bingung, silakan berkomentar, nanti akan saya bantu :)

Subscribe to receive free email updates:

17 Responses to "Cara Membuat Auto Read More"

  1. gak bisa gan :(
    Visit my blog juga gan www.corgathagea.blogspot.com

    ReplyDelete
  2. Mas Cornelius, disitu nya ada 3 (kasus pada blog saya) nah ke3 code itu semua diganti dengan code diatas no. 5. Saya juga udah coba berkali-kali dan hasilnya ga bisa, eh ternyata disitu masalahnya.

    ReplyDelete
  3. awalnya gk jalan, tp setelah ganti yg ke 3 akhirnya "sempurna".
    thanks bgt gan, sangat membantu.
    check this out ondroids.blogspot.com

    ReplyDelete
  4. mas, saya kok ga nemu kode ya? trus gimana nih?

    ReplyDelete
  5. kodenya yang data post body itu, saya cari ga ketemu2 di HTML:

    ReplyDelete
    Replies
    1. biasanya tiap template itu beda, tapi kalo kode post body kayaknya (pasti) ada..

      Delete
    2. klo emng gk ada, coba cari kode yg mirip gan.
      misal, pada pencarian gunakan keywords "data:post.body/>" daripada "".
      semoga membantu.

      Delete
  6. MANTAP BOOOOOOSSSSSS ... TENG KYU !!!

    ReplyDelete
  7. Assalamu'alaikum mas, izin tanya
    saya sudah ikuti tutorial di atas tapi hasilnya malah "Normal 0 false false false IN X-NONE X-NONE ." di preview blog saya.. kalo kayya begitu gimana mas? minta solusinya.
    wassalamu'alaikum

    ReplyDelete
    Replies
    1. coba diulangi lagi mba.. mungkin mba salah di penempatan kodenya. soalnya gak cuma satu..
      solusi dari saya mungkin coba satu per satu. sampai jadi.

      Delete
  8. kalau readmorenya gak keluar gimana ya solusinya? gak nemu post body

    ReplyDelete
  9. Trims. Berhasil. di blog saya. http://mestiqui.com

    Melacak NO hp

    ReplyDelete
  10. mau tanya biar auto read more textnya rata tengah ( align: justify ) gimana y?

    ReplyDelete
  11. setelah nyari di beberapa blog,, ternayata cuma disini yg paling tepat.. makasih om posting nya sangat bermanfaat..
    semoga tambah sukses..

    ReplyDelete

- Mohon untuk berkomentar yang baik dan sopan.
- Dilarang berkomentar SPAM dengan cara menuliskan alamat link.
- Terimakasih telah membantu kemajuan blog ini dengan berbagai pertanyaan kalian.