• Posted by : ALFIAN AJI WAHYUDI Sabtu, 18 Mei 2013



    Pernahkah anda melihat sebuah situs yang artikelnya seperti diringkas, kemudian diisi dengan keterangan read more/selengkapnya? Terlihat lebih menarik bukan ?
    Ada beberapa manfaat kenapa perlu adanya ringkasan seperti ini:
    Pertama, artikel dan tampilan blog akan terlihat lebih menarik. Ini penting agar pengunjung memberikan kesan positif dan beranggapan bahwa pemilik blog adalah seorang blogger yang profesional dan layak untuk selalau dikunjungi.
    Kedua, menghemat ruang. Ketika kita memberikan sejumlah ruang di halaman utama blog kita, kemudian kita membatasi jumlah postingan yang bisa dimunculkan di halaman tersebut, maka sangat penting untuk meringkas masing-masing artikel. Kenapa ? Agar pembaca tidak harus membaca satu persatu artikel untuk mengetahui semua artikel yang ada di halaman utama. Sehingga ini bisa memberikan kemudahan bagi pengunjung, karena tidak harus repot-repot melihat sampai jauh ke bawah untuk mengetahui artikel apa saja yang ditulis pemilik blog di halaman utama.
    Bagaimana cara membuat read more secara otomatis ?
    Langkah Pertama
    Masuk ke blog anda
    Langkah Kedua
    Klik templete
    Langkah Ketiga
    Edit HTML (jangan lupa centang Expand Widget Templete)
    Langkah Keempat
    Temukan (Ctrl + F) tag </head>, setelah itu letakan kode script berikut tepat diatasnya :



    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 150;
    summary_img = 150;
    img_thumb_height = 100;
    img_thumb_width = 120;
    </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by Anhvo
    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    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>


    Langkah Kelima A
    Membuat read more bentuk gambar


    Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.

    <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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png'/></a></a></span>
    <b:else/>
    <data:post.body/>
    </b:if>


    Langkah Kelima B
    Membuat read more otomatis



    Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.

    <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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
    <b:else/>
    <data:post.body/>
    </b:if>

    Langkah Keenam
    Kemudian save dan lihat hasilnya!

    NOTE :
    Untuk yang terlanjur menggunakan read more secara manual, tinggal hapus kode:

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>

    Demikianlah sedikit tips cara membuat read more secara otomatis baik menggunakan gambar atau pun secara otomatis dengan tulisan. Semoga tips ini bisa bermanfaat buat anda.

    Salam


    0 komentar

  • SUMMER WARS サマーウォーズ

    - Copyright © 2009-2013 ALFIAN AJI WAHYUDI - Unbreakable Machine Doll - Powered by Blogger - Designed by johanes djogan -

    y