ads
Home » » Cara Memasang AutoReadmore

Cara Memasang AutoReadmore

Written By Ramadhan Fnw on Oct 17, 2011 | 9:07 PM

Jumpa lagi dengan saya disini. :D Untuk mengisi posting kali ini saya akan share cara membuat readmore otomatis (khusus bagi template blog yang belum terdapat autoreadmore). Keunggulan autoreadmore ini yaitu menampilkan gambar postingan di awal paragraf, dan menyembunyikan sebagian paragraf yang ada. Sehingga tidak memakan tempat. Langsung saja ke tata caranya:

Pertama, masuk ke akun blog kalian.
Lalu ke Rancangan-Edit HTML
Centang kotak "Expand Widget Template"
Setelah itu cari kode dibawah ini
</head>
Paste kan kode dibawah ini tepat di atas kode tadi.
<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[
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> 

Setelah itu cari kode ini

<data:post.body/> 

Lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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'><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>

Untuk yang tau kode-kode HTML, silahkan bisa di edit lagi sesuai keinginan kalian. Kalau yang masih belum tau, jangan dirubah. :)
Good Luck.


Share this article :

2 komentar:

Ayo Dukung Komodo di 7Wonder said...

udah banyak yg share sob, tukar link yuk ?

minat jawab di blog ane..

Share Our Knowledge said...

@Ayo Dukung Komodo: iya sob.
oke..

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger