Cara Membuat Auto Read More Otomatis

Kawan bertemu lagi kita pada postingan ini, kali ini saya akan menjelaskan bagaimana cara membuat auto read more otomatis. Sebagaimana yang saya tahu bahwa ketika saya ingin membuat blog menjadi simple atau tidak ingin blog terlihat dengan tulisan yang begitu panjang, saya mencari cara membuat auto read more otomatis di search engine.

Butuh beberapa menit untuk mempelajari bagaimana cara auto read more otomatis. Tidak perlu lama lama langsung saja ini tutorialnya.

FEATURE

• Auto read more
• Secara otomatis

TUTORIAL

• masuk ke www.blogger.com, lalu pilih rancangan
• halaman EDIT HTML 
• Cari kode</head>kemudian letakan script dibawah ini di atas kode </head> Kalau sudah, jangan lupa di simpan terlebih dahulu.

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script><br /> <br /> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ 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>

• Jika sudah lalu save.
• Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode <data:post.body/>
• Kalau sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

  

<b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br />

• Jika sudah lalu save kode di atas, lalu selesai. Dengan ini berakhir sudah tutorial cara membuat auto read more otomatis.

Keterangan:

• var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
• 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)

Thanks to o-om