Cara Membuat ReadMore Otomatis Bergambar

Akhirnya saya sempat membuat artikel ini..!!
Kali ini kita akanm membahas  blog tutorial tentang cara memberi readmore otomatis 
Saya berniat akan memberikan sedikit info tentang blog tutorial yaitu tentang readmore otomatis .Langsung saja ya. Kita akan membahan tentang read more.Karena banyak nya postingan. Sehingga blog kita tidak efektif, karena panjangnya
setiap postingan...,,??
Mungkin kita bisa  memberi read more otomatis. Kita akan membahas tentang readmore yang menggunakan gambar.


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

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

    visit http://cahsobo.co.cc 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='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>

 

 

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

8    Simpan template......
      SELAMAT MENCOBA YA READ MORE OTOMATIS INI.... 

      SEMOGA BERHASIL ! !