Membuat read more Secara Otomatis

Sobat timbol, Jika kita menggunakan template yang di download dari sebagian besar master bloger biasanya fasilitas read more otomatis sudah terpasang, dan kita sudah tidak perlu lagi repot - repot untuk membuatnya. namun bagi sobat yang mempunyai blog yang belum terpasang read more, dan ingin membuatnya sendiri dengan maksud agar tampilan blog lebih rapih dan bisa menampilkan beberapa postingan di halaman utama, maka ada baiknya jika Sobat meneruskan untuk membaca postingan ini.

Pada kesempatan kali ini timbol akan kembali berbagi tips/trik, untuk kesempatan ini timbol media akan berbagi tentang cara untuk membuat read more secara otomatis pada setiap postingan dengan memasang kode script di template blog kita, berikut ini langkah-langkah untuk membuatnya:

1. Tentu saja sobat harus Login ke akun blogger Sobat.
2. Pilih menu Tamplate, kemudian jangan lupa membackup template untuk menghindari resiko kegagalan dan rusaknya template blog Sobat.
3. Pilih "Edit HTML" dan jangan lupa centang tanda "Expand template widget"
4. Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3 atau Ctrl+F
5. Copy dan Paste Code berikut ini sebelum atau diatas kode </head>
   

   
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>

6. Langkah berikutnya Cari kode <data:post.body/>
   Ganti kode <data:post.body/>  dengan kode di berikut ini :

   
   

   <b:if cond='data:blog.pageType != &quot;item&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>

   <span class='rmlink' style='float:right;padding-top:20px;'>

   <a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

   </b:if>

   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

   </b:if>

7.  Simpan Template kemudian lihat hasilnya..

Demikian untuk sementara yang dapat timbol bagi mengenai cara membuat read more secara otomatis.

SELAMAT MENCOBA..!!!