Membuat Read More Otomatis dengan Thumbnail Blogger

Read moreMasih ada pengguna Blogger membuat Read More pada blog mereka, dengan cara menambahkan tag <span id=”fullpost”> .... </span> setiap menulis posting pada blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Sehingga muncul cara Membuat Read More Otomatis dengan Thumbnail Blogger, berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger secara singkat dan mudah :
  • Silahkan Login dan masuk pada Edit Template.
  • Tambahkan kode dibawah ini diatas kode </head> :
    <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>
    Ubah angka di atas sesuai kebutuhan :
    summary_noimg = 430; → Tinggi potongan artikel tanpa gambar.
    summary_img = 340; → Tinggi potongan artikel dengan gambar.
    img_thumb_height = 100; → Ukuran tinggi thumbnail.
    img_thumb_width = 120; → Ukuran lebar thumbnail
  • Selanjutnya cari kode <data:post.body/> kmeudian ganti dengan kode berikut dibawah ini :
    <b:if cond='data:blog.pageType != "item"'>
    <div style=' text-align: justify;' 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</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Membuat Read More Otomatis dengan Thumbnail Blogger
  1. Wah bagus nih saya dah coba pake yang ribet gak bisa2 kalo yang ini ok sip lah keren... thank's ya atas infonya oh..iya jangan lupa kunjungi blog saya ya di http://ediprivatedesign.blogspot.com/

    ReplyDelete
  2. Terimakasih telah berkunjung ke blog saya ....

    ReplyDelete
  3. Saya menggunakan kode script diatas untuk blog2 saya. Thumbnail akan berada dibawah Judul Postingan. Yang ingin saya tanyakan :

    - Bagaimana membuat thumbnail berada diatas judul postingan?

    ReplyDelete
  4. Coba pindah : <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> menjadi di atas : <div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>

    ReplyDelete
  5. wow..keren,soalnya kadang saya lupa ngasih read more pdahal artikelnya panjang..hehe
    Thx a lot :D

    ReplyDelete
  6. Thanks banget info nya.....dah di coba mantap dehh

    ReplyDelete
  7. Tolong kunjungi blog saya di http://ridhogenks.blogspot.com
    kalau ada yang kurang mohon bantuannya.
    Thx banget, infonya membantu

    ReplyDelete
  8. Thanks gan atas tipsnya......
    Kunjungi blog saya
    http://gah--naggh--x11.blogspot.com
    jgn lupa kment y!!!!!!!!!!!!!
    ThAnKs!!!!!!

    ReplyDelete
  9. @ Ghofari Naggh X11 : Terimakasih telah berkunjung di http://stylebloggertemplate.blogspot.com

    ReplyDelete
  10. ko malah ga keluar satu huruf pun yah?? salah dimana kira2 saya? mohon pencerahan

    ReplyDelete
  11. To --> Anggriawan Okky : Coba ulangi langkah yang dilakukan dan tetap sebelum melakukannya Back Up dulu template Anda ,.

    ReplyDelete
  12. saya suka template lamanya, template yang dipake sebelum yang sekarang dipake ini, kalo bisa kirim ke saya ya XML nya.. mail@andyonline.net

    terimakasih.. ^_^

    ReplyDelete
  13. Andy A.Fairussalam : Template yang ini : https://lh4.googleusercontent.com/_HR8egC6j8tg/TOXwmUyRo5I/AAAAAAAAAP4/4ULBeNEec_0/icon%20title%20sidebar.png , jika benar nanti saya kirim ke email Anda

    ReplyDelete
  14. blognya bagus mas tutorial yg saya cari ada semua. sayangnya blm banyak yg tau mas. bikin tutorial untuk joomla jg ga mas?

    ReplyDelete
  15. gan aku blum berhasil..aku pk template xml dr skincorner..apa emang gak cocok..kalo yg pake kode "fullpost" bs..mhon bantuan nya, krim ke aqi.ciles@gmail.com mksh sblum nya.. gan aku blum berhasil..aku pk template xml dr skincorner..apa emang gak cocok..kalo yg pake kode "fullpost" bs..mhon bantuan nya, krim ke aqi.ciles@gmail.com mksh sblum nya..

    ReplyDelete
  16. Caranya sukses bikin postingan blog saya jadi bentuk readmore. Terimakasih!

    ReplyDelete