Cara Mengompres CSS

Kabarnya Google memberikan nilai lebih untuk blog yang loadingnya cepat. Nah, salah satu cara mempercepat loading blog adalah dengan mengkompres CSS.

Caranya begini.

1. Login ke Blogger, lalu tujulah Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode yang seperti ini.

/* Variable definitions
====================
<Variable name="textcolor" description="Text Color" type="color"
default="#abc" value="#aabbcc">
<Variable name="pagetitle" description="Blog Title Color" type="color"
default="#8dd" value="#88dddd">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#9c7" value="#99cc77">
<Variable name="posttitle" description="Post Title Color" type="color"
default="#9c7" value="#99cc77">
<Variable name="linkcolor" description="Link Color" type="color"
default="#da7" value="#ddaa77">
<Variable name="vlinkcolor" description="Visited Link Color" type="color"
default="#799" value="#779999">
<Variable name="dateheadercolor" description="Date Header Color"
type="color" default="#7bc" value="#77bbcc">
<Variable name="sidebartitle" description="Sidebar Title Color" type="color"
default="#7bc" value="#77bbcc">
<Variable name="borderColor" description="Border Color"
type="color" default="#567" value="#556677">
<Variable name="bodyfont" description="Text Font" type="font"
default="normal normal 100% Verdana,Arial,Sans-Serif" value="normal normal 100% Verdana,Arial,Sans-Serif">
<Variable name="pagetitlefont" description="Blog Title Font" type="font"
default="normal bold 250% Helvetica,Arial,Sans-serif" value="normal bold 250% Helvetica,Arial,Sans-serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font" default="normal normal 100% Helvetica, Arial, Sans-serif" value="normal normal 100% Helvetica, Arial, Sans-serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal bold 100% Verdana, Sans-serif" value="normal bold 100% Verdana, Sans-serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font"
default="normal bold 95% Verdana,Sans-serif" value="normal bold 95% Verdana,Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

4. Nah, kan ada kode seperti ini nih dibawah kode */ (misalnya).

body {
background:#ffffff;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Buat menjadi satu baris. Jadi seperti ini.

body {background:#ffffff; margin:0; color:#333333; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;}

6. Nah, lalu cari lagi kode CSS lainnya. Misalnya:

a:link {
color:#5588aa;
text-decoration:none;
}
a:visited {
color:#999999;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:underline;
}
a img {
border-width:0;
}

7. Lakukan seperti pada langkah 5. Jadinya seperti ini.

a:link {color:#5588aa; text-decoration:none;}
a:visited {color:#999999; text-decoration:none;}
a:hover {color:#cc6600; text-decoration:underline;}
a img {border-width:0;}

8. Cari lagi kode CSS lainnya. dan buat menjadi satu baris.

9. Simpan.

Nah, kalau cara yang tadi kan, bikin capek. Nah, ada cara yang lebih mudah lagi. Yaitu menggunakan tool pengompres CSS.

Kenapa mesti pake cara yang susah kalau ada yang lebih mudah? Capek deh...

Nah, cara mengkompres CSS dengan bantuan tool seperti berikut.

1. Kunjungi situs www.cssdrive.com/index.php/main/csscompressor

2. Klik link Advanced Mode

3. Pilih pilihan yang tersedia. Seperti gambar dibawah ini misalnya.

4. Copy kode CSS di template anda lalu paste di kotak yang tersedia. Kode CSS itu yang berbentuk seperti ini.

a:link {
color:#5588aa;
text-decoration:none;
}

5. Lalu klik Compress-it!

6. Akan keluar hasilnya. Copy kode CSS yang sudah dikompres lalu masukkan ke template blog anda.

7. Lalu simpan

Oh, ya. Saya menyarankan untuk membackup template sebelum mengompres CSS anda. Untuk menghindari hal-hal yang tidak diinginkan.

Saya harap anda mengerti cara mengompres CSS. Apabila ada yang belum dimengerti, jangan malu dan jangan ragu-ragu untuk berkomentar dibawah. Terima kasih dan semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya