Cara Lengkap Menciptakan Read More Otomatis Di Blogspot

Read More sanggup diartikan baca selanjutnya atau selengkapnya atau berikutnya, yang tentunya berfungsi untuk menyekat atau memotong postingan biar tidak tampil semuanya di halaman depan atau beranda. Untuk memakai readmore, anda sanggup melakukannya secara manual atau sanggup secara otomatis, dan tentu saja kita ingin yang otomatis alasannya ialah lebih praktis. Sebenarnya kita tidak perlu susah-susah menciptakan Read More Otomatis atau auto read more di blogspot alasannya ialah saat anda memakai 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 menciptakan auto readmore di blogspot berikut ini:

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

Cara I
1. Cari instruksi </head>
2. Kemudian copy paste instruksi di bawah ini sebelum instruksi 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 instruksi di antara <div class='post-header-line-1'/></div> sampai <b:if cond='data:post.hasJumpLink'>

4. Ganti dengan instruksi 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.

Berbagi :