Gudang Ilmu

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.
KLIK DISINI UNTUK BACA SELENGKAPNYA

Abdurrahman Wahid/Gusdur Meninggal Dunia

Innalilahi Wa Inna Ilaihi Rajiun...

Telah meninggal dunia mantan Presiden Indonesia Abdurrahman Wahid atau yang lebih dikenal dengan Gusdur.

Semoga amal ibadahnya diterima di sisi Allah SWT.

Amin....
KLIK DISINI UNTUK BACA SELENGKAPNYA

Membuat Kode HTML untuk Sumber Artikel

Waduh, lagi-lagi bingung nih mau ngasih judul apa... Tapi mungkin bisa dijelaskan lewat gambar screenshoot dibawah ini.

Dengan gambar diatas, sudah jelas kan? Coba scroll ke bawah. Lebih tepatnya dibawah Artikel Menarik Lainnya. Nah, anda akan menemui kode seperti gambar diatas.

Nah, kode tersebut berguna untuk pengunjung yang ingin mengcopas artikel kita tetapi tetap ingin menuliskan sumbernya. Sudah siap? Lakukan langkah-langkah berikut. Pertama-tama login ke Blogger, lalu pilih Tata Letak > Edit HTML.

Pertama-tama buat backup dulu. Sudah tahu kan cara membuat backup?

Kalau sudah centang kotak Expand Template Widget.

Nah, kalau sudah, lakukan langkah-langkah berikut.

1. Cari kode berikut:

<data:post.body/>

2. Taruh kode berikut dibawahnya.

Sumber:&lt;br/&gt;
&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:blog.pageName/> | <data:blog.title/>&lt;/a&gt;

Anda bisa membuat variasi terhadap kode tersebut. Contohnya, misalnya anda ingin kode tersebut berwarna hijau, maka kodenya menjadi:

<font color="green">Sumber:&lt;br/&gt;
&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:blog.pageName/> | <data:blog.title/>&lt;/a&gt;</font>

3. Lalu klik Simpan Template.

4. Sekarang, coba lihat blog. Pada bagian bawah postingan, ada kode HTML untuk pengunjung yang ingin mengcopas artikel kita tetapi tetap ingin menuliskan sumbernya.
KLIK DISINI UNTUK BACA SELENGKAPNYA

Banner Exchange/Tukaran Banner

Apabila anda menyukai link exchange dengan banner, kini a.nda bisa bertukar banner dengan Muhammad Rizki Fadillah's Blog.

Nah, untuk bertukar banner dengan blog ini, copy kode di bawah ini. Lalu masukkan ke blog anda. Bisa ke layout blog atau ke posting tertentu.

Nah, hasilnya seperti berikut ini.