Cara Menciptakan Auto Readmore Sederhana Tanpa Gambar Thumnail

Seperti yang kita sama-sama tahu bahwa auto readmore kebanyakan memakai tampilan gambar thumnail, dan bahkan belum ada yang mengulas menciptakan auto readmore sederhana tanpa gambar. Sebenarnya ada kelebihan dan kekurangannya memakai auto readmore thumnail, kelebihannya sanggup menarik perhatian pembaca untuk menelusuri halaman home blog alasannya ialah diperkuat dengan gambar. Sedangkan kekuarangannya gambar thumnail ditampilkan tidak sempurna, ada yang awut-awutan alasannya ialah pixelnya auto sehingga mengurangi ekstetika keindahan.

Berikut ini cara menciptakan auto readmore tanpa memakai gambar thumnail, sehingga halaman home screen menjadi higienis dan rapi. Tentunya auto readmore ini loadingnya sangat cepat dibandingkan yang thumnail.

Cara memasang auto readmore tampa gambar thumnail :

• Klik template > pilih Edit THML.
• Cari (CTRL+F) isyarat <data:post.body/>

Kode  <data:post.body/> pada umumnya ada 3 pilih yang ke-3. Bila gagal coba yang ke-1 dan 2.

• Replace atau ganti isyarat <data:post.body/> tersebut dengan isyarat di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if> 

• Cari isyarat </head> dan COPAS isyarat di bawah ini tepat di atasnya.

<script type='text/javascript'>
posts_no_thumb_sum = 250;
posts_thumb_sum = 210;
img_thumb_height = 120;
img_thumb_width = 120;
</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px; visibility: hidden; display: none"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

Kalau ingin menampilkan auto readmore thumnail, hapus isyarat yang berwarna merah.

• Simpan dan lihat hasilnya. 

Share this post