Cara Membuat Read More/ Baca Selengkapnya Otomatis di Blog Dengan mudah

Udah seminggu nggak  ngepost rasanya hambar ya. Oke ! Sebelumnya saya telah mengshare beberapa trik mempercantik tampilan Blog, kali ini saya akan mengshare Cara membuat read more otomatis di blogspot sangat mudah. Sebelum kita ke TKP lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot .

Berikut Langkah-langkah membuat Read More / Baca Selengkapnya pada Blog :

• Login Ke Blogger.
• Klik Template, Backup template untuk jaga2 bila diperlukan, atau langkah berikut bisa di uji coba       menggunakan Blog percobaan yang lain.
• Klik Edit HTML.
• Klik Kiri 1 x Dimana saja dalam kotak template.
• Cari kode </head> , tetapi saya sarankan anda menggunakan  Ctrl+F (Supaya mempercepat pencarian kode) , Setelah itu Masukan kode </head> tersebut kedalam kotak pencarian, kemudian enter untuk  mencari. Setelah dapat kode </head> masukan kode dibawah ini diatas 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:#38761d;  text-decoration:none;font:bold 13px Arial;padding:5px;}

.read-more a:hover{text-decoration:none;background:#274e13;}

.pic{border: 10px solid #fff;float:left;height:155px;width:155px;margin-right: 10px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}

.grow img{height:135px;width:135px;transition: all 1s ease;}

.grow img:hover{width:135px;height:135px;}

</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 = 155;

img_thumb_width = 155;

</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-->

• Kemudian Cari Kode <data:post.body/> Kode tersebut diatas jumlahnya biasanya ada 2, biasanya yang kedua (ke-2) cari dengan menekan enter 2x pada kotak pencarian.
• 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 -->