Cara Mudah Membuat "Readmore Otomatis" Terbaru Di Blogger Dengan Gambar

Karena banyaknya Postingan. Sehingga blog kita sering kali tidak efektif, agar lebih terlihat elegant mungkin kita bisa memberi read more otomatis dengan gambar. Sebenarnya membuat Read More Otomatis banyak berbagai macam cara, ada read more otomatis dengan gambar dan ada juga read more otomatis dengan thumnail, Kali ini kita akan membahas blog tutorial tentang cara memberi readmore otomatis dengan gambar. Langsung saja Berikut langkahnya:

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget

4. Cari kode </head>

5. Copy kode di bawah ini,dan letakkan di atas kode </head>

<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>

6. Lalu cari kode <data:post.body/>

7. Ganti kode tersebut dengan kode di bawah ini.

readmore otomatis dengan gambar:

<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/AVvXsEjdc_hyphenhyphenIuQMcyzCypHdO6kNhyphenhyphenLFJaVEjvPukrw2gIvgDLBARD8_KTTjZo5Kun_N3BWfwFtTzvaS7JCPgBCxRC8xk9BYNmRXfsnAeA5lTwmgU5RCzr8og2jhK4rvILX5egrrxaLfh2M57CKM/'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

read more otomatis dengan gambar : 

                                                                

<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/AVvXsEjq7bjhvNLCJu1YFiuzedIhf3ff0SGySAbjdyT0KRd3uOZxmM77_5E2KSnqCnqIxo7t0rj7gl2rS2J8oGMeoWYlGnbsJ5mz6mcEb-vOY2QLitvqrpYBAgSYJLa66OFeWSfHhhkdZMcfI5k/s1600/readmore.gif'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

read more otomatis dengan gambar  :    

                                         

<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/AVvXsEixVYewXtHCeGSOuc_5kk-NW7o2js9gEus7nhNKb3m8bdaCYMol2JCheucAprX_NwJRrJNv2OO2i4Q5vmcxnk88Vp7miJjOQ66IOubrMnrneRUsmY7kruEIIkJJcd1wsMCyJ89mkTrK7WA/s320/a1ifte.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Selamat Mencoba, semoga berhasil.

Klik link dibawah untuk informasi yang lainnya