Salam Belogger Sobat semua...Pada artikel terdahulu saya pernah membahas tentang Menyingkat Tmpilan Postingan Dengan "READ MORE".
Ternyata cara tersebuat ada yg bilang sudah kuno nggak praktis. Nah sekarang saya akan memberikan trik yang lebih praktis, yang mana sobat nggak perlu memasukkan kode setiap posting, karena dengan cara ini postingan sobat otomatis langsung disingkat pada tampilan. Nggak perlu basa-basi lagi langsung meluncur ke TKP..
Sebelum memasang kode Read More otomatis, sebaiknya sobat perhatikan hal-hal berikut :
- Download dan simpan teamplate sobat terlebih dahulu, karena jika gagal sobat bisa mengembalikan blog sobat seperti semula.
- Berilah tanda conteng pata tulisan Expand widget template.
- Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
- Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.
- Login ke Account Blogger Anda;
- Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
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>
3. Cari dan 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'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Selanjuatnya simpan, selesai deh..
SELAMAT MENCOBA, SEMOGA BERMANFAAT....
