Cara Lengkap Membuat Read More Otomatis di Blogspot

Read More dapat diartikan baca selanjutnya atau selengkapnya atau berikutnya, yang tentunya berfungsi untuk menyekat atau memotong postingan agar tidak tampil semuanya di halaman depan atau beranda. Untuk menggunakan readmore, anda bisa melakukannya secara manual atau bisa secara otomatis, dan tentu saja kita ingin yang otomatis karena lebih praktis. Sebenarnya kita tidak perlu susah-susah membuat Read More Otomatis atau auto read more di blogspot karena ketika anda menggunakan template yang sudah anda download di beberapa situs penyedia template blogspot, kebanyakan sudah terpasang auto readmore. Namun bagi anda yang masih setia dengan template bawaan blogspot atau bagi anda yang ingin menambah wawasan dan pengetahuan, simak tutorial lengkap cara membuat auto readmore di blogspot berikut ini:

1. Seperti biasa masuk ke Template > Edit HTML, kemudian centang Expand Template Widget.
2. Untuk mengantisipasi adanya kekeliruan atau hasilnya kurang memuaskan, lakukan back up template dulu.
3. Untuk memudahkan pencarian kode html, tekan Ctrl+F. Dan selanjutanya berikut ini cara membuat readmore otomatis di blog.

Cara I
1. Cari kode </head>
2. Kemudian copy paste kode di bawah ini sebelum kode tersebut.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img =300;
img_thumb_height = 110;
img_thumb_width = 130;
</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(img.length>=1) {
imgtag = '<span style="float:left; padding:0;margin:0 10px 0 0"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</b:if>


3. Lalu cari dan hapus kode di antara <div class='post-header-line-1'/></div> hingga <b:if cond='data:post.hasJumpLink'>

4. Ganti dengan kode di bawah


 <div class='post-body entry-content'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'>Readmore &#8594;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

5. Simpan Template.