Membuat Read More Otomatis

Halo Blogger! Setelah dulu saya pernah share cara Membuat Read More Simple alias menggunakan kode more atau Insert Jump Break dari Blogger. Sekarang saya mau share yang otomatis nih. 

Manfaatnya? Dengan adanya Read More, akan membuat Home Page lebih rapi, serta bisa membuat page view meningkat. 

Kok Bisa? Soalnya Read More akan memotong Sebagian Artikel anda dan Nantinya bagi Reade yang penasaran akan lebih tertarik Klik dan membuat Page View Naik!

Bedanya sama Tutorial Yang Pertama? Lebih simple dan tidak usah repot-repot update manual. Tapi harus masuk ke Liang Kode dulu. 

Bagaimana caranya? Check It Out!

• Masuk ke Blogger Akun.
• Klik Template dan Edit HTML
• Centang Expand Widget
• Cari kode </head>.
• Lalu letakkan kode berikut diatasnya

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

• Cari kode  <data:post.body/>
• Blok kode <data:post.body/> dan ganti dengan salah satu kode berikut.

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

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

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

• Dan Klik Save (Ada baiknya jika di Preview terlebih dahulu)

Note:
var thumbnail_mode = "float";  (menentukan letak thumbnail berada di (float) kiri atau ganti dengan (no-float) jika ingin thumbnail berada di kanan
summary_noimg = 250; (menentukan berapa karakter yang akan ditampilkan di posting tanpa thumbnail)
summary_img = 250; (menentukan berapa karakter yang akan ditampilkan di posting dengan thumbnail)
img_thumb_height = 120; (Tinggi thumbnail)
img_thumb_width = 120; (Lebar thumbnail)

Nah Bagaimana? Baca dulu sebelum mencoba biar bagus hasilnya. Terus Sebelum Save jangan Lupa Klik Preview.