Cara Membuat Auto Readmore Di Blog

Membuat Fitur Read More di blog mungkin sudah tidak asing lagi bagi blogger Master, yaitu fitur blog untuk menyembunyikan sebagian artikel  blog yang akan ditampilkan di Page Home blog.

Sebelumnya saya juga pernah membuat post tentang Cara Membuat Read More Manual Di Blog, tapi cara ini sangat merepotkan, karena anda harus bisa sedikit memahami Code HTML yang akan digunakan pada Posting Blog anda, bila sedikit saja salah taruh, maka Read More nya tidak akan tampil atau Error.

Baik langsung saja, berikut cara yang anda butuhkan untuk membuat Read More Otomatis.

1. Login ke akun Blogger anda

2. Klik pada tab Tata Letak

3. Lalu klik tab Edit HTML

4. jangan lupa Beri tanda centang pada kotak kecil Expand Template Widget

5. Copy kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5AijxYyYloxXMg0lgIysXV1ValH1gQhBZHm_0U60ae7RDPSB4g_93D3Smfi3oM4j2-OnwAKSGsJ6ucfzlVazJVoRojJuD3oCJsx2NaFFIiW6tL7tgDlo9Mi1mqABdN_UuFONkeZ0Z/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

Ket:
summary_noimg = 300 menunjukkan jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5AijxYyYloxXMg0lgIysXV1ValH1gQhBZHm_0U60ae7RDPSB4g_93D3Smfi3oM4j2-OnwAKSGsJ6ucfzlVazJVoRojJuD3oCJsx2NaFFIiW6tL7tgDlo9Mi1mqABdN_UuFONkeZ0Z/s1600/def-thumb.png" adalah gambar Read More yang muncul. Anda bisa mengganti Kode Gambar tersebut, bila anda memilik gambar yang unik.

6. Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p> Untuk memudahkan pencarian gunakan Ctrl+F.

7. Ganti kode tersebut dengan kode dibawah ini

<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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>

8. Simpan
Silahkan Modifikasi kode-kode di atas seusai keinginan anda.