Cara Membuat read More

Fungsi Readmore yang beredar di berbagai tutorial teman - teman blogger menggunakan scriptdimana di halaman homepage dan halaman selain postingan (single posting) ditampilkan sedikit konten dengan ukuran gambar tersesuai. Ternyata coba lihat View Page Sourcehalaman 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. banyak bgt kan ?

Secara default blogger telah memiliki fitur bawaan yaitu insert jump break,yaitu 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

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
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

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>

Oke sekian artikel yang telah saya buat dari berbagai sumber referensi yang telah saya jadikan satu. Semoga artikel yang telah saya buat ini dapat membantu anda terima kasih. happy blogging. Good Luck :)