Cara memasang Auto Readmore

Cara memasang Auto Readmore

Cara memasang Auto Readmore memang perlu di terapkan dalam blog kita agar loading blog kita tidak lemot. Kalau sobat belum tau apa itu readmore, saya akan sedikit menjelaskan. Read more itu dalam istilah lain Jump Break yang berfungsi menyingkat post kita pada halaman Home Page agar tidak terlalu panjang. Meskipun blogger sudah support fungsi readmore, tetapi masih banyak kok sob yang menggunakan auto readmore pada tutorial ini. Untuk mengetahui bagaimana Cara memasang Auto Readmore bisa sobat lihat di bawah ini:

1. Login pada blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. Download dulu templatenya biar gak terjadi hal - hal yang tidak diinginkan dengan cara mengklik Download Template Lengkap
5. Cari kode </head> untuk mempermudah pencarian klik ctrl + f pada keyboard
6. Copy kode dibawah ini di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

********************************************/
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. Selanjutnya cari kode <data:post.body/>
8. Ganti kode <data:post.body/> dengan kode dibawah 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'><b>Read More . .</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
9. Simpan Template

Selesai Deh..


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)

Selamat Mencoba ! ! !
Cara memasang Auto Readmore
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

11 comments Skip to comments

bang kok data:post.body/>nya tidak ditemukan ya

tolong pencerahannya

sudah di centang Expand Template Widget?

hehe, makasih bang udah dapet rupanya hehehe

gan gimana kalau kode data data:post.body ada 2?
tolong penjelasannya ya atau kirim ke email teguhislam@gmail.com

Siiippp Mantap Ijin Copas Code Read More nya Gan dan sudah ane pasang mohon pencerahan dengan berkunjung ke Blog Ane ...Thanks

gan, ketika saya tulisan no-float gag ada reaksinya gan. gmana ya? mohon pencerahannya?

min, punya saya kok gak ada kotak kecil di ujung script box Expand Widget Template?
mohon bantuannya.....

dan sudah saya ikuti cara2 diatas tapi gak bisa...

ohh maaf, postingannya blm diupdate hehehe
di tampilan pengeditan html blogger yg baru memang gaada kotak kecil Expand Template Widget gan
jadi gaperlu lagi centang2, tinggal klik tombol segitiga yg biasa ada di bagian kiri (tab nomer) :)

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon