Cara Mudah Menambahkan Auto Readmore/Baca Selengkapnya (Readmore Otomatis) Pada Blogspot
Auto Readmore adalah fitur yang akan mengotomatisasi pemenggalan continue reading atau pemotongan paragraf supaya lebih ringkas. Sesuai dengan namanya, auto readmore ini secara otomatis akan memotong paragraf posting diberanda. Hebatnya lg, auto readmore ini dilengkapi thumbnail gambar yang bisa ditampilkan ditepi paragraf. Tak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan, Disamping bisa mengatur jumlah karakter, thumbnail gambar pun tak ketinggalan juga dapat diatur seberapa panjang dan lebarnya. Hiperlink readmore juga dapat diatur letaknya, rata kiri, rata kanan maupun rata tengah dapat diterapkan. dan kata "Readmore" sendiri dapat diganti sesuai selera. Berikut langkah-langkah dan kode scriptnya...
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:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter) summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter) img_thumb_height = tinggi gambar thumbnail (misal: 150px) img_thumb_width = lebar gambar thumbnail (misal: 200px)
Setelah itu carilah kode berikut: <p><data:post.body/></p>
Catatan:
Jika mau, kamu dapat mengganti perataan tek sebelah kanan (right) dengan kiri (left), atau mengubah style huruf italic dengan normal. Kamu juga bisa mengganti tulisan Readmore... dengan kata lain atau dengan gambar (image).
0 comments:
Post a Comment