earth

Guestbook

/* Iklan google ads */
Setelah Tabview Section, yang telah dibahas beberapa hari lalu, ilmu lain yang saya peroleh dari hasil ngoprek blog saudara adalah membuat auto readmore (readmore otomatis). Dibanding membuat readmore jenis ke-1 atau jenis ke-2, auto readmore ini lebih enak diterapkan, terutama bagi yang merasa kesulitan atau merasa ribet dalam melakukan pemenggalan paragraf untuk readmore, karena auto readmore ini akan melakukan pemenggalan sendiri secara otomatis.

Namun sayangnya auto readmore ini sangat tidak cocok untuk tulisan berbentuk puisi, lirik, atau dialog, karena pemenggalannya didasarkan pada jumlah karakter yang ditentukan sehingga tulisan-tulisan tersebut akan terlihat seperti sebuah artikel yang tersusun dalam satu paragraf.

Jika kamu tertarik dan ingin membuat auto readmore ini, ikuti langkah-langkah berikut:
  • Dari dasbor, pilih Rancangan - Edit HTML.
  • Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
  • Beri tanda checklist (centrang) pada Expand Template Widget.
  • Copy script berikut lalu letakkan (paste) di bawah kode </head> (antara </head> dan <body>):
    <script type='text/javascript'>
    summary_noimg = 700;
    summary_img = 500;
    img_thumb_height = 150;
    img_thumb_width = 200; 
    </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>
    
    Keterangan:
    summary_noimg = jumlah karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
    summary_img = jumlah karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
    img_thumb_height = tinggi gambar thumbnail (misal: 150px)
    img_thumb_width = lebar gambar thumbnail (misal: 200px)
  • Setelah itu carilah kode berikut:
    <p><data:post.body/></p>
    
  • Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>.
  • Jika ada 2 kode, pilih kode yang pertama (yang paling atas).
  • Ganti kode tersebut dengan kode ini:
    <!-- Awal Readmore -->
    <p>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    </p>
    <!-- Akhir Readmore -->
    
    Catatan:
    Jika mau, kamu dapat mengganti perataan tek sebelah kanan (right) dengan kiri (left), atau mengubah style huruf italic dengan normal. Kamu juga bisa mengganti tulisan Readmore... dengan kata lain atau dengan gambar (image).
  • Simpanlah hasil editing ini dan ucapkan alhamdulillah...

Lalu bagaimana jika ingin mengganti readmore jenis ke-1 atau jenis ke-2 dengan auto readmore ini? Tunggu saja bahasan berikutnya sob... Udah cape nulis nih, hehehe...

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    22 komentar

    Thnks kang atas tutornya kang .....
    kbtulan blog saya sudah dari dulu pakai auto readmore ....

    24 Juli 2011 pukul 08.28  

    makasih sob tutorialnya :) ada juga tentang auto read more, disini : http://acernoval.blogspot.com/2011/03/pada-posting-kali-ini-saya-akan.html
    semoga menjadi inspirasi buat sobat :D

    24 Juli 2011 pukul 08.40  

    Izin untuk dicoba yah boss, banner dan links udah nempel, jadi aku bisa selalu liat postingan baru si boss hehehe, salam kenal boss, terus terang, aku banyak belajar diblog si boss ini.

    25 Juli 2011 pukul 02.20  

    Mohon maaf boss kalau nanya nya disini, kotak2 dasbor yang terletak diatas blog aku kok jarang2 yah, gimana cara merapatkannya biar enak diliat mata, maklumlah boss masih newbe, lagian aku pakai templat asli bawaan blog,, soalnya asik sih ngeliatnya. mohon pencerahannya yah boss, makasih sebelumnya...

    25 Juli 2011 pukul 02.26  

    Saya ingin mencoba ini kang, nyari waktu luang nantinya.
    Aku save ya kang....makasih udah bagi ilmu

    25 Juli 2011 pukul 11.33  

    thx kang,,masuk kantong lagi ilmunya,,heheee,,

    25 Juli 2011 pukul 23.53  

    Terimakasih mas share nya bagus banget.. Salam sukses.

    8 Agustus 2011 pukul 11.49  

    wah... kok page ane jadi rusak, buat posting si oke, tapi halaman statis ane jadi aneh
    yah.. ane undo aja deh

    15 Agustus 2011 pukul 07.07  

    manatap juga..memang blogspot bnyk perubahan nih kang...

    7 Oktober 2011 pukul 23.13  

    berkunjung ke bloger INDONESIA
    ditunggu realbacknya...!!

    5 Desember 2011 pukul 23.16  

    Maaf.. numpang tanya. Gan, ... caranya buat auto readmore yang karakter yang ditampilkan ada enternya gimana gan.??? (masutnya nggak spasi semua. ada enternya juga. Seperti punya agan.) Tolong Dijawab.. saya sangat berharap atas jawaban agan. :D

    24 Desember 2011 pukul 14.24  

    gan, saya udah coba tapi kok ga berhasil ya? cuma copy paste ode diatas aja kan?

    20 Februari 2012 pukul 13.58  

    auto readmore success buat postingan.
    Tapi sayangnya auto readmore di page nya aga' bermasalah. di klik readmore pun ngga bisa menampilkan artikel penuh? gimana ya bang?

    17 April 2012 pukul 21.58  

    Ass.Alaikum

    Semoga ALLAH membalas segala kebaikan Anda sekeluarga... Saya sangat terbantu dengan Blog Anda,meskipun belum saya mencoba Namun saya Optimis bisa sukses dari pengetahuan yg anda telah paparkan. Harapanku besar semga saya dapat berhasil dari Ilmu dan pengetahuan Anda. Rasa terima kasih saya saya mengucapkan "Semoga ALLAH SWT menambahkan Nikmat Iman,Reski,pengetahuan,serta kesehatan pada Anda dan keluarga. Wassalam.

    21 Juli 2012 pukul 09.24  

    terimakasih pak, ini yang ana cariiiiiiii :D

    25 Juli 2012 pukul 15.28  

    keren gan..
    mencoba untuk membuatnya dan berhasil..
    terima kasih

    22 September 2012 pukul 17.48  

    Trimakasih Kang Eyes,
    Emmm... Yuk dicoba..!!! tq

    26 Desember 2012 pukul 18.51  

    Wah semuanya berhasil, tapi template ane tidak ada yang namanya
    gimana tuh kang??

    1 Februari 2013 pukul 09.45  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler