0 Cara Membuat Auto ReadMore

Setelah putar - puter sana sini , searching di blog-y para master seperti blog-ya kang Rohman dan yang laenyanyari cara membuat pasang auto readmore pada postingan, tapi semuanya masih pake auto readmore versi lama....! eeeeee.... akhirnya dapat juga di blog bang O-Om yang memposting tentang Cara membuat auto readmore yang gw cari-cari.

Disini saya mw sharing buat teman teman blogger yang lagi nyari tips untuk membuat auto readmore. Dengan Auto read more ini kita tidak perlu memotong artikelnya karena dengan auto readmore ini akan secara otomatis memotong sendiri artiklel tersebut.

Cara ini di ambil dari postingannya bang o-Om . Cuma ada kekurangannya menggunakan auto readmore ini yaitu dari masalah menampilkan image thumbnailnya pada postingan, jadi diusahakan kalau mau memasukan image ke dalam postingan pastikan ukurannya sama untuk setiap postingan, supaya tidak terjadi perubahan image thumbnailnya pada awal auto readmore di posting. Gimana kalau langsung aja pada proses pembuatannya.....!

Buat yang udah memasang auto read more versi lama mendingan di balikin lagi kodenya seperti semula.

langkah pertama membuat auto read more :

Silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script 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)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Lalu Simpan.
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>


Kalo sudah, ganti kode <data:post.body/> dengan semua 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)


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)

Tweet

Komentar →