Selasa, 13 Januari 2015

Cara Membuat Auto Readmore Sederhana Tanpa Gambar Thumnail

Contoh auto readmore tanpa thumnail
Seperti yang kita sama-sama tahu bahwa auto readmore kebanyakan menggunakan tampilan gambar thumnail, dan bahkan belum ada yang mengulas membuat auto readmore sederhana tanpa gambar. Sebenarnya ada kelebihan dan kekurangannya menggunakan auto readmore thumnail, kelebihannya dapat menarik perhatian pembaca untuk menelusuri halaman home blog karena diperkuat dengan gambar. Sedangkan kekuarangannya gambar thumnail ditampilkan tidak sempurna, ada yang acak-acakan karena pixelnya auto sehingga mengurangi ekstetika keindahan.

Berikut ini cara membuat auto readmore tanpa menggunakan gambar thumnail, sehingga halaman home screen menjadi bersih 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) kode <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 kode <data:post.body/> tersebut dengan kode 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 kode </head> dan COPAS kode 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 kode yang berwarna merah.
  • Simpan dan lihat hasilnya. 

The author of the blog Teknologivirtual


EmoticonEmoticon