Welcome To Tirto Blog
> Cara membuat read more

Cara membuat read more

Posted on Selasa, 07 Agustus 2012 | No Comments

Menu read more berfungsi untuk menampilkan sebagian dari suatu artikel yang diterbitkan. Hal tersebut di maksudkan untuk memberikan ruang lapang pada halaman utama suatu blog.
tanpa basa basi lagi lansung saja ke TKP:
1) login ke akun blogger
2) klik rancanga > Edit HTML
3) cari kode </head>
4) copy paste kode di bawah ini:
    <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, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

    letakkan kode tadi di atas kode </head>
5) klik simpan template
6) masih di edit html,klik tanda centang pada "Expand widget template"
7) cari kode <data:post.body/>
8) ganti kode <data:post.body/> dengan:
    <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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9) silakan di simpan dan lihat hasilnya


    good luck  
   

Leave a Reply

Silahkan berkomentar.
Komentar anda sangat berguna untuk blog kami.
Terima Kasih.

Tirto Blog. Diberdayakan oleh Blogger.