Cara Pasang Animasi Readmore di Blog

Assalamualaikum Sobat

Cara Pasang Animasi Readmore di Blog bukanlah hal baru tapi karena banyak sobat blogger yang baru tidak ada salahnya untuk selalu berbagi informasi & bisa semakin mempercantik tampilan blog sobat. Nah tips memasang animasi readmore sangat mudah, ikutin aja caranya :

Berikut Toturial Membuat ReadMore Otomatis di blog:

1. loggin akun - Rancangan - Edit HTML

2. 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:

Ket : Jika kesulitan mencari HTML  <data:post.body/> karena tampilan Edit HTML yang baru bisa dilihat di Cara Menemukan data:post.body pada HTML Blog

 

 <b:if cond='data:blog.pageType != &quot;item&quot;'>

    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFBGdPLc_zNQ_XksEgp32w4gCjCkJ5Au4smIH9Ui0wd72Va_nlvLXnnKokDQbxfOt0VqPk8iFlj7c1KNwrGzSH5WgSa5xhsFH1pdVL6nFvGEM2PJPIN2ic8uU4IAh5kEB5j7Lsm8LLdQM/s1600/readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9niDBbT5q_2Ccv8CnnPfdVw2D5jUbsdh2oIU5v_fT9iGI56U5Y3DvIAOQWw23q6Toa9r-8AFFGk_EDDlHW7F48WnFNy48MevCT87-8CAHcJj4D3Vz9-onwQbLS_c_AfjQ_lT54cipg3s/s320/a1ifte.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><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)

Jika Sobat masih meinginginkan macam-macam pilihan model animasi readmore bisa lihat, pasang atau koppas DISINI

Selamat mencoba & semoga bermanfaat ^_^

Wassalam