Auto Red More

     Sahabat Blogger, posting kali ini saya akan membahas tentang “Jump Breaks” atau yang sering kita dengar yaitu Read More, apa itu Read More? Read More yang mempunyai fungsi untuk memotong tulisan di halaman depan (home page) atau lebih populer dengan sebutan "Rungsi Read More". 

     Ini artinya, untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read More" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun. Oke tak perlu panjang lebar lagi sekarang mari kita lihat langkah-langkah membuat Read More Otomatis di bog anda:

1. Seperti biasa langkah pertama adalah Sahabat Blogger Log in ke Blog dengan ID sahabat Blogger.
2. KLik Rancangan / Template
3. KLik Edit HtmL
4. Cari Kode </head>
5. Dan Letakan kode di bawah ini Di atas kode </head>

<scripta type='text/javascript'>

var summary_noimg    = 300,

    summary_img      = 300,

    img_thumb_height = 80,

    img_thumb_width  = 90;

</script>

<script type='text/javascript'>

//<![CDATA[

/**

 * =======================================================================

 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo

 * =======================================================================

 */

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 alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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. Simpan Template.
7. Setelah Anda simpan Template Lalu centang kembali Expand Template widget Dan Cari Kode di Bawah ini:

<data:post.body/>

Setelah ketemu Anda Hapus kode Tersebut dan Ganti dengan Kode ini:

<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 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'> READMORE....!! </a>

</b:if>

</b:if>

7. Sebelum selesai dan di simpan Sahabat bisa ganti tulisan "Read More" dengan apa yang di kehendaki Sahabat, misalnya: Baca Selengkapnya, Full Read dan lain sebagainnya setelah itu Sahabt Klik simpan.

Selamat mencoba, Sahabat Blogger!

Posted in: Tutorial Blog