Cara membuat read more automatis bergambar

 cara membuat read more otomatis bergambar (thumbnails)






1. Log in,dasbor blogger
2. Rancangan>edit html>centang Expand Template Widget
3. Cari </head>,copy paste script berikut tepat di bawah </head>


    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 150;
    img_thumb_width = 150;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    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(thumbnail_mode == "yes") {
        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>


Keterangan:

• summary_noimg = 430 = jumlah karakter huruf pada saat tidak ada gambar
• summary_img = 340 = jumlah karakter huruf pada saat ada gambar
• img_thumb_height = 150 = untuk mengatur ketingian,artikel
• img_thumb_width = 150 = untuk mengatur lebar,artikel

CATATAN : 

"Untuk  img_thumb_height = 150
                   img_thumb_width = 150

                                            Tidak di rubah juga gak apa2x"
4. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<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/AVvXsEiwFsuIrgUr8FAGQCg8DTTfzvxbkVZohVZa74lER0luXzkhkwRyvj-vUxV-GiMQ9dahG_i7zjalrH_cuyig845OmLws9uy-dVbtGI2-ijS_YYe34SeQ07N_rGX0sf2JACT2KM4YXnnOzsEi/s1600/Untitled-1.psd.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

KETERANGAN :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFsuIrgUr8FAGQCg8DTTfzvxbkVZohVZa74lER0luXzkhkwRyvj-vUxV-GiMQ9dahG_i7zjalrH_cuyig845OmLws9uy-dVbtGI2-ijS_YYe34SeQ07N_rGX0sf2JACT2KM4YXnnOzsEi/s1600/Untitled-1.psd.png'/>

ubah text orange tersebut dengan url gambar read more anda

5.simpan,lihat hasilnya



SELAMAT MENCOBA