Mempercantik Halaman Dengan Membuat " Baca Selanjutnya" ("Read More") di Blog

 Mempercantik Halaman Dengan Membuat  " Baca Selanjutnya" ("Read More") di Blog– Keindahan tampilan penyajian halaman blog site's salah satunya dengan membuat " Baca Selanjutnya" ("Read More/Baca Selengkapnya"), yaitu memotong naskah di halaman naskah tidak ditampilkan secara keseluruhan dalam satu halaman dari suatu naskah yang panjang.  Sehingga satu halaman dapat memuat beberapa Judul/Kategori /Label. Dengan kata lain " Baca Selanjutnya" ("Read More") menyajikan penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat atau gambar saja .


Manfaat readmore, diantaranya untuk mempersingkat atau merapihkan artikel yang panjang, sehingga artikel atau naskah yang diposting  akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja. Dalam makalah ini mencoba berbagi penjelasan detail cara membuat readmore otomatis sebagai opini perbandingan bagi blogger dalam mempersiapkan/meningkatkan Blog Site's

1. Tahapan pembuatan  " Baca Selanjutnya" ("Read More") adalah sebagai berikut:
2. Buka halaman dashbord , pilih: TEMPLATE ,  EDIT. kemudian klik EDIT HTML
3. Cari Kode </head> dalam halaman HTML
4. Copy paste kode pada no 5  tepat di atas kode </head> dalam halaman HTML sebagai berikut:
5.  <!--ReadMore http://trikseosimple.blogspot.com-->
   
   <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. Save hasil template no 5, selanjutnya scrol diarah kan kebawah untuk mencari kode "BLOG POST" (POSTINGAN BLOG).
7. Bila kode  telah ditemukan, cursor diarahkan kekiri untuk mengklik tanda mata anak  panah berwarna hitam bila terdapat tanda anak panah untuk membuka baris kode HTML yang tersembunyi. Selanjutnya cari Kode <data:post body/>, dengan cara menggeser kursor.
8. Setelah menemukan kode <data:post body/>, selanjutnya kode <data:post body/> diganti dengan kode HTML  pada no 9 sebagai berikut:
9.  <!-- Auto read more Mulai -->
   <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 -->
10.  Setelah Mengcopy pastekan no 9 pada kode <data:post body/> maka hasil akhir tersebut di simpan ("save"). selesai maka pembuatan " Baca Selemgkapnya (Read More"

Perlu diperhatikan dan meng copy pastikan agar supaya kode HTML terrekam semuanya.Mudah-mudahan penjelasan uraian diatas bermanfaat, selamat mencoba

1.