Penggunaan CSS (Cascading Style Sheet) ini merupakan langkah terpenting yang perlu kita pahami untuk bisa membuat Template Blogger. Bahasa yang digunakan sebenarnya sama juga sih kalau misalkan Anda ingin membuat theme di WordPress ataupun platform CMS lainnya. Lalu kenapa CSS ini penting untuk dipelajari? Karena tanpanya kita tidak akan bisa melihat tampilan yang menarik dan cantik dari sebuah template. Dengan CSS inilah nantinya kita bisa mengatur seperti apa tampilan visual yang mau kita hidangkan kepada pengunjung. Kalau gak pakai pengaturan CSS? Bisa aja sih. Tapi paling yang terlihat dari blog Anda hanya berupa barisan text biasa saja. Istilahnya kayak manusia yang gak dipakaikan baju. Wiiih… Jangan dibayangin yaa!! -_-
Bagi Anda pengunjung yang baru membaca #Tutorial ini, saya sarankan untuk terlebih dulu ikuti pembahasannya mulai dari episode pertama yang berjudul Belajar Cara Membuat Template Blogger.
Rumus CSS yang biasa digunakan adalah seperti ini:
Cukup sederhana bukan? Gak pakek ribet memang.
“Tapi kenapa yaa saya lihat di template kok banyak kali baris-baris kode yang digunakan?”
Nah, itu dikarenakan setiap selector menggunakan beberapa properti yang berbeda sekaligus dalam tiap satu kurung kurawal. Properti itu maksudnya adalah jenis pengaturan yang ingin diterapkan dan Value adalah nilainya. Tergantung kebutuhan dari selector tersebut mau pakek berapa banyak. Yang dimaksud dari selector disini adalah alamat atau bagian elemen yang ingin diatur oleh kode CSS tersebut.
Format penulisan selector CSS sebagai berikut:
- Untuk memanggil id=’uwakbudi’ maka pada CSS ditulis selektornya #uwakbudi (tambahkan pagar).
- Untuk memanggil class=’rumah’ penulisan CSS nya .rumah (tambahkan titik).
- Untuk memanggil tag elemen (tanpa atribut ID/class) bisa langsung tulis kan saja nama tag nya. Seperti:
<nav> ditulis langsung menjadi nav.
<li> ditulis langsung menjadi li.
<a> ditulis menjadi a.
Selector Mengatur Hingga Elemen Child
Terus boleh gak ada penamaan selector yang sama dalam pengaturan CSS? Boleh saja. Hanya kalau toh properti yang dipakai juga sama, itu namanya tidak efisien. Misal:
#uwakbudi { position:relative; text-align:left; font-family: Arial, 'Segoe UI', 'Times New Roman'; }
Lalu kemudian selang berapa baris kemudian Anda membuat pengaturan lagi untuk selector yang sama.
#uwakbudi { margin: 0px; text-transform: uppercase; font-family: Arial, 'Segoe UI', 'Times New Roman'; font-size: 17px; }
Nah yang seperti ini namanya tidak efektif. Karena ada penggunaan properti yang sama yaitu font-family. Kalau sudah pernah diatur sebelumnya kita gak perlu atur lagi.
Setiap kali ada properti yang sudah muncul pada suatu elemen, maka properti itu akan berlaku untuk elemen didalam selektor tersebut. Jika #uwakbudi mempunyai elemen child #sibejo dan #sipuput misalnya, kita ingin kedua elemen tersebut menggunakan ukuran font 17px. Kita gak mesti membuat pengaturan untuk dua elemen masing-masing, cukup atur lewat selector #uwakbudi saja. Maka elemen dibawahnya pun akan menyesuaikan dengan pengaturan yang sama.
Contoh:
#sibejo { color: #007ABE; font-size: 17px; margin: 10px 25px 0px; } #sipuput { color: #999; font-size: 17px; margin: 10px 25px 0px; padding: 5px; }
Lihat ada berapa properti yang sama? Pengaturan CSS tersebut bisa kita pindahkan ke selector #uwakbudi. Atau alternatif lainnya bisa dengan membuat dua selector sekaligus. Cara penulisannya, tiap selector harus dipisah dengan tanda koma. Maka properti yang sama akan diterapkan untuk dua selector tersebut. Seperti ini bentuknya:
#sibejo, #sipuput { font-size: 17px; }
Karna dibaris sebelumnya udah muncul properti font-size: 17px pada selector #uwakbudi. Cara ini tidak mesti dipakai. Jadikan ini sebagai contoh saja. Untuk kasus lain mungkin cara ini bisa lebih efektif digunakan.
Oke, tapi tuh kan masih ada lagi properti margin yang sama. Kenapa gak dipindahin juga? Nah, untuk margin ini beda. Karna margin fungsinya untuk mengatur jarak antar elemen. Kalau kita pindahkan margin itu ke selector #uwakbudi, jadinya iyaa yang dapat margin cuman elemen #uwakbudi doang. Sementara antara #sipuput dan #sibejo iyaa gak pakai jarak margin. Jadi untuk properti yang mengatur ukuran jarak, tinggi, lebar, posisi dan sebagainya, memang perlu diatur pada satu selector khusus (yang spesifik). Sedangkan untuk properti yang sifatnya universal atau mau diterapkan pada beberapa elemen sekaligus, pengaturannya bisa diletakkan pada selector elemen induknya saja. Paham?
Menggunakan Selector yang Lebih Spesifik
Ketika elemen yang ingin diatur CSS tidak memiliki atribut class ataupun ID, kita bisa langsung menyebut nama tag tersebut. Hanya saja kalau pada template ada banyak elemen <a> misalnya, maka semuanya akan kena efek CSS yang sama. Jadi kalau mau buat pengaturan khusus untuk satu elemen saja, bisa dengan menambahkan nama selector elemen induknya didepan (tanpa tanda koma). Contohnya seperti kasus berikut ini:
<div class='navigasi'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <ul> </div>
Kita hanya mau mengatur tampilan <li> di dalam elemen navigasi saja, sehingga <li> pada elemen lain tidak akan terpengaruh. Sama juga kalau yang mau diatur itu tampilan <a>. Perhatikan penulisan CSS berikut ini:
.navigasi li { width: 100%; display: block; margin: 0 5px; } .navigasi a { color: #333; } .navigasi a:hover { color:#007ABE; }
Alternatif Lain Menambahkan Atribut Class Baru
Selain cara diatas masih ada juga alternatif lain yang lebih efektif. Yaitu dengan cara menambahkan atribut class baru pada tag <li>. Cara ini tentu lebih memudahkan Anda untuk memanggil selector-nya bukan? Karna kita tidak perlu mencari tahu tag <li> berada di elemen induk mana. Misal untuk kasus seperti ini:
<div class='social-media'> <ul> <li class='fa fa-facebook'> </li> <li class='fa fa-twitter'></li> </ul> </div>
Dari struktur HTML diatas kita bisa melakukan pengaturan lebih spesifik, hanya untuk tag li yang terdapat pada elemen social-media saja. Penulisan CSSnya seperti berikut:
.fa { font-size: 25px; } .fa-facebook { background: url('http://www.chaidir.web.id/images/icon-facebook.png' no-repeat); } .fa-twitter { background: url('http://www.chaidir.web.id/images/icon-twitter.png' no-repeat); }
Kenapa bisa muncul beberapa pengaturan CSS dari tag li diatas? Itu karena setiap elemen tag bisa kita pasang lebih dari satu macam class sekaligus. Kalau mau tiga class? Bisa juga. Fungsinya untuk apa? Iya seperti contoh diatas. Selector .fa bisa digunakan untuk mengatur ukuran font dari dua elemen sekaligus. Sementara class lainnya digunakan untuk memasang background pada satu elemen saja. Secara prinsip sama dengan cara sebelumnya. Kalau saja pada tag li tidak dipasang class fa, maka penulisannya jadi seperti ini:
.fa-facebook, .fa-twitter { font-size: 25px; }
Atau seperti ini:
.social-media li { font-size: 25px; }
Mana yang lebih baik digunakan? Tentu yang lebih hemat penggunaan katanya. Saya asumsikan semakin banyak huruf/karakter yang digunakan maka semakin nambah juga size/ukuran CSS tersebut. Hal ini juga berlaku untuk penulisan baris kode CSS. Sebenarnya tidak ada aturan Anda harus membuat susunan seperti tampilan penulisan pada contoh-contoh diatas. Selector ditulis dibagian atas, lalu properti dibawahnya dengan memakai jarak spasi (menjorok ke dalam). Ingat, enter keyboard tidak berpengaruh dalam bahasa HTML maupun CSS. Jadi, untuk menghemat ukuran CSS bisa saja Anda membuat penulisan seperti ini:
.navigasi li { width: 100%; display: block; margin: 0 5px; } .navigasi a { color: #333; } .navigasi a:hover { color:#007ABE; } .fa { font-size: 25px; } .fa-facebook { background: url('http://www.chaidir.web.id/images/icon-facebook.png' no-repeat); } .fa-twitter { background: url('http://www.chaidir.web.id/images/icon-twitter.png' no-repeat); }
Letak Pengaturan Kode CSS pada Template Blogger
“Yang menjadi pertanyaannya sekarang dimana mau kita letakkan CSS ini nantinya?”
Pertanyaan yang bagus. Jawabannya adalah Anda bisa meletakkan CSS ini dimana saja yang Anda mau. Lah, kok begitu? Iyaa memang begitu. Mau di bagian <head> atau <body> tetap saja CSS akan terbaca oleh browser. Cuman bagusnya letakkan saja dibagian <head>. Umumnya penulisan kode CSS harus diapit dalam tag style.
<style type='stylesheet'> .... </style>
Cuman lagi pada template Blogger, biasanya kita diharuskan memiliki tag b:skin yang pada dasarnya fungsinya sama aja dengan tag style. Tanpa ada tag b:skin template malah gak bisa diterapkan. Jadi nantinya kita akan meletakkan seluruh barisan kode CSS template diantara kode berikut. Contoh ini dinamakan Internal CSS.
<b:skin><![CDATA[ .... ]]></b:skin>
Kalau di WordPress kita biasanya akan diminta membuat file tersendiri untuk CSS, seperti style.css yang diletakkan satu folder dengan file index.php. Yang seperti ini disebut Eksternal CSS, artinya kita melakukan panggilan pada pengaturan CSS diluar template dengan menggunakan tautan link seperti berikut ini:
<link href="style.css" rel="stylesheet" type="text/css"/>
Untuk bisa tidak menggunakan cara seperti ini? Bisa juga kok. Cuman lagi kita perlu nyari tempat untuk menyimpan file CSS tersebut.
Cara lain yang bisa juga digunakan adalah dengan meletakkan CSS langsung pada elemen yang diinginkan. Atau istilahnya Inline CSS, lihat contoh berikut:
<img src='http://www.chaidir.web.id/images/header-chaidir-web.png' style='height:60px; width:200px; border-radius:5%; position:fixed; top:10px; left:20px; margin:0px; z-index:1000;' />
Akan tetapi daripada menggunakan cara ini, mending kita menambahkan atribut class saja. Supaya lebih mudah untuk melakukan editing sewaktu-waktu. Dan paling utama gak repot membacanya.
Nah, akhirnya kita sampai juga dipenghujung episode kali ini. Apakah tulisan ini terlalu panjang menurut Anda? Mungkin saja iya. Cuman walaupun begitu tetap saja pembahasan tentang CSS ini saya rasa masih sangat kurang. Maka untuk Anda yang memang serius pengen bisa membuat template sendiri, ada baiknya mencari referensi tambahan lagi diluar sana. Pertama, Anda juga perlu mencari tahu Macam-macam Properti dan Value dari CSS. Ada sangat banyak memang. Tapi jangan terlalu memusingkan diri, untuk tahap awal pelajari saja yang dasar dan sering digunakan. Seiring waktu tambah sedikit demi sedikit sejalan dengan praktek dan praktek.
Selamat Belajar! Sampai Jumpa.
NEXT!! Episode ke-6
Membuat Struktur Elemen Layout Template
sumber Gambar 1,
Raisa Khafidz
saya tidak tahu apa-apa tentang html-css-, tp, saya terkesan dengan tulisan anda, membuat semakin besar rasa saya ingin belajarnya.
·sukses slallu, ,
Chaidir
Terima kasih udah mau baca tulisan saya Mbak Raisa. 😀
Kalau tertarik silahkan dipelajari mumpung ada tutorialnya GRATIS. hehe..
Salam kenal.
·angkisland
wkwkwkw masih anjut sambil puyeng ams haha
·Kopiah Putih (Abdur Rosyid)
Wah.. Sudah mulai rajin nulis tentang CSS nih.. 🙂
·Jadi iri pengin belajar lagi.
Chaidir
Lagi pengen belajar nulis tutorial ini mas.. 🙂
·Mana tau ilmu yg sdikit bisa bermanfaat.. hehe
Sabda Awal
weiiiiss… dipermudah sama uwak budi, kayaknya makin ngerti nih sekarang, maulah belajar lagi
·Chaidir
Ayo bg belajar bareng kita.. ^^b
·Angga Zulika Ramadhani
Tambah seneng deh mampir kesini, dapet ilmu terus.
Makasih mas chaidir.
Mau nanya nih,
·kalo properti position, terus apa ya beda value-nya : relative dan absolute ?
Chaidir
Relative letaknya sesuai susunan HTML.
Absolute letaknya bisa bebas sesuai properti top, bottom, left, right.Tapi masih bergantung elemen induknya.
Fixed bisa lebih bebas karna bergantung dengan media layar.
Kira-kira singkatnya begitu Mas.. ^_^
·Angga Zulika Ramadhani
Terima kasih atas penjelasannya mas 🙂
·Chaidir
Siipp.. sama-sama.. (y)
·