Cara Membuat Read More atau Baca Selengkapnya pada Blog

Cara Membuat Read More otomatis atau Baca Selengkapnya pada Blog. Read more atau baca selengkapnya bertujuan untuk menghemat tampilan postingan pada halaman beranda (home) web/blog, hingga tidak memanjang ke bawah. Apalagi jika jumlah postingan yang ditampilkan cukup panjang kali lebar dengan jumlah over size, dijamin akan capek deh menggulung roll mouse sampai jari
telunjuk pada kapalan.

Pada pembahasan oprek blog-ngesot kali ini akan mengulas cara membuat read more otomatis, tanpa menggunakan javascript eksternal. Yakni dengan cara sedikit melakukan modifikasi pada kode html di template, maka secara otomatis tampilan utama (kolom postingan) blog sudah terpasang fasilitasi ini. Okok deh lanjut ke tajuk utama ORd Channel, untuk contoh jenis read more yang dimaksud desuai dengan tampilan blog ini. Langkah pembuatan sebagai berikut.

1. Jangan lupa masuk ke akun blogger terlebih dulu.

2. Pilih Rancangan, klik Edit HTML. Pada kotak kecil Expand Template Widget diberi tanda centang. Sekedar catatan, sebelum melakukan proses modifikasi ada baiknya memback-up template terlebih dulu, dengan cara di download dan simpan rapi di komputer Anda. Bertujuan agar ketika terjadi kegagalan maka bisa kembali ke template semula.

3. Sambil menunggu Anda mendownload template, saya nyalakan dulu sebatang rokok putih rendah nikotin dan menyeruput kopi mix tanpa ampas. Bagaimana, sudah selesai mendownloadnya? Baiklah saya lanjutkan. Cari kode  </head>

Untuk mempercepat proses pencarian, gunakan kotak pencarian, dengan cara menekan tuts Ctrl+F. Taruh kode di bawah ini, tepat di atas atau sebelum 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>

4. Selanjutnya cari kode <data:post.body/> lalu hapus kode tersebut, dan gantikan dengan kode di bawah ini. Jika ada 2 kode <data:post.body/> maka yang dihapus adalah kode yang pertama.

<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'>baca selengkapnya >> <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Jika semua langkah telah dilakukan dengan benar, selanjutnya adalah melakukan penyimpanan template. Yakni dengan menekan tombol Simpan Template. Dengan demikian berarti proses pembuatan read more sudah selesai, silahkan cek hasilnya.

Keterangan :
(a) summary_noimg = 200; adalah angka menunjukkan jumlah karaktek (huruf) yang tampil dalam postingan tanpa gambar, ketika suatu halaman belum dibuka sepenuhnya. Sedangkan summary_img = 200; adalah jumlah karaktek dengan artikel bergambar.
(b) img_thumb_height = 100; adalah tinggi gambar yang ditampilkan, sedangkan img_thumb_width = 100; adalah lebar gambar.
Nah kesemua angka-angka tersebut bisa diatur sendiri sesuai selera, kondisi tersebut adalah tampilan pada saat halaman posting masih dalam posisi read more. Atau dengan kata lain, ketika belum membuka satu halaman penuh pada suatu postingan.
(c) baca selengkapnya >> adalah keterangan read more, bisa diganti dengan bahasa kesukaan Anda. Misalnya dengan kata-kata read more, atau monggo diklik, atau selengkapnya klik disini, atau ...... terserah deh.

Artikel ini berjudul Cara Membuat Read More atau Baca Selengkapnya pada Blog, dengan url http://moo-no.blogspot.com/2011/02/cara-membuat-read-more-atau-baca.html
Klik di sini untuk melihat daftar isi blog ini.

Baca Juga Artikel Yang Ini ▼

Ingin mendapat artikel seperti ini langsung ke Email anda??
Masukan alamat email anda untuk berlangganan.. GRATIS!!