Cara Membuat Readmore Otomatis Animasi ~ .:: Cavalier Juhik ::.

Title : Cara Membuat Readmore Otomatis Animasi | Category : Blogging

Cara membuat atau memasang readmore otomatis di blog pada blogger atau blogspot memang sudah banyak di bahas para blogger lainnya. adanya readmore atau bahasa gaulnya "Baca Selanjutnya" memang sangat banyak manfaatnya. fungsi readmore diantaranya adalah merapikan tampilan blog, memepercantik halaman blog, mempermudah pengunjung melihat postingan-postingan yang ada di blog kita.

Berikut Toturial Membuat ReadMore Otomatis di blog:

1. loggin akun - Rancangan - Edit HTML

2. Centang Expand Template Widget

3. Copy Kode dibawah 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>

4. Paste kode diatas Tepat di atas Kode </head>

5. selanjutnya mengganti kode <data:post.body/>

6. cara nya blok kode <data:post.body/> paste 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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLkM0JXsbyYiPJ8K6qPJMnoavqLhIZcyimfcGEouW9NhwcXbmGw58vhJsEiGeKmDcaBsvMAU70LRIjg00wnhDH0I_ZDX1WnirTSSPcAtirAyvg5HWH1BP8j8V6Ne9Mq1s63NqKCCkf0o/s1600/readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeXLS2tzUrP86rJM2SUjXhWPoQfzp6eXB1twKhr2qZek6zSvH5kyA4gidkST9fQeojkPUgHj97tFNoWjbFqyaYoeqsk7Kfp7zEFF74Vup0RjOEYDo2B7oC3LjaQkDETnjRLXOo4oRcbA1/'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXJZ9lK06r-7MkTtCW4_Aot7zf6aIjOR1ZgBZXnKc7w1NlYNGxmvtuT-LytTBa8jmeWxo74_Fg8e3LKa8IqP5pAMIjQstZ69G_FM5_aXjN0tLrKSrQSNol4octUAYpoat9PTf3eFV66cc/s320/a1ifte.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan:

var thumbnail_mode = "float"; (untuk menentukan letak thumbnail berada di (float) kiri atau ganti dengan (no-float) jika ingin thumnail berada di kanan
summary_noimg = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting tanpa thumbnail)
summary_img = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting dengan thumbnail)
img_thumb_height = 120; (Tinggi thumbnail)
img_thumb_width = 120; (Lebar thumbnail)

Posted in: Blogging