Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar 100% work

Cara Membuat Readmore Ringan Loading. Fungsi Readmore yang beredar di berbagai tutorial teman - teman blogger menggunakan script dimana di halaman homepage dan halaman selain postingan (single posting) ditampilkan sedikit konten dengan ukuran gambar tersesuai. Ternyata coba lihat View Page Source halaman tersebut, semua konten keseluruhan terlihat. Bayangkan jika tiap postingan Anda memiliki 7 gambar dan di homepage Anda munculkan 6 postingan. Maka untuk membuka halaman homepage blog Anda, browser harus download kurang lebih 7 x 6 = 42 gambar. Wow! dijamin lelet banget, terlebih gambar yang ditampilkan sizenya besar. Belum lagi jika dipostingan nyelip video youtube. Nah Lo! :)

Secara default blogger telah memiliki fitur bawaan yaitu insert jump break, dimana Anda bisa menentukan penggalan artikel yang hendak ditampilkan di halaman selain single posting. Dengan cara ini setelah dilihat di View Page Source, konten yang di download browser sebatas penggalan artikel Anda, konten kebawahnya tidak ikut dibaca. Dengan cara ini, membuat Speed Loading Blog Anda semakin cepat. Tapi dengan cara manual ini, selain Anda harus memfungsikan tool di tiap postingan, juga tampilan yang terlihat nantinya junjing karena ketidakjelasan berapa teks yang di insert jump break. Kesannya menjadi tidak rapi. Nah sekarang Mas Aro akan informasikan fungsi readmore yang easy loading sekaligus terlihat rapi di halaman selain single posting.

Jika Anda sudah menggunakan script readmore otomatis segera dihapus saja coding diatas </head> karena tidak akan digunakan.

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
</head>

Kemudian hapus coding ini

cari kode <data:post.body/> lalu ganti dengan kode dibawah ini
<data:post.body/> yang ke 2 yg harus di ganti


Ganti dengan Coding ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' itemprop='photo' style='float:left; margin:0 10px 10px 0;' width='72'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
Readmore : <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
</div><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
           <i> <a expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></a></i><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Untuk demo silahkan lihat tampilan homepage saya. Fungsi readmore yang saya pakai salah satu alternative saja. Meski tampilannya standar dan sederhana, tapi dijamin kenceng speed loadingnya. Untuk memastikan adakah perubahan setelah Anda menggunakan script readmore sebelumnya dan fungsi readmore ini silahkan check di www.gtmetrix.com.