Cara Membuat Read More otomatis di Blog

Kali ini saya akan memberikan bagaimana kita membuat read more di blog atau juga Baca Selanjutnya, dengan penambahan read moro di blog maka blog kita akan terlihat rapi, ini juga adalah salah satu cara membuat blog ramai. Baca selanjutnya akam membuat blog kita singkat . adapun tahapanya untuk membuat read more adalah sebagai berikut :

1.Login Ke Blogger.

2.Klik Template, Backup template untuk jaga2 bila diperlukan,

    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode),

Dan cari kode berikut </head>

Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode Yang berwarna merah dibawah ini diatas </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-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.

Jika ingin anda edit coba anda kembali ke bagian atas dan lihat kode yang berwarna biru nah disitu anda bisa sesuaikan dengan selera anda,

7. Kemudian Cari Kode <data:post.body/>

Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,

biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah 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>

      <div class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

</b:if>

</b:if>

<!-- Auto read more Akhir -->

Demikian lah pelajaran tentang Cara Membuat read More Otomatis diBlog jika anda kurang paham bisa langsung menulis nya di kolom komentar yang saya sediakan.