
Javascript dewasa ini sangat digemari oleh para pembuat web, dimana mereka selalu beralasan bahwa script java mampu memberikan sebuah tampilan yang sangat baik dalam hal fitur. Hal ini cukup beralasan, mengingat tampilan dengan menggunakan sebuah kode HTML saja dirasa sangat kaku.
Ditambah lagi dengan perkembangan fitur JQuery atau pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini sendiri dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.
Kode-kode yang dibangun sangat bersifat fleksible dan berkesan elegan pada tampilannya. Namun kode-kode tersebut banyak dikeluhkan oleh para webdesigner ataupun para blogger, karena bisa terlalu atau sangat panjang-hal ini tentu berdampak pada masa loading sebuah web atau blog yang didukung dengan server kecil.
Dari penjelasan diatas sudah barang tentu yang k'ian maksudkan adalah pola kode script java ini sendiri cukup memakan banyak waktu pada saat loading, untuk itulah ada 2 alternatif cara mengatasinya,
1. Dengan Pola Eksternal Link, pola ini dimaksudkan untuk memisahkan antara kode yang kita punya dengan sebuah layanan yang mampu mendukung sebuah link dari luar. salah satunya adalah dengan menggunakan Google sites (klik disini untuk cara pembuatan google sites). dari proses yang sudah kita lihat tadi, berikut cara penerapannya pada blog atau website kita (untuk lebih jelas klik disini).
Langkah pertama pilih sebuah kode Java yang ingin dikompress, lihat contoh :
Cara kedua mungkin lebih mudah dari yang pertama namun hasilnya tidak sebaik pada teori yang pertama. berikut cara penggunaannya :
Kemudian klik pada link berikut : http://javascriptcompressor.com/, dan pastekan semua kode yang sudah kita copy tadi pada kolom pertama, lihat gambar:

Klik tombol "Compress" dan akan muncul kode hasil kompressan tadi pada kolom kedua, lihat gambar :
Copy kode hasil Compressan tadi, dan letakkan kembali pada kode awal yang kita ambil tadi diantara <script type='text/javascript'> dan </script>, sehingga hasilnya akan jadi seperti ini :
Ditambah lagi dengan perkembangan fitur JQuery atau pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini sendiri dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.
Kode-kode yang dibangun sangat bersifat fleksible dan berkesan elegan pada tampilannya. Namun kode-kode tersebut banyak dikeluhkan oleh para webdesigner ataupun para blogger, karena bisa terlalu atau sangat panjang-hal ini tentu berdampak pada masa loading sebuah web atau blog yang didukung dengan server kecil.
Dari penjelasan diatas sudah barang tentu yang k'ian maksudkan adalah pola kode script java ini sendiri cukup memakan banyak waktu pada saat loading, untuk itulah ada 2 alternatif cara mengatasinya,
1. Dengan Pola Eksternal Link, pola ini dimaksudkan untuk memisahkan antara kode yang kita punya dengan sebuah layanan yang mampu mendukung sebuah link dari luar. salah satunya adalah dengan menggunakan Google sites (klik disini untuk cara pembuatan google sites). dari proses yang sudah kita lihat tadi, berikut cara penerapannya pada blog atau website kita (untuk lebih jelas klik disini).
Langkah pertama pilih sebuah kode Java yang ingin dikompress, lihat contoh :
<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 5px 5px 0px; text-align:justify; "><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>
- Sekarang cut / potong semua kode yang berwarna merah diatas, ingat hanya yang berwarna merah. Karena kode yang berwarna hitam adalah induk atau penanda dari kode tersebut (setiap kode java sama).
- Setelah dicut/ potong, simpan didalam file "Notepad" pada komputer kamu, kemudian simpan dengan menggunakan nama yang sesuai dengan fungsi kode tersebut. misal kode yang kita gunakan adalah kode untuk "readmore" atau "Baca Selengkapnya" maka file yang kita simpan bisa kita buat dengan nama : Readmore.js atau bacaselengkapnya.js (Pada setiap file yang disimpan harus menggunakan penanda untuk kode itu sendiri, pada javascript akhiran yang digunakan adalah .js, kemudian pada kode CSS menggunakan .css).
- Jika sudah klik situs google sites yang sudah kamu buat tadi, kalau belum(klik disini untuk cara pembuatan google sites). dari proses yang sudah kita lihat tadi, berikut cara penerapannya pada blog atau website kita (untuk lebih jelas klik disini). Jika sebuah kode link eksternalnya sudah terbuat, kita cukup memindahkan saja kedalam hostingan blog atau website kita.
Cara kedua mungkin lebih mudah dari yang pertama namun hasilnya tidak sebaik pada teori yang pertama. berikut cara penggunaannya :
<script type='text/javascript'>Sama seperti cara yang pertama yakni copy semua kode yang berwarna merah ( Ingat hanya yang berwarna merah ).
//<![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 5px 5px 0px; text-align:justify; "><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>
Kemudian klik pada link berikut : http://javascriptcompressor.com/, dan pastekan semua kode yang sudah kita copy tadi pada kolom pertama, lihat gambar:

Klik tombol "Compress" dan akan muncul kode hasil kompressan tadi pada kolom kedua, lihat gambar :

<script type='text/javascript'>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 5px 5px 0px; text-align:justify; "><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>Sangat mudahkan, mudah-mudahan hal ini bisa membantu sobat dalam mengatasi loading blog yang berat.
Related Post :
trik
- Cara Membuat Kolom Widget Sejajar (Sama Tinggi)
- CSS3 : Efek Transisi Rotasi dengan simple dan sederhana
- Cara pasang gambar pada judul Gadget / Widget Blog
- Maaf teman, k'ian tidak bisa membalas Blogwalking saat ini
- Program Adsense Chitika dalam blog berbahasa Indonesia
- Setting tampilan CSS agar sama diseluruh Browser dengan CSS reset
- Cara buat kolom text magazine dengan CSS3
- Supaya kinerja situs atau blog lebih cepat
- Mengenal kode Box Shadow dengan CSS3
- Simple Tooltips dengan CSS & Jquery trik
- Efek dan style untuk Gambar pada Blogspot
- Setting domain blogspot dengan script Mobile blog otomatis
- Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)
- modification of the text with CSS 3 Text shadow
- Posting widget kategori tertentu dengan tambahan Thumbnails
- Show All total post dan Comment post pada blog
tutorial%20blog
- Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)
- Cara setting domain Blogspot ke dalam versi Mobile Blogspot
- Mengenal penggunaan button list pada template Blog
- Update status Facebook kamu dengan Live Stream widget
- Cara menempatkan Text didalam gambar
- Widget Recent Post dengan Gambar
- Format Comment blog Baru dengan Facebook comment
- Cara Pasang icon "Like this" Facebook di Blog Kamu
- Cara pasang jQuery Scroll to Top Button Control v1.1
- Memahami Arti & Fungsi Logika pada kode HTML
- New Menu Navigasi Ubah tampilan Blog jadi lebih elegant
- Cara Pasang Foto kamu menjadi Background di Facebook
- External Link, Compres CSS code jadi lebih baik pada Blog
- Modifikasi tampilan Image dengan efek shadow (bayangan)
- Efek zoom pada gambar dengan JQuery Magnify
Duh gak ngarti,maklum gaptek,nice info..salam love,peace and gaul ...Replay