Cara Membuat Auto Readmore Dengan atau Tanpa Javascript di Blogspot

Cara Membuat Auto Readmore Dengan atau Tanpa Javascript di Blogspot - Readmore di blogspot berfungsi untuk memotong atau meringkas artikel pada halaman depan. Blogger sebenarnya sudah menyediakan fitur readmore, tetapi tidak otomatis.

Ada 2 cara untuk membuat auto readmore di homepage blog, yaitu dengan menggunakan javascript dan tanpa javascript. Setiap cara mempunyai kelebihan dan kekurangan masing-masing.
- Jika menggunakan javascript, sobat bisa mengatur ukuran thumbnail dan jumlah karakter huruf yang ingin ditampilkan. Tetapi, akan mengganggu loading blog sobat atau dengan kata lain akan membuat loading blog sedikit lebih berat.
- Tanpa javascript. Versi ini lebih ringan jika dibandingkan dengan menggunakan js, halaman akan menjadi lebih cepat termuat dan kecepatan blog sobat tidak akan terganggu. Akan tetapi, sobat tidak bisa mengatur ukuran thumbnail dan panjang pendek ringkasan di homepage.

Baca juga vroh : Cara Membuat Dynamic Tag Heading untuk Optimasi SEO On Page

Auto Readmore dengan Thumbnail Tanpa Javascript

1. Pertama login dulu ke akun blogger sobat.
2. Masuk Dashbord => Template => Edit HTML.
3. Copy kode css berikut diatas ]]></b:skin> atau </style> :

   .post-thumbnail {margin: 3px 8px 0 0;float: left;width: 80px;height: 80px;display: inline;}

4. Kemudian cari kode <data:post.body/>, ganti dengan

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
       <b:if cond='data:post.thumbnailUrl'>
         <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
       <b:else/>
         <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/></a>
       </b:if>
       <div class='post-snippet'>
         <data:post.snippet/>
       </div>
       <div class='rm-button-wrap'>
         <a class='button' expr:href='data:post.url'>Read More &#187;</a>
       </div>
     </b:if>
   </b:if>
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <data:post.body/>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
   </b:if>

   Biasanya ada lebih dari dua kode <data:post.body/>. Silahkan sobat pilih kode yang kedua, jika tidak coba pilih yang selanjutnya. Jika masih tidak bisa coba satu-satu hingga berhasil.
5. Klik Pratinjau template untuk melihat hasil sementara. Jika sudah sesuai klik Simpan template.

Membuat Auto Readmore di Blog Dengan Javascript

1. Pertama login dulu ke akun blogger sobat.
2. Masuk Dashbord => Template => Edit HTML.
3. Copy kode javasript berikut diatas </head> :

   <script type='text/javascript'>
   posts_no_thumb_sum = 490;
   posts_thumb_sum = 400;
   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 = posts_no_thumb_sum;
   if(img.length>=1) {
   imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = posts_thumb_sum;
   }
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>

4. Kemudian cari kode <data:post.body/>, ganti dengan

   <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>
   <span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

5. Klik Simpan template.

Membuat Garis Putus-Putus Antar Artikel

Untuk menambahkan garis putus-putus antar artikel, tambahkan kode berikut di atas </head> :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post{margin:0;padding:0 0 5px;border:none}
.post h1,.post h2{margin: 0.4em 0 0;padding: 0 0 4px;font-size: 15px;font-weight: 700;}
.post-body{border-bottom:1px dotted #ccc;font:12px Arial;border-top:none;padding-top:0px;background:none;line-height:1.5em;margin:0;padding-bottom:10px;text-align:left;color:#444}
</style>
</b:if></b:if>

Simpan template, lalu lihat hasilnya :)

^^Semoga Berhasil^^

Credit to :

http://www.dte.web.id/
http://contohblognih.blogspot.com/