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
4. Nah, kan ada kode seperti ini nih dibawah kode */ (misalnya).
====================
<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">
*/
body {
5. Buat menjadi satu baris. Jadi seperti ini.
background:#ffffff;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
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 {
7. Lakukan seperti pada langkah 5. Jadinya seperti ini.
color:#5588aa;
text-decoration:none;
}
a:visited {
color:#999999;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:underline;
}
a img {
border-width:0;
}
a:link {color:#5588aa; text-decoration:none;}
8. Cari lagi kode CSS lainnya. dan buat menjadi satu baris.
a:visited {color:#999999; text-decoration:none;}
a:hover {color:#cc6600; text-decoration:underline;}
a img {border-width:0;}
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 {
5. Lalu klik Compress-it!
color:#5588aa;
text-decoration:none;
}
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.
9 komentar:
walaupun saya bukan pengguna blogger tapi saya tertarik membacanya. Salam kenal.
Mantab, bahasanya mudah dimengerti.....ijin copy paste oom !!!
wah keyen uiiii...coba ahhh,bagi temen-temen yang pengen pasang iklan gratis pasang di sini http://e-blog-iklan.blogspot.com
ya good artikel cuyyy...
mantap gan bisa langsung dicoba nih kayanya...thanks bgt
Blog walking
Keren gan, thank's buat infonya ya...
Mau coba nih...
PERTAMAX..
hehehhe.,,
salam berkawand
sip sip sip
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)