Kamis, 26 April 2012

Kompresi CSS dengan Compressor Tool Online



Diperlukan pengetahuan dan pengalaman cukup untuk dapat mengedit kode CSS secara manual. Misalnya, kode Header Wrapper secara standar tertulis seperti ini

#header-wrapper {
background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Apa yang perlu anda edit?
Perhatikan code CSS tersebut dengan hasil editing di bawah ini

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg)
no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Kode tersebut menjadi lebih simpel dan ringan saat diloading. Bagi anda yang masih awam dengan kode CSS seperti ini, pasti masih bingung (jangan mengira saya tidak..)

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:
-CSS Drive Gallery
-CSS Compressor
-Online CSS Optimiser/Optimizer
-Minify CSS
-CSSTidy Online

Bisa juga anda mencarinya sendiri di Search Engine dengan keyword "css compression tool".

Langkah-langkahnya:
a. Copy semua aturan CSS dari template HTML/XML.
b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lain sebagainya.
c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan. perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman. d. Download backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bagian dimana anda mengkopi aturan CSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.

Semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.
Pilih jenis/opsi kompresi 'standard' atau sejenisnya pada tool kompresi CSS yang anda gunakan.

Semoga bermanfaat dan Good luck.

1 komentar:

Unknown mengatakan...

Terma Kasih ...:)

laptop
xiaomi