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 :
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 :
<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.
Duh gak ngarti,maklum gaptek,nice info..salam love,peace and gaul ...Replay