-->

Membuat Read More Otomatis dengan Thumbnail Blogger

Membuat Read More Otomatis dengan Javascript Thumbnail Blogger
read more
Masih 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>

Anda mungkin menyukai postingan ini

18 komentar

  1. edi prasetiyo
    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/
  2. Manuk Merak
    Terimakasih telah berkunjung ke blog saya ....
  3. New Free Blogger Template Everyday
    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?
  4. Manuk Merak
    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>
  5. Author
    wow..keren,soalnya kadang saya lupa ngasih read more pdahal artikelnya panjang..hehe
    Thx a lot :D
  6. Unknown
    Thanks banget info nya.....dah di coba mantap dehh
  7. Anonim
    Tolong kunjungi blog saya di http://ridhogenks.blogspot.com
    kalau ada yang kurang mohon bantuannya.
    Thx banget, infonya membantu
  8. Unknown
    Thanks gan atas tipsnya......
    Kunjungi blog saya
    http://gah--naggh--x11.blogspot.com
    jgn lupa kment y!!!!!!!!!!!!!
    ThAnKs!!!!!!
  9. Manuk Merak
    @ Ghofari Naggh X11 : Terimakasih telah berkunjung di http://stylebloggertemplate.blogspot.com
  10. Mas Warok
    Good for u blog template !!
  11. Unknown
    ko malah ga keluar satu huruf pun yah?? salah dimana kira2 saya? mohon pencerahan
  12. Manuk Merak
    To --> Anggriawan Okky : Coba ulangi langkah yang dilakukan dan tetap sebelum melakukannya Back Up dulu template Anda ,.
  13. Andi AF Studio
    saya suka template lamanya, template yang dipake sebelum yang sekarang dipake ini, kalo bisa kirim ke saya ya XML nya.. mail@andyonline.net

    terimakasih.. ^_^
  14. Manuk Merak
    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
  15. Peace Keeper
    blognya bagus mas tutorial yg saya cari ada semua. sayangnya blm banyak yg tau mas. bikin tutorial untuk joomla jg ga mas?
  16. Unknown
    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..
  17. Deajushou
    Caranya sukses bikin postingan blog saya jadi bentuk readmore. Terimakasih!
    • Manuk Merak
      Semangat blogging ......
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>