Jumat, 25 Maret 2011

Cara membuat read more otomatis di blogspot

Membuat readmore otomatis
langsung aja kita ketahap tahap cara membuat read more otomatis. gak usah banyak basa basi nanti kelamaan basa basi jadi basi pulahheheheh:):
  • Yang pertama harus kita lakukan yang paztinya Login dulu ke bloger kita lalu masuk ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, centang tulisan Expand Widget Templates.
  • Yang kedua Cari kode dibawah ini. tekan CRL+F atau F3 untuk mencarinya.agar lebih gampang
</head>
  •   Kemudian letakkan kode berikut ini tepat diatas kode tadi. 
  • <script type='text/javascript'>var thumbnail_mode = "no-float" ;
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 100;
    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 dibawah ini. or tkn ctrl+f agar lebih gampang
  • <data:post.body/>  
  • Setelah itu ganti kode yang diatas itu dengan 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:right;padding-top:20px;'><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> 
  • Kemudian save template dan selesai…
  • Tampilan ukuran gambar dan potongan artikel pada halaman home bisa sobat ganti dan sesuaikan dengan mengganti nilai kode di bawah ini :
    summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
    summary_img = 340; adalah tinggi potongan artikel dengan gambar
    img_thumb_height = 100; adalah ukuran tinggi thumbnail
    img_thumb_width = 120; adalah ukuran lebar thumbnail
    Untuk read more bisa sobat ganti sesuai keiinginan sobat, misal baca selengkapnya ato gak usah baca, bahaya!! hehehehe.. bisa juga sobat ganti dengan gambar.
    selama tmencoba dan semoga berhasil yah friend,,,,,
       

Tidak ada komentar:

Posting Komentar

law menurut teman blogers isi dr blog nih menarik...
jangan lupa ksih komenya yah...!!!
agar lebih memotivasi unuk admin...:)