24 Okt 2010

Membuat Auto Read More pada Blog


Sebelum mengawali tulisan ini, mungkin topik posting kali ini tidak ada apa-apanya bagi para master blogger, tetapi mungkin bagi blogger pemula, posting ini rasanya patut untuk dibaca dan diterapkan di blognya.
OK, kita mulai. Posting kali ini adalah mengenai cara untuk mempersingkat tampilan content posting kita di halaman blog. Hal ini mutlak dibutuhkan untuk mempersingkat waktu loading blog kita. Mungkin kita sering mengalami kejadian sewaktu membuka blog milik orang lain, kita membutuhkan waktu lama untuk loading halaman blognya. Tentu bukan sesuatu yang nyaman bukan. Apalagi kalau koneksi internet kita pas-pasan, bisa bikin stress. Nah, apa yang bisa kita lakukan untuk mempersingkat waktu loading halaman blog tersebut? Banyak cara, salah satunya adalah dengan mempersingkat tampilan content posting kita. Tentu bukan dengan cara memposting sesuatu dengan sesingkat-singkatnya, tapi kita akan memotong content posting kita, sehingga hanya sebagian awalnya saja yang akan muncul di halaman blog kita. Dengan mempersingkat waktu loading blog kita, kita mengharapkan agar pengunjung bisa nyaman mengunjungi blog kita dan berharap mereka bersedia mengunjungi blog kita lagi, yang secara otomatis akan menaikkan traffic blog kita. Menarik bukan? Lalu bagaimana caranya? Berikut ulasannya:

1. Login ke blogger untuk mengedit blog kita.
2. Klik Rancangan.
3. Pilih tab Edit HTML.
4. Beri tanda centang di kotak kecil sebelah kiri Expand Template Widget.
5. Cari kode </head>
6. Kemudian copy paste kode Auto Read More berikut ini sebelum </head> kode :

<script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
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>


Pastikan kode di atas di paste sebelum kode </head>

7. Jika sudah, masih di Edit HTML, cari lagi kode <data:post.body/>
8. Jika sudah ditemukan, maka ganti kode tersebut dengan kode berikut:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<div><a expr:href='data:post.url'>Read the rest of this entry &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Pastikan kode <data:post.body/> sudah direplace dengan kode di atas.
Selesai. Kemudian klik save template.
Jika semua kode sudah dimasukkan dengan benar, maka hasilnya dapat langsung anda lihat.

Pada auto read more ini, kita dapat mengatur berapa banyak karakter content posting blog kita yang ditampilkan, sesuka kita. Berikut keterangannya:
Pada kode yang kita copy pastekan pertama kali tadi, kita akan menemui kode seperti ini:

summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200; 

- angka 800 menunjukkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail.
- angka 650 menunjukkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail
- angka 150  menunjukkan thumbnail tinggi dalam piksel  
- angka 200 menunjukkan thumbnail lebar dalam piksel
kita dapat mengganti angka-angka tersebut sesuka hati kita sampai kita menemukan ukuran berapakah yang cocok untuk blog kita. 
Selain untuk mempersingkat waktu loading, trik ini juga terbukti bisa mempercantik tampilan blog kita. Dengan semakin singkatnya waktu loading blog kita dan semakin cantiknya tampilan blog kita, maka diharapkan akan semakin banyak pula pengunjung blog kita, yang tentunya akan semakin menaikkan traffic pengunjung blog kita. 
Demikian sedikit ulasan tentang Auto Read More. Semoga bermanfaat. Sukses!
Hello! If you have not signed, subscribe to our RSS feed to receive our email updates, or follow us on Twitter.
Name: Email:

0 Comments:

Posting Komentar