Pasang Script Auto Read More di Blogger

Read more (baca selengkapnya) biasanya sering kita jumpai di postingan-postingan pada homepage atau halaman utama suatu blog yang tujuanya untuk menampilkan sebagian isi postingan pada halaman utama saja dan akan menampilkan keseluruhan isi jika kita mengklik link readmore tersebut.

 

Blogger sendiri sebenarnya telah menyediakan fasilitas readmore tetapi pada kali ini saya akan memberikan trik untuk memasang fasilitas ini secara otomatis tanpa harus menambahkan suatu kode pada tiap postingan yang kita buat (readmore versi lama).

Cara Pasang Script Auto Read More

Penting!!! jika sebelumnya anda telah memasang readmore versi lama (.fullpost), sebaiknya hapus dulu kodenya.

1. Masuk ke account Blogger anda. Pilih Rancangan->Edit HTML
2. Centang pada "Expand Widget Templates"
3. Cari kode </head> kemudian letakan script dibawah ini tepat diatasnya.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;
summary_img = 325;
img_thumb_height = 100;
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 = 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>

4. Masih dalam tab Edit HTML, cari lagi kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode dibawah ini.

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

5. Simpan template kemudian lihat hasilnya.

Tips:

• var thumbnail_mode = "no-float"; -> Menetapkan gambar / thumbnail tidak di float.
• summary_noimg = 400; -> Banyaknya karakter yang akan ditampilkan tanpa gambar / thumbnail.
• summary_img = 325; -> Banyaknya karakter yang akan ditampilkan dengan gambar /thumbnail.
• img_thumb_height = 125; -> Tinggi gambar / thumbnail.
• img_thumb_width = 125; -> Lebar gambar / thumbnail.
• »» Readmore -> Text untuk link readmore, silahkan ganti sesuai keinginan anda.

Demikianlah Tutorial auto read more dari saya dan jika ada yang kurang jelas, jangan sungkan untuk bertanya... :D

Posted in: Tutorial Blog