Cara Mudah Membuat/Memasang Auto Read More Otomatis Pada Blog

Hai sobat blogger! Pada kesempatan kali ini saya akan posting tentang Cara memasang Read More Otomatis Pada Blog. Info ini akan cukup membantu mempercepat loading suatu halaman web/blog, sehingga Halaman Web Terlihat Profesional. Biasanya berawal dari banyaknya karakter pada suatu postingan sehingga akan memperlambat loading homepage pada blog.
Oh iya, Auto Read More kali ini juga berbeda dengan Read More yang dulu. Cara kerjanya sudah otomatis(namanya saja Auto Readmore), tidak perlu menambah script pada setiap postingan, karekter yang ditampilkan bisa diatur, dan juga dapat menampilkan Image pula.
Jangan ada yang terlewatkan jika ada yang masih pakai Read more lama (khusus readmore versi lama), harap dikembalikan seperti dulu, caranya hapus code yang berwarna merah pada Edit HTML.

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK... kemudian bagi yang baru mau mencoba, ini dia langkah-langkahnya :

Seperti biasa, masuk ke blogger.
Pilih Rancangan/Layout, kemudian pilih Edit HTML. Beri tanda centang pada Expand Template Widget

Kemudian cari kode </head> , untuk mempermudah pencarian gunakan tombol CTRL+F atau menggunakan F3. Setelah menemukan kode </head>. copy script berikut diatas kode tersebut.

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

//<![CDATA[

/******************************************

Auto-readmore link script, Versi 2.2 (khusus blogspot)

kunjungi http://jogoyitnan-free.blogspot.com untuk mendapat tips & trik

********************************************/

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>

Keterangan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Lanjutkan dengan mencari kode <data:post.body/>. Jika sudah kemudian hapus dan ganti dengan kode berikut.

<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 == "item"'><data:post.body/></b:if>

Keterangan :

READ MORE : bisa diganti dengan kata kata lain, seperti Baca Belengkapnya, Read This Post, dsb.