Membuat Jump Break/Read More otomatis+ image Thumbnailnya

read more

hi, pembaca setia depermana12 kali ini saya akan membagikan tutorial cara membuat auto read more di post blog, auto read more merupakan salah satu cara memperindah tampilan blog sobat agar tampilan blog sobat lebih menarik dan juga auto read more membuat loading blog sobat lebih ringan dan terasa cepat, tanpa panjang lebar ini dia tutorialnya:

• login keblogger
• pilih template -> edit html
• centang expand template widget
• cari kode </head> untuk mempermudah gunakan ctrl+f
• copy paste kode dibawah ini tepat dibawah kode diatas

<!-- Automatic read more script Start -->

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //yes-with picture,no-without picture

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>

<!-- Automatic read more script End -->

• cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini

<!-- Automatic read more script Start -->

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

<data:post.body/>

<b:else/>

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

<data:post.body/>

<b:else/>

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<a class='more' expr:href='data:post.url'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>

</b:if>

</b:if>

<!-- Automatic read more script End -->

keterangan.

kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri

Thanks : Depernamana