» » » » Tips Cara Menulis dan Pasang Kode CSS Baru di Blog

Tips Cara Menulis dan Pasang Kode CSS Baru di Blog

— — Add Comment — , ,
Memasang CSS baru di blog sepertinya hanyalah sebuah tindakan sederhana yang dengan mudah bisa dilakukan oleh siapapun. Ya …, memang seperti itulah kenyataannya. Sangat mudah memasang kemudian menyimpannya karena kita hanya perlu mencari kode ]]></b:skin>, letakkan kode di atasnya dan langsung saja KLIK SAVE Template/Simpan Template.
Bagi beberapa sobat blogger yang amat memahami tentang kode HTML, masalah-masalah yang berkaitan dengan penggunaan xHTML, Kode CSS atau Javascript memang bukanlah sebuah persoalan yang bisa bikinmasuk angin, meskipun acap kali penulisan kode CSS yang mereka lakukan sering salah juga. Beberapa kesalahan mendasar yang sering dilakukan para pakar di bidang ini kebanyakan hanya karena kurang teliti :
  1. Menulis kode kurang lengkap/salah penulisan.
  2. Kode dituliskan berulang (double).
Tips dan Trik Cara Menulis dan Memasang Kode CSS di Blog
Penulisan Kode CSS dalam blog, meskipun secara umum ditempatkan di antara kode (tag pembuka) “<head>” dan kode (tag penutup) “ </head>“, namun beberapa beberapa penulisan kode CSS juga dilakukan di bagianbody di antara tag pembuka “<body>” dan tag penutup “</body>“. Penulisan dan penyimpanan dibagian body dapat dilakukan secara langsung ataupun melalui penambahan widget.

Beberapa hal penting yang harus diperhatikan saat penulisan kode CSS :

  1. Huruf Besar dan Huruf Kecil ♣ Sampeyan bisa menuliskan Kode CSS dalam bentuk Huruf besar atau huruf kecil. Hal ini 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 :
    border »
    border:2px solid red; atau
    border:2px solid #ff0000;
    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 :
    Dalam satuan px dan pt (sama):
    Contoh : font-size:14px; atau dituliskan font-size:14pt;
    Dalam satuan em :
    Contoh : font-size:1.4em;
    Dalam satuan % :
    Contoh : font-size:150%;
  7. Background-Image ♣ Berbagai cara menuliskan background image dan posisi background-image :
    Tanpa background warna :
    Contoh :  background:url(http: …….dst .jpg);
    Menggnakan background warna :
    Contoh :  background:#fff url(http: …. dst .gif);
    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 nilai - (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;}

OK sampai disini dulu deh...ntar besok lagi...

SEMOGA BERMANFAAT SOBAT..!!

0 Response to "Tips Cara Menulis dan Pasang Kode CSS Baru di Blog"

Subscribe to: Post Comments (Atom)