Cara Membuat Auto Read More di blog

Cara mudah membuat Auto Read More :
  1. Masuk menu Rancangan - Edit HTML - jangan lupa centang kotak kecil - Expand Widget
  2. Cari kode ]]></b:skin> 
  3. Simpan kode di bawah ini tepat di atasnya :

/* more link style */
.rmlink a, .jump-link a{
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
float:right;
padding:2px 12px;
border:none;
background:#ccc;
color:#000;
font-style: italic;
border:1px solid #b7b7b6;
margin-top:10px;
text-decoration:none;
}
.rmlink a:hover, .jump-link a:hover{
background:#797878;
color:#fff;
border:1px solid #545353;
text-decoration:none;
}

 4. Selanjutnya kita cari kode </head> :
 5. Simpan kode di bawah ini tepat di atasnya :
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 350; summary_img = 400; img_thumb_height = 80; img_thumb_width = 130; </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:5px 10px 0px 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>
 Keterangan  :
- summary_noimg = 350: jumlah karakter tanpa image posting,
- summary_img = 400 : jumlah karakter dengan image posting 
- img_thumb_height = 80: tinggi Image posting
- img_thumb_width = 130: lebar Image posting

 6. Sekarang kita cari kode : <data:post.body/> Kemudian gantilah kode tersebut dengan 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>

Simpan Template.
Selesai... dan sekarang kita bisa lihat hasilnya...
SEMOGA BERMANFAAT
Ping your blog, website, or RSS feed for Free
Cara Membuat Auto Read More di blog Cara Membuat Auto Read More di blog Reviewed by Akses Rupiah on Juli 01, 2011 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.