membuat readmore otomatis tumbnail

Ternyata sudah banyak ya Auto Readmore Thumbnail atau baca selengkapnya dengan gambar ,di kesempatan kali ini kita akan membahas bagaimana cara membuat Readmore Otomatis Thumbnail,tapi sebelumnya ada baiknya kita mengetahui fungsi Read more tersebut,fungsi read more yaitu untuk mempersingkat Tulisan - tulisan posting di blog yang tampak pada halaman beranda,dan mempercepat loading blog kita,dengan memasang readmore loading blog akan terasa ringan,sehingga visitor atau user betah untuk otak atik isi dari blog kita, sobat mastony kali ini saya akan mengulas sedikit tentang bagaimana membuat readmore otomatis menggunakan gambar,
yuk ,,kita langsung ke tkp :
seperti biasa sob :

• Login blogger -->> Pilih Templates -->> Edit Html
  
• Cari kode </head>
• jika sudah letakkan kode berikut setelah kode </head> tadi

<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/AVvXsEjXn2jLJycfGpTGVZFSiU8h0RPxi2xA9ntgsMoNv8oT7fYQFQrfXExADW1xZb2TEWakKs9lcSQKt9tn0U1WN34HCBwR4uNwR1LKkxKwnr6_mP9lxKgly4TB0qLIa-nylq_Lml3vzRFphPA/s1600/bloger+bundar.jpeg" 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>

• Selanjutnya cari lagi kode <data:post.body> jika sudah ketemu hapus atau ganti <data:post.body> itu dengan kode dibawah 

<b:if cond="data:blog.pageType != &quot;item&quot;">
<div expr:id="&quot;summary&quot; + data:post.id">
<data:post.body></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" href=""><b>Read more »</b></a></span>
</b:if>
<b:if cond="data:blog.pageType == &quot;item&quot;"><data:post.body></data:post.body>
</b:if>

Catatan :Sobat juga bisa merubah ukuran gambarnya pada baris berikut :

img_thumb_height = 150; img_thumb_width = 150;

atau sobat juga bisa menampilkan jumlah karakter teks pada readmore tersebut pada baris :

summary_noimg = 300;

Nah gimana ..?sobat tertarik untuk mencoba ..
Demikian Cara membuat readmore otomatis Dengan gambar
Semoga artikelnya bermanfaat ...Happy Blogging..