0 Cara memberi readmore lain pada blog dengan gambar

Assalamu'alaikum wr wb..................

Akhirnya saya sempat membuat artikel ini..!!

Kali ini kita akanm membahas blog tutorial tentang cara memberi readmore otomatis dengan gambar keren.

Saya berniat akan memberikan sedikit info tentang blog tutorial yaitu tentang readmore otomatis .Langsung saja ya. Kita akan membahas tentang read more.Karena banyak nya postingan. Sehingga blog kita tidak efektif, supaya lebih terlihat elegant mungkin kita bisa memberi read more otomatis dengan gambar yang keren. Kita akan membahas tentang readmore yang menggunakan gambar yang keren .

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

<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/AVvXsEiPyl_TRd8aHSZpXkVBmGT2Dzaqrvism8KevgBmr_5GGDYAFFpBMe1Fc9CdNhHG39OLwU2Izgc0K1l4F0gOJ5yoqN_jNxBTbEjsTp06XGew-hAhy_Irzm_nvBFLq5-Cjnj0sfhw5sCb7q7M/'/></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/AVvXsEiTW7dHWHdBRZJE9ZVQIz_ojsEeKKerQaJYni3sstyv2LAkQyz4mJMoMw04mj6lfQBVGwm-H5Ig3ehGQ84qMY2hj5VDkXPCKdYd11NQIoQU4fopxlQGBLF2cWJ5aMF24ob9kpPLEZhvAg4/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/AVvXsEhSe7cMwjwDHKn-PMUZ4cLBiGlhwjg5bdFChq6OGytHB672CsxVO7KMjlA80kwRyDC0Y82B4ZxWzQ16QtV46WT5xskgKJBW6bVj6gSqh6Dy5EtxlcuGGLKUIjZduEqOuLqgVy_ChmTQudo/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..

Jangan lupa tinggalkan komen ya,,,,

Wassalamu'alaikum wr wb...