Kamis, 31 Desember 2009

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.

Buzz It

Artikel Menarik Lainnya



9 komentar:

ardiawan mengatakan...

walaupun saya bukan pengguna blogger tapi saya tertarik membacanya. Salam kenal.

http://www.masalahdansolusi.co.cc mengatakan...

Mantab, bahasanya mudah dimengerti.....ijin copy paste oom !!!

moko hecker mengatakan...

wah keyen uiiii...coba ahhh,bagi temen-temen yang pengen pasang iklan gratis pasang di sini http://e-blog-iklan.blogspot.com

http://e-blog-iklan.blogspot.com mengatakan...

ya good artikel cuyyy...

voox mengatakan...

mantap gan bisa langsung dicoba nih kayanya...thanks bgt

Lutfi farid mengatakan...

Blog walking
Keren gan, thank's buat infonya ya...
Mau coba nih...

anggar mengatakan...

PERTAMAX..
hehehhe.,,
salam berkawand

Grup IT Bersama mengatakan...

sip sip sip

eko tri mengatakan...

siip deh soobb : )

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.