Tips dan Trik Menulis Kode Css pada Blogger

TIPS & TRIK MENULIS KODE CSS:


1. HURUF BESAR & huruf kecil
     HURUF BESAR atau huruf kecil tidak akan berpengaruh. Berbeda yang terjadi saat kita menuliskan javascript.
Contoh :
BORDER:2PX SOLID #FFF; akan sama artinya dengan :
border:2PX solid #Fff;
2. Keberadaan Spasi
     Spasi yang tidak diperlukan dalam penulisan kode CSS perlu dihilangkan untuk memperingan beban kode. Spasi tidak akan berpengaruh pada penulisan kode CSS.
Contoh : 
sidebar { margin: 10px 5px 2px 8px; padding: 20px 6px; font-size: 1em; } sama artinya dengan sidebar{margin:10px 5px 2px 8px;padding:20px 6px;font-size:1em;}
Perhatikan perubahan yang terjadi! Beberapa spasi yang tidak diperlukan bisa dipadatkan sehingga akan memperingan beban kode.
Contoh yang lain :  
sidebar {
        margin: 10px 5px 2px 8px;
        padding: 20px 6px;
        font-size: 1em;
}
Supaya tidak terlalu banyak spasi yang menjadi beban, tuliskan saja dalam bentuk :
sidebar{margin:10px 5px 2px 8px;padding:20px 6px;font-size:1em;}
3. Kode Warna pada Font
     Kode warna untuk font bisa dituliskan dalam bentuk:
- color:red; » kode dalam bentuk teks (blue,brown,black dll).
- color:#010e50; » dalam bentuk kode warna - angka dan huruf.
- color:#ddd; » penggunaan kode dalam bentuk kode 3 karakter diperuntukkan pada kasus tertentu ketika kode yang dalam bentuk 6 karakter mempunyai kesamaan antara 3 karakter ketiga awal dan akhir. Misalnya :
color:#000000; bisa dituliskan sebagai color:#000; atau
color:#2ad2ad; bisa dituliskan dalam bentuk color:#2ad;
4. Kode Warna pada Kasus Lain
Model penulisan seperti di atas akan berlaku pada kode css dalam bentuk yang lain seperti pada :
a. border »
border:2px solid red; atau
border:2px solid #ff0000;
b. background »
background:white; atau bisa dituliskan dlam bentuk :
background:#fff;
5. Tebal font (Font-weight)
     Ada dua model penulisan kode yang berkaitan dengan ketebalan font.
Penggunaan teks sebagai kode ketebalan font » normal, bold dan bolder  Contoh :
font-weight:normal; atau font-weight:bold;
Kode ketebalan dalam bentuk angka. Nilai yang biasa dipergunakan adalah » 500, 700 dan 900  (normal, bold dan bolder).
Contoh :
font-weight:500; atau misalnya font-weight:900;
6. Ukuran Font  (Font-size)
     Kita dapat menggunakan 3 cara untuk menuliskan ukuran font :
a. Dalam satuan  px  dan  pt  (sama):
Contoh : font-size:14px; atau dituliskan font-size:14pt;
b. Dalam satuan em :
Contoh : font-size:1.4em;
c. Dalam satuan  %  :
Contoh : font-size:150%;
7. Background-Image
     Berbagai cara menuliskan background image dan posisi background-image :
a. Tanpa background warna :
Contoh :  background:url(http: …….dst .jpg);
b. Menggnakan background warna :
Contoh :  background:#fff url(http: …. dst .gif);
c. Menyertakan posisi dan pengulangan background :
Contoh 1 :  background:#fff url(http: …. dst .png) top left repeat-x;
Contoh 2 : background:#fff url(http: …. dst .jpg) bottom left repeat;
Contoh 3 : background:#fff url(http: …. dst .jpg) center no-repeat;
8. Margin dan Padding
     Penulisan margin pada beberapa kode bisa di peringkas deperti misalnya :
Contoh 1: margin: 5px 2px 5px 2px; menjadi margin:5px 2px;
Contoh 2: margin: 5px 2px 10px 2px; menjadi margin:5px 2px 10px;
Contoh 3: margin: 5px 0px 5px 0px; menjadi margin:5px 0;
Keterangan :
Secara berurutan posisi margin adalah » margin:atas kanan bawah kiri;
Dalam bentuk 3 kode » margin:atas kanan-kiri bawah (kanan dan kiri bernilai sama).
Dalam bentuk 2 kode » margin:atas-bawah kanan-kiri; (atas dan bawah sama begitu juga kanan dan kiri).
Nilai 0 (nol) dapat dituliskan tanpa satuan. Dalam kasus di atas, margin dan padding mempunyai perlakuaan sama ketika menuliskan kode. Secara umum perbedaan yang terjadi adalah tidak adanya nila - (minus) pada penulisan padding, sedang pada margin bisa dilakukan.
9. Penempatan Kode CSS di atas Kode ]]></b:kin>
     Seing kali tutorial penulisan kode CSS dituliskan dengan menyertakan kode :
<style type=”text/css”> dan di akhiri dengan tag penutup </style>, sehingga bentuknya menjadi seperti ini :
<style type=”text/css”>
KODE CSS
</style>
Buang saja kode penyerta CSS di atas sehingga yang terpasang di atas kode ]]></b:skin> hanya KODE CSS-nya. Hal seperti ini harus dihindari karena sebenarnya dengan menyertakan tag pembuka dan penutup style, maka akan terjadi double style dalam penulisan kode CSS tersebut. Kenyataan yang terjadi ini akan merusak penampilan blog sehingga dibagian atasnya (di atas navbar) akan terdapat kode - - >.  Bentuk sesungguhnya akibat penulisan kode css baru di atas kode ]]></b:skin> dengan menyertakan tag style dan  kemudian berakibat mengganggu tampilan blog adalah seperti ini :
<style type=”text/css”>
<!–
Kode CSS Template asli (bawaan blog)
<style type=”text/css”>
Kode CSS Baru
</style>
–>
</style>
10. Kode (tanda ;)
     Biasakanlah mengakhiri penulisan kode CSS dengan selalu menggunakan tanda ; (titik koma). Pengalaman yang terjadi ketika dilakukan compress CSS, kelalaian (tidak dipergunakannya) tanda seperti tersebut akhirnya merusak penampilan blog pada susunan Page Element (Elemen Laman).
contoh :
- Jangan tuliskan seperti ini : #tooltip{margin:5px;font-size:12px}
- Tuliskan seperti ini : #tooltip{margin:5px;font-size:12px;}

Tags : #Blogger

Share This :

Unknown