Cara Lengkap Membuat Read More Otomatis di Blogspot

Author Unknown - -
Home » » Cara Lengkap Membuat Read More Otomatis di Blogspot

Cara Lengkap Membuat Read More Otomatis di Blogspot

Salam bahagia teman-teman blogger, semoga selalu dalam keadaan sehat. Pada kesempatan kali ini, aku akan membagikan cara lengkap membuat Read More otomatis di blogspot. Nah tentu dengan banyak pilihan cara, jadi anda bebas memilih bentuk dan model readmore yang anda inginkan. Tutorial ini aku kumpulkan dari berbagai sumber, yang tentunya terpercaya dan terbukti dapat diterapkan di template blogsot.
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 </head>
<script type='text/javascript'>
summary_noimg = 450;
summary_img = 280;
img_thumb_height = 200;
img_thumb_width = 200;
</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:0px 10px 5px 0px;"><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>

3. Lalu cari kode <data:post.body/> atau <p><data:post.body/></p> 
4. Ganti kode tersebut dengan kode di bawah

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFKdILVqemhCuINd_sHsGm3LxiXSqe_VaOkV9ag2N5hH71UfwGi3MbnOmAZLmUApI2_ibiVongWVpN-3ClbvYtjRvgxwr-dGn_Gf6dUviNXerVlgJSioJVZ7Ikw3pcM5Cjd31yoH6wJPk/' style='border-style:none;'/></a></span></b:if>

5. Simpan Template.

Cara II
1. Cari kode </head>
2. Kemudian copy paste kode berikut tepat di bawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

3. Lalu cari kode <data:post.body/> atau <p><data:post.body/></p> 
4. Selanjutnya ganti kode tersebut dengan kode di bawah
<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:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Kemudian Simpan Template.

Sekian dulu tutorial blogspot yang dapat aku bagikan terkait Cara Lengkap Membuat Read More Otomatis di Blogspot, semoga bermanfaat bagi teman-teman blogger. Untuk tutorial blog lainnya, silahkan ditunggu karena masih banyak tips dan trik di dunia blog