Read More Otomatis pada Template Blogger versi VGM VALLEN

Posted by Vgm Vallent NSD , under

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Jngan LUpa pada Template anda ke EDIT HTML lalu lanjutkan setelah itu jangan Lupa sbelum membuat READMORE OTOMATIS anda Silang

Expand Template Widget  setelah itu masukan html Seperti dibawah ini 

Letakan kode di bawah ini Di atas kode </head>

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

Cari KOde DIbawah ini :: dengan menekan CTRL + F

<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. Klik SIMPAN.