Tuesday 3 March 2015

Cara Membuat 'Read More' pada Postingan Blog

Kali ini saya mau berbagi tips tentang Cara Membuat 'Read More' pada Postingan Blog.
Ini dia tipsnyaa...

  1. Login ke Blogger. Sekarang anda berada di Dashboard
  2. Masuk ke menu 'Template', lalu klik 'Edit HTML'
  3. Cari (gunakan Ctrl + F) dan ganti semua <data:post.body/> (ada 3 yang harus diganti) dengan kode ini:
  4. <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/><b:else/>
    <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</a></span></b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
  5. Lalu cari </head> dan taruh kode ini dibawahnya:
  6. <script type='text/javascript'>var thumbnail_mode = "no-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>
  7. Lalu Save dan lihat hasilnya...
Nah itu dia tips nya.. Semoga bermanfaat

4 comments:

  1. Gan kok di blog ane gak berfungsi yaa.. Mohon pencerahannya.. :v

    ReplyDelete
    Replies
    1. Coba dibaca baik2 step diatas. Udah jelas banget kok itu gan :v

      Delete