Cara Mudah Membuat Read More Otomatis di Blog

Kali ini saya akan memberikan tips tentang Cara Mudah Membuat Readmore Otomatis di Blog. Jadi pada setiap postingan baru pasti akan ditampilkan pada home dari blog kita. Tapi jika postingan itu terlalu panjang maka akan membuat penuh halaman utama karena hanya satu postingan, dan itu sangat tidak efisien Maka sebaiknya kita hanya menampilkan abstraksi atau pembuka dari postingan tersebut. 

Bagi yang belum tau apa itu Readmore? Readmore adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya dengan kata READMORE, LANJUTKAN MEMBACA, BACA SELENGKAPNYA

Langsung saja tanpa basa basi kita praktekkan :

• Silahkan buka Blogger Anda dengan mengetikkan www.Blogger.com
• Kemudian pilih Template > Edit HTML
• Menekan tombol CTRL+F untuk mencari Kode </head>
• Copy dan Pastekan Kode tersebut di atas </head> 

<!--ReadMore http://Blog-tentang-komputer.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-->

• Kemudian Save Template anda
• Lalu cari kode 'Posting Blog' seperti berikut :

 

• Jika sudah menemukan kode seperti gambar di atas, silahkan klik arah panah kecil warna hitam sebelah kiri.Maka hasilnya seperti ini :

• Kemudian cari kode "post var='post" 
• Lalu klik tanda panah hitam yang berada di sebelah kiri.
• Selanjutnya maka akan terbuka kode yang lain.
• Scroll kebawah dan cari kode

<data:post.body/>

• Setelah ketemu hapus kode tersebut dan ganti dengan kode berikut :

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

• Klik Simpan Temlate anda, dan lihat hasilnya