Cara Pasang Readmore Otomatis di Blogger

Beberapa hari yang lalu, saya mengunduh template Blogger gratis dari internet. Ternyata, pada template tersebut belum terdapat fitur "Readmore Otomatis". Untuk itu saya perlu memasang sendiri "readmore otomatis" karena jika tak ada fitur ini, maka halaman beranda blog akan menjadi sangat panjang ke bawah.

Berikut langkah-langkah atau cara memasang readmore otomatis di blogspot:

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" diikuti klik "Template".

3. Kemudian klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda centang pada "Expand Template Widget".

5. Lalu carilah kode </head>. Untuk mempercepat pencarian, tekan tombol F3 pada keyboard lalu masukkan kata kunci yang dimaksud.

6. Selanjutnya taruh kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; 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>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah 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;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

8. Klik tombol "Simpan template".

Berikut keterangan untuk readmorenya...

• var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
• summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
• img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
• img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
• readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Sumber: Cara Mudah Membuat Readmore Otomatis di Blog Terbaru