Cara Membuat Read more pada Blog (Blogspot)

 Tutorial blogspot

cara membuat read more pada blogCara membuat read more pada blog khususnya blogspot dapat dilakukan dengan memodifikasi template yang digunakan. Cukup hanya dengan sekali modifikasi maka read more akan terpasang otomatis pada setiap postingan yang ada di blog.

Sebenarnya banyak template yang bawaannya sudah menyediakan read more, akan tetapi bagi anda yang sudah nyaman menggunakan satu template dan malas untuk mengganti-ganti template lain tidak perlu khawatir, karena template anda saat ini juga bisa kok dimodifikasi untuk menampilkan read more.

Cukup hanya dengan mengikuti langkah-langkah ini maka template blogspot anda akan langsung support read more plus thumbnail.

Cara membuat read more pada blog (Blogspot)

  1. Masuk ke Dashboard > Template > Edit HTML > Proceed
  2. Jangan lupa untuk memberi tanda centang pada bagian Expand Widget Templates.
  3. Copy paste kode ini (hanya bisa menggunakan chrome), dan letakkan tepat di bawah </head> (gunakan CTRL+F).
    <!-- Auto read more plus thumbnail Start by http://kaplik.com -->
    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 128;
    img_thumb_width = 128;
    </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(thumbnail_mode == "yes") {
    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>
    <!-- auto read more plus thumbnail End by http://kaplik.com -->

    Kode yang berwarna biru merupakan mode pengaturan pilihan, jika YES untuk menampilkan read more dengan thumbnail, jika NO maka tanpa thumbnail. Sedangkan yang berwarna merah adalah jumlah karakter teks dan ukuran thumbnail, untuk summary_noimg= jumlah karakter teks tanpa thumbnail, summary_img= jumlah karakter teks dengan thumbnail, sedangkan img_thumb_height dan img_thumb_width adalah ukuran thumbnail (dalam pixel). Ubahlah sesuai dengan keinginan.

  4.  Selanjutnya cari kode <data:post.body/> (gunakan CTRL+F), dan ubah kode tersebut dengan kode dibawah ini,
    <!-- Auto read more plus thumbnail Start by http://kaplik.com -->
    <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'>Read More >></a>
    </b:if>
    </b:if>
    <!-- Auto read more plus thumbnail End by http://kaplik.com -->

    Jika menemukan dua buah kode <data:post.body/> pada template, ubah yang bagian pertama dari urutan teratas.

  5. Preview terlebih dahulu, jika sudah tidak ada error lakukan Save template.

Setelah selesai mengikuti langkah-langkah cara membuat read more pada blog (blogspot), sekarang saatnya menambahkan navigasi breadcrumbs pada blog agar template lebih SEO friendly tentunya.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

One Response

Leave a Reply