Tips Penting: Tutorial Blogger Rahasia Penulisan KODE CSS

Menambahkan kode CSS baru atau menuliskan kode CSS baru pada template sepertinya bukan sesuatu yang sulit dilakukan. Ya ..., karena dianggap sangat sederhana dan seakan tidak perlu menggunakan banyak pikiran, maka sering terjadi kode CSS baru yang ditambahkan tidak berfungsi dengan baik. Supaya tidak terjadi kesalahan dan kegagalan pemasangan CSS baru, beberapa tips blogger penting di bawah ini perlu diperhatikan. Sebuah Tutorial Blogger sederhana tetapi saya tanggung akan banyak memberi manfaat.

Beberapa tips Blogger untuk penulisan, pemasangan kode CSS dan kaitannya dengan kode HTML :

1. Huruf besar-huruf kecil : Kode CSS bisa dituliskan dalam bentuk huruf besar atau kecil. Meskipun tidak berpengaruh, sebaiknya untuk keseragaman dan kemudahan, karena sebagian besar menggunakan huruf kecil, maka gunakan saja huruf kecil untuk menuliskan semua kode CSS.
2. Satuan : Satuan besaran huruf dan angka (font) serta height dan width, bisa menggunakan px, pt, em atau %
   Contoh: 15px, 12pt, 3em atau 80%.
3. Kode Warna : Kode warna bisa menggunakan kode dalam bentuk angka/huruf atau teks/nama warna. Contoh color:#000 atau color:black;.
4. Spasi : Spasi dalam penulisan kode tidak berpengaruh terhadap fungsi. Di bawah ini ada 2 (dua) macam penulisan yang berbeda, tetapi tetap berfungsi sama:
   • margin:5px 10px 15px 0;
   • margin: 5px 10px 15px 0;
   Perbedaan penulisan KODE di atas terletak pada spasi antara (:) dan (5px).
5. Penulisan px pada nilai 0 (nol) : Besaran 0 (nol) dapat ditambahkan satuan (px) atau dibiarkan tanpa menuliskan satuannya. Di bawah ini ada 2 (dua) macam penulisan yang berbeda, tetapi tetap berfungsi sama:
   • margin:5px 0 15px 0;
   • margin:5px 0px 15px 0px;
   Supaya lebih efisien ruang, sebaiknya besaran pixel (px) tidak usah disertakan.
6. Besaran Nilai Sama : Besaran nilai yang sama cukup dituliskan 1 (satu) besaran saja.Contoh :
   • margin:5px 5px;
   • margin:5px 5px 5px 5px;
   Cukup ditulis : » margin:5px:.
7. Margin atau Padding (top-bottom atau left-right sama) : Pada kasus seperti ini cukup dituliskan 1 (satu) besaran saja (irit kode). Contoh :
   
   • padding:40px 3px 12px 3px; »
     Cukup ditulis padding:40px 3px 12px; » karena padding atas-bawah sama dan kanan-kiri juga sama.
   • padding:5px 8px 5px 8px; »
     Cukup ditulis padding:5px 8px; » karena padding kanan-kiri sama.
   • padding:6px 17px 6px 2px; » tidak bisa dirubah.
   Perlakuan pada margin dan padding sama!
   margin:...px ...px ...px ...px atau padding:...px ...px ...px ...px
   secara berurutan adalah: margin:top(px) right(px) bottom(px) left(px)
8. Background : Background dapat dituliskan dengan cara :
   • background:#000 atau background:black;
   • background-color:#fff atau background-color:white;
   • background:url(http://..../images/sesuatu.jpg
     background-image:url(http://..../images/sesuatu.gif
     background:#ddd url(http://..../images/sesuatu.png atau
     background:red url(http://..../images/sesuatu.png
9. border : Penulisan border bisa dibolak balik.
   • border:2px solid blue;
   • border:blue 2px solid ;
10. Penulisan per-sisi border : Border setiap bagian/sisi bisa dituliskan :
    • border-top:2px solid blue;
    • border-right:blue 2px solid ;
    • border-bottom:2px solid blue;
11. Penulisan model lain padding dan margin : Padding dan margin dapat dituliskan seperti yang dilakukan pada border.
    Contoh :
    • padding-top:32px;
    • margin-bottom:2em;
12. Syntax : Cara penulisan syntax.
• Spasi tidak berpengaruh : Contoh:
  .sidebar{
  width:260px;
  backckground:#000 url(http:// ..../image.jpg) top left repeat-x;
  ....
  ....
  }sama dengan:
  .sidebar {
  width: 260px;
  backckground: #000 url(http:// ..../image.jpg) top left repeat-x;
  ....
  ....
  }
• Gunakan selalu tanda ; (titik-koma) disetiap penulisan nilai.
  Contoh : margin:12px 5px 2px; --> dipenutup ada titik-koma
• Syntax bisa dituliskan berderet; Contoh :
  .sidebar-left{width:400px;margin-right:20px;border:2px solid grey;background:red;}
• border-left:blue 2px solid ;
13. Teks Rata : Untuk membentuk tulisan dengan teks rata kiri, kanan, tengah dan rata kanan-kiri, dituliskan dengan :
    text-align:left, text-align:right dan text-align:justify
    Contoh : .box-menu{text-align:justify; .... dst;}
14. Link CSS : Ada dua bentuk penulisan untuk link CSS yang diambilkan dari hasil upload.
    • <link href="http:// ...../font.css" rel="stylesheet" type="text/css"/>
    • <link rel="stylesheet" href="http:// ...../font.css" type="text/css"/>

Semoga bermanfaat. Selamat ngelembur!!! Ha .....

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «