Membuat Auto read more pada blog
Cara membuat readmore otomatis dengan gambar
- Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
- Cari Kode </head>.
- Copy paste kode dibawah ini tepat 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, (for blogspot)
by: http://trikseosimple.blogspot.com/
********************************************/
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>
- Save Template anda.
- Kemudian scroll template anda kebawah cari kode seperti berikut:
Ket: Kata kuncinya adalah didalam kotak hitam
"BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.
- Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
- Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut
- Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
- Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
- selanjutnya akan terbuka kode kode yang lain.
- geser atau scrol ke bawah dan cari kode
<data:post.body/>
- Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<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 == "item"'><data:post.body/></b:if>
- Klik SAVE / SIMPAN dan lihat hasilnya.
Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena
ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin
para blogger pemula tidak akan mengerti atau kesusahan membuatnya.
Posting Komentar