Membuat Readmore di Blog

Rabu, 06 Februari 2013

Membuat Readmore di Blog

Perintah Readmore (Baca Selengkapnya) sangat dibutuhkan oleh sebuah blog. Bayangkan bila tidak perintah readmore di suatu blog, bagian artikel di blog tersebut akan memanjang mengikuti isi artikel. Hal ini tentu sangat mengurangi nilai dari sisi keindahan blog. Pengunjung harus men-scroll lama kebawah untuk melihat artikel berikutnya. Karena pentingnya perintah readmore ini bagi blogger, makanya kali ini saya akan membahas bagaimana cara membuat perintah readmore di blog, khususnya blog yang berbasiskan blogger.

Langkah-langkah :

1. Masuk ke akun blogger Anda, kemudian masuk ke beranda blog yang ingin anda edit.

2. Kemudian klik Menu Template à Edit html

3. Kemudian tekan Ctrl + F dan cari kode </head>

4. Copy kode berikut, tepat dibawah 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>

5. Klik Simpan template, kemudian kasih tanda centang di kolom checkbox "Expand Template Widget"

6. Kemudian cari kode <data:post.body/>, hapus kode tersebut

7. Letakkan kode berikut, diatas kode ini <div class='post-header'> <div class='post-header-line-1'/> </div>

<b:if cond='data:blog.pageType == "item"'><data:post.body/><b:else/><b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");</script><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0D4c3GGufkH9IxHv69Gy60sHY0qBNs6lntiGvDwsHij817F5c_i_I3Rqipv5mxqo1kamzpT751WaT5BzlvYSJkWF66QyJTjEuoEEKxX6IVEmDwXehjSjhlza8ny5yGUJ0GdNywdp_DU/s74/readmore_thumb.gif'/></a></b:if></b:if>

Catatan : Anda dapat mengganti tombol readmore di blog anda dengan mengganti link (yg berwarna biru) pada script diatas.

8. Klik Simpan template bila langkah langkah yang Anda lakukan sudah benar maka tampilan blog anda akan seperti di bawah ini:

Sebenarnya banyak cara/script lain yang bisa Anda gunakan untuk membuat Readmore di blog berbasis blogger, namun tidak semuanya berhasil dan support pada setiap blog. Hal ini disebabkan karena template yang dipakai tidak support dengan script tersebut. Namun jangan khawatir, saya sudah mencoba cara diatas dan hasilnya berhasil 100% untuk berbagai macam template blogger baik dari template bawaan maupun template dari BTemplates. Selamat mencoba :)

Salam tutor,
Muhammad Munir

Pages

BIG INSPIRE

Total Pengunjung

5 TOP POST

Rabu, 06 Februari 2013