Cara Membuat Read More/Baca Selanjutnya di Post Secara Otomatis dan Manual

     Read More atau Baca selanjutnya berguna agar postingan di blog kita terlihat lebih rapi dan menarik tidak memanjang ke bawah sehingga membuat postingan sebelumnya menjadi tidak terlihat.
      Sebenarnya banyak blog yg membahas tentang ini dan bermacam kode untuk membuat read more atau baca selanjutnya ini, dan di sini akan saya berikan 2 cara membuatnya yaitu dengan cara otomatis dan manual.
      Pada cara yang pertama ini kita mulai dengan cara otomatis agar kita tidak perlu repot saat ingin memposting suatu artikel yang akan kita bagikan, Dan mungkin cara yang pertama ini sedikit kelihatan ribet tapi tidak apa-apa  sekalian belajar mengenai kode dan penempatanya.

*  Cara otomatis

         Pada cara yang pertama ini kita mulai dengan seperti biasa DASBOR > TEMPLATE > EDIT HTML lalu Copy paste kode dibawah ini tepat di atas kode </head> ;

<!--Auto Read More Mulai-->

<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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;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 = 280;
</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-->

NB; Warna Biru untuk mengatur banyaknya kutipan dari artikel.

      Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

  

       Setelah di copas kamu save/simpan template lalu cari kode <data:post.body/>  Kode tersebut jumlahnya biasanya ada 2, Cari yang versi web,Biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian atau klik seperti gambar di bawah

 biasanya kode tersebut tersembunyi dan ini contoh
#yang pertama

#yang kedua

      Bila sudah ketemu <data:post.body/> yang kedua hapus dan ganti dengan kode ini ;
 

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

NB;       Kalo kalian udah memakai template yg sudah otomatis read more/baca selanjutnya kemungkinan <data:post.body/> ada 3 dan kemungkinan script pertama juga beda, tapi tenang tinggal apus aja dan ganti dengan script pertama yang di atas.
            Lalu pada script ke dua juga berbeda dan kamu juga harus menghapusnya juga, Nah di sinilah ribetnya kalian harun memperkirakan dari mana dan sampai mana harus menghapusnya tapi tenang udah saya tandain dengan tanda warna merah pada script yang ke dua.

      Bila semua cara di atas telah di jalankan tinggal kita save template dan liat hasilnya. Nah itu tadi cara otomatis dan sekarang tinggal masuk ke cara manual.
      Saya merekomen menggunakan cara yang otomatis karena pada foto post ukuranya semua sama saat di tampilkan dan bila pada cara manual foto yang akan di tampilkan tidak sesusai dengan yang lain, Ada yang besar dan kecil.
      Sebaiknya coba cara manual lebih dahulu baru cara yang otomatis untuk melihat bedanya.


*   Cara Manual

      Pada cara manual berikut ini sangat simpel karna tidak perlu menggunakan kode dan edit template, kita hanya perlu menggunakan INSERT JUMP BREAK lalu save atau publish seperti contoh di bawah

      Bagaimana simpel bukan tapi ada kelemahanya seperti yang saya sebutkan di atas, Dan demikian dulu untuk post kali ini smoga bermanfaat untuk mbak,ayuk,kakak,uni dan mas,abang serta uda sekalian.
SALAM COPAS