Cara Membuat Read More di Blogspot

Cara Membuat Read More di Blogspot. Banyak tentunya yang mengeluh ketika menggunakan blogspot sebagai platform blognya. Kenapa? Karena blogger sedikit sekali memberikan feature-feature SEO. Jika kita melihatnya dari sudut pandang yang berbeda sebenarnya hal inilah yang menjadi sesuatu yang menarik yang memancing kreatifitas kita. Bagaimana kita tidak hanya menerima dan terus mencoba sesuatu yang baru yang kita perlukan seperti apa yang kita dapat pada platform lain seperti joomla dan wordpress. Salah satunya yang sangat mencolok adalah fungsi readmore.

Pada postingan kali ini saya akan membahas bagaimana kita menampilkan fungsi readmore secara otomatis. Sebelumnya readmore adalah fungsi yang memungkinkan kita membatasi jumlah kata pada postingan kita yang kita tampilkan di halaman utama. Dengan mempersingkat jumlah kata yang ditampilkan tentunya akan mempercepat loading halaman utama blog kita. Bisa jadi user friendly bukan.

Berikut beberapa langkah yang harus dilakukan.

• Langsung ke TKP, dashbord =>> rancangan =>> edit html, klik expand template widget
• Carilah kode HTML </head>, gunakan ctrl+f untuk mempermudah
• Salin kode di bawah ini dan letakkan di bawah kode </head>

<!-- Auto read more script -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script -->

• Angka yang berwarna biru adalah jumlah kata yang akan ditampilkan. Silahkan dirubah sesuka hati.

• Langkah selanjutnya cari <data:post.body/> gunakan ctrl+f untuk mempermudah.
• Salin kode di bawah ini dan ganti kode di atas dengan kode di bawah ini.

 <!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more End -->

• Selesai. Sebelum menyimpan sebaiknya klik pratinjau untuk mencegah terjadinya kesalahan.

Tips: Bagi anda yang ingin menggunakan gambar sebagai pengganti read more silahkan ganti  Read More >> dengan kode di bawah ini.

<img border='0' src='url (direct link) gambar readmore'/>

 url (direct link) gambar readmore ganti dengan url tempat anda menyimpan gambar yang diinginkan.

Selamat mencoba dan salam sukses.