Auto Read More dengan thumbnail, adalah solusi atau bisa dikatakan Blogger hacks untuk menampilkan fungsi read more di blog. Bahkan script ini menampilkan thumbnail gambar, baik itu disimpan di awal, tengah atau akhir. Cotohnya kaya di blog ini :


Langsung aja langkahnya :

1. Login ke Blogger. Dasbor > Rancangan > Edit HTML, centang "Expand template widget"
2. Simpan kode dibawah ini, tepat sebelum </head>
 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>
Kode yang dapat di rubah :

summary_noimg = 430; (karakter yang ditampilkan tanpa gambar)
summary_img = 340; (karakter yang ditampilkan dengan gambar)
img_thumb_height = 100; (ukuran tinggi thumbnail gambar)
img_thumb_width = 120; (ukuran lebar thumbnail gambar)

3. Cari kode <data:post.body/>, dan ganti dengan kode ini :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><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>
</b:if>
Kode yang betanda merah, bisa diganti sesuka anda, misalkan Read More, Baca Selengkapnya, dll

4. Save.

Gampang bukan? gimana hasilnya?

13 komentar

Berhasil............. tks :)

Balas

makasih scriptna
thanks banget
:D

Balas

kang, ana pake cr read more yg lawas, kl pake ini apa hrus ganti yg lama n terus apa msh ngutik2 postingx, seperti ana selama ini kang hrus dicari sampai texs mn dlu yg mw dipotong...?

Balas

mantap bos, aq ijin nyimak bos, sekalian coba aq praktekkan,,,

Balas

berhasil!!!!! thanks....

Balas

saya juga berhasil.. Arigatou..^^

Balas

Thx kang, sukses 100% :D

Balas

nya yg keberapa kang?
thanks before

Balas

Saya mau nanya nih Kang sehubungan dengan tips blog di atas. Untuk memasukan kode pemanggil alternatif pada gambar thumbnail readmorenya gimana ya bila perlu dengan title gambarnya

Balas

kang .. saya pake template super seo dari kang ismet cara bikin auto readmorenya gimana ? saya masih bingung ..
mohong pencerahannya kang master ismet :)

Balas

gak berhasil punyaku kang...
mohon bantuannya... kuganti dengan tulisan "baca selengkapnya" tapi tetap aja nongol "read more"
:(

Balas

<data:post.body/> yang mana sih bang? ada banyak soalnya.

Balas

Poskan Komentar


×
Chat