Cara Membuat Read More Otomatis di Blogger

Pada halaman awal (home page) yang berisi beberapa artikel mungkin akan sangat panjang untuk ditampilkan. Belum lagi pada setiap artikel tersebut membuat banyak gambar sehingga akan memakan waktu loading halaman yang cukup lama. Oleh karena itu fungsi Read More atau baca selengkapnya sangat dibutuhkan untuk meringkas artikel-artikel pada halaman awal. Ada dua cara dalam pembuatan Read More yaitu cara manual dan Otomatis. Pada posting kali ini Kak Hady akan membagikan cara yang otomatis. Berikut adalah langkah-langkahnya.

1. Login ke Blogger akun anda
2. Pada dasbor blog anda silahkan pilih Template
3. Klik Edit HTML
4. Cari Kode </head>
5. Copy paste kode dibawah ini tepat di atas kode </head>
   <!--Auto Read More Awal-->
   
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post-body{text-align:justify;}
   .post-body img{max-width:none;width:auto;}
   .read-more{float:left; padding-top: 10px;}
   .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
   .read-more a:hover{text-decoration:none;background:#666;}
   .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
   .grow img{height:165px;width:250px;transition: all 2s ease;}
   .grow img:hover{width:400px;height:250px;}
   </style>
   <script type='text/javascript'>
   var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
   summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
   summary_img = 250; //banyaknya huruf jika ada gambar
   img_thumb_height = 165;
   img_thumb_width = 250;
   </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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
   //]]></script>
   </b:if>
   </b:if>
   
   <!--Auto Read More Akhir-->
6. Scroll ke bawah dan cari kode <data:post.body/> yang terakhir
7. Setelah ketemu hapus kode <data:post.body/> dan ganti dengan kode di bawah ini:

   <!--Auto read more Awal-->
   <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>
   <div class='read-more'>
   <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
   </div>
   </b:if>
   </b:if>
   <!--Auto read more Akhir-->

8. Simpan Template dan lihat hasilnya.