25.1.10

Membuat readmore otomatis di blogger

  • Pin It!

Secara default, artikel pada blogger tidak dipenggal. Kita bisa saja menyisipkan kode untuk memenggal artikel. Namun, tetap merepotkan bila harus selalu menyertakan kode untuk memenggal saat menulis artikel. Supaya hal itu tidak dilakukan, kita bisa membuat penggalan artikel secara otomatis.

Caranya sebagai berikut.

  • Sisipkan kode ini di atas kode </HEAD> pada halaman EDIT HMTL.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 350;
img_thumb_height = 120;
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>

  • Klik SAVE TEMPLATE.

clip_image002

  • Ceklis Expand Widget Templates.
  • Cari kode <data:post.body/> lalu ganti (replace) menjadi kode di bawah 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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

  • Klik SAVE TEMPLATE.

Hasilnya seperti blog ini.

Jika Anda sudah menyisipkan kode readmore sebelumnya, hapus dulu kode tersebut baru masukkan kode seperti di atas.

3 komentar:

abu kholid

mas pilihan edit html nya dimana?

abu kholid

oo,,dah ktm mas, di template,,, nya ada 3, semuanya diganti y

abu kholid

alhamdulillah berhasil, ternyata cuma cukup satu aja yg dirubah yakni yg paling atas,,trimaksh

Jangan asal komentar, ya...

Mohon isi komentar ini sesuai dengan topik yang diberikan. Jika ada pertanyaan, mohon menyantumkan alamat email yang valid, karena saya tidak akan menjawab di blog ini. Jawaban pertanyaan akan saya balas ke email.
"Oh ya, Anda ingin belajar bikin web hanya dengan 4 langkah mudah? Saya rekomendasikan belajar di sini. Khusus pemula & langsung praktek online."
Terima kasih.