√ Cara Membuat Read More Dengan Gambar (Blogspot)

Cara Membuat Read More Dengan Gambar (Blogspot) – Read more adalah salah satu komponen dalam website yang sangat penting, dan biasanya terletak di beranda website. Fungsi dari readmore ini untuk menyingkat artikel yang terlalu panjang pada beranda.

Di wordpress, fitur ini biasanya langsung satu paket dengan tema. Namun untuk blogspot, kadang komponen ini ada, dan kadang tidak ada, tergantung template yang dipakai.

Di blogspot yang belum terdapat fitur readmore, membuatnya sangat mudah. Anda tinggal membuat kode pada edit html template.

Nah, pada artikel berikut, saya akan menjelaskan mengenai cara membuatnya lengkap dengan kode htmlnya. Yuk simak!.

Cara Membuat Read More Dengan Gambar (Blogspot)

• Masuk Ke Blogger
• Pilih Menu Template dan Klik Edit HTML Seperti pada Gambar

Template HTML blog

• Cari Kode </head> dengan cara klik CTRL+F
• Kemudian Copy/Paste kan Kode dibawah ini diatas Kode </head>.
  
  • <script type=’text/javascript’>
    var thumbnail_mode = “float” ;
    summary_noimg = 200;
    summary_img = 200;
    img_thumb_height = 100;
    img_thumb_width = 100;
    </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>
• Penting : Harus ada Jarak antara Kode di atas dengan kode </head> minimal 1 Enter. Apabila tidak ada jarak mungkin tidak akan muncul readmore nya.
• Setelah selesai, ada lagi yang harus anda lakukan, Yakni Cari kode yang bernama <data:post.body/>, Kemudian ganti dengan kode di bawah ini :
  • <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’>READ MORE – <data:post.title/></a></span>
    </b:if>
    <b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>
• Kemudian Klik Simpan Template
• Taraaaa, Coba reload beranda blogspot anda, maka akan muncul Tulisan Read More di setiap Artikel.
  
• Catatan:
  • img_thumb_height = 100; Merupakan tinggi thumbnail dalam piksel. Dan Dapat anda Rubah Sesuai Selera.
  • img_thumb_width = 100; Merupakan lebar thumbnail dalam piksel. Dan Dapat anda Rubah Sesuai Selera.
  • summary_noimg = 200; Untuk menentukan banyaknya karakter yang ingin anda tampilkan pada posting.
  • summary_img = 200; Untuk menentukan banyaknya karakter yang ingin anda tampilkan pada posting dengan thumbnail atau gambar.
  • Read More, silahkan anda ubah sesuai keinginan, misalnya; Baca Selengkapnya, lebih lengkap, dan lainnya.

• Cara Membuat Daftar Isi Blogspot Berdasarkan Label