Subscribe:

Minggu, 03 Juli 2011

Cara Kompres Kode CSS dan JavaScript

kali ini saya akan membahas bagaimana Cara Kompres Kode CSS dan JavaScript
agar lebih ringkas dan nambah cepat loading Blog
Layanan Online yang dapat sobat pergunakan untuk Mengkompres adalah Online YUI Compressor

Cara menggunakan layanan ini juga tidak sulit, sobat tinggal memasukan semua kode JavaScript yang ingin di Kompres.
Ingat! tanpa memasukan tag

<script type='text/javascript'> ... </script> atau
<script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Berikut cara menggunakan Online YUI Compressor
Kunjungi Situs http://refresh-sf.com/yui/ jika sudah
Masukkan kode JavaScript dalam kotak Code
Pada pilihan Dropdown jenis file pada File Type pilih JS atau CSS yang akan di Kompres
Selanjutnya untuk opsi-opsi kosongkan.
Klik tombol Compress
Tunggu beberapa saat file di Kompres dan hasilnya akan ditampilkan tepat di bawah tombol Compress

Copy kode tersebut dan Paste di antara tag
<script type='text/javascript'> ... </script> atau
<script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam Blog sobat

Contoh :
JavaScript otomatis Read More

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

Catatan :
Kode yang berwarna biru merupakan kode yang dimasukkan dalam kotak Code pada Situs Online YUI Compressor

Hasilnya setelah di Kompres dan dimasukkan dalam full kode JavaScript Read More Otomatis

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

0 komentar:

Mohon Berkomentarlah dengan Baik dan Sopan
Maaf, jika ingin menyertakan url mohon di LINK saja ya (NO http://) atau komentar hanya sekedar promosi akan di hapus. Thank's ^_^

Posting Komentar