Membuat Read More di Blogger

Read more adalah untuk menghemat postingan kita agar tidak terlalu panjang dan untuk membuat halaman depan terlihat lebih menarik. Sudah banyak pencarian di google yang menjelaskan cara membuat read more, tetapi mungkin saja masih ada yang kurang di mengerti untuk para newbie.  Nah di sini saya akan menjelaskan secara detail bagaimana cara membuat read more.

Ikutilah langkah-langkah berikut ini :

    1. Sebelum memulai, login dulu ke blogger.
    2. Setelah Anda masuk, pilih rancangan
      1. Lalu pilih Edit HTML
      2. Sebelum mengedit text html tersebut donwload template agar jika terjadi kesalahan saat mengedit Anda bisa mengembalikan text html tersebut.
      3. Lalu centang Expand Template Widget
      4. Sekarang kita mulai mengedit html, cari </head> dengan menggukana ctrl+f.
      5. Masukan script di bawah ini di atas kode </head> seperti gambar di atas.
      6. <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[
        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>

      7. Lalu cari dan ganti <data:post.body/> dengan script di bawah ini :
      8. Jika Anda menemukan ada 2 <data:post.body/> pilih dan ganti yang pertama ada temui.
      9. <b:if cond=’data:blog.pageType != “item”‘>
        <div expr:id='”summary” + data:post.id’><data:post.body/></div>
        <script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</script>
        <span class=’rmlink’ style=’float:left’><a expr:href=’data:post.url’>READMORE – <data:post.title/></a></span>
        </b:if>
        <b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>
      10. Anda bisa mengganti Read More dengan kata-kata sesuai yang Anda mau dengan mengganti script di bawah ini yang ada di kotak merah.
      11. Jika sudah simpan template.

        Keterangan:
        Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

        1. var thumbnail_mode = “float”;: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
        2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
        3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
        4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
        5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;


Advertisements

Komentar Anda

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s