ID dan Class
Pada malam yang kelabu ini, Pak Guru Bajakan akan melanjutkan tutorial mengenai template blog, pada tutor sebelumnya kita sudah mengenal penulisan kode2 CSS dan cara penempatannya, kalau masih ada yang belum jelas silahkan dibaca ulang. Agar lebih mudah memahami penempatan kode CSS pada template blog, sebaiknya memilih blog Minima untuk latihan utak-atik. Karena blog Minima runut dalam penyususan dan penempatan kode CSSnya.

Kita bisa memakai template blog buatan Douglas Bowman (www.stopdesign.com) jadi sebelum kita benar benar memahami jangan mengunakan template modifikasi orang Indo, karena kebanyakan bahasanya kadang semaunya sendiri, sehingga kita sulit memahami maksudnya. Memang sih tidak ada peraturan baku harus memakai bahasa khusus dalam memberi nama, tapi seandainya kita masih tahap belajar seperti aku, sebaiknya memakai bahasa yang mudah di fahami.

Kita boleh saja ganti nama #outer-wrapper menjadi #outer-ringroad, tapi malah bingungkan apa yang dimaksud outer-ringroad ?, kaya jalan tol saja, kalau pakai isitilah blogger, outer-wrapper kita semua sudah mengerti maksudnya.

Agar biar lebih aktual, aku beri contoh template blog oyin buatan creating-website sebelum aku modifikasi, tentu kalian akan bingung dengan maksud nama CSS berikut ini.

.masGanteng_wide{width:300px}
.masGanteng_wide .thumb{padding-bottom:5px}
.masGanteng_wide img{display:block}
.masGanteng_narrow{width:315px;padding-bottom:6px}
.masGanteng_narrow .thumb{float:right;margin-left:7px}
.masGanteng_narrow .featuredTitle{font:bold 12px Arial;color:#333}

Coba sebagai orang awam kaya aku, apa yang dimaksud dengan nama masGanteng itu ? dan gantengnya seperti apa sih ? siapa tahu malah wajahnya penuh bisul, wakaka.. tapi biarlah itu hak dia sebagai pembuat template.

Kita mau bertanya tujuan penamaannya seperti itu pada si pembuat ? hmmm, pasti akan di jawab, itupun kalau sudi menjawab, "eh, elu tinggal mau pake apa nggak, gak usah cerewet.." Ini pengalamanku saat bertanya pada salah satu pembuat template, dimana aku ingin mengubah tampilan desain yang dibuatnya.

Karena pengalaman tadi, maka inilah tujuan ku menulis artikel bagaimana mengetahui struktur dari template blog agar kita mudah meng utak-atik template buatan orang lain yang kebetulan kita suka dengan desain tampilannya. (bukan isi postingannya).

Okey, karena kita sudah sedikit memahami struktur template, maka maksud dari nama masGanteng itupun bisa kita lacak. Ternyata nama klasifikasi (class) dari salah satu Identitas (ID) sidebar yang diletakan pada Home Page.

<div id='ads1-wrapper'>
<b:section class='ads1' id='ads1' preferred='yes'>
<b:widget id='HTML20' locked='false' title='Label 4' type='HTML'>
<b:includable id='main'>
<div class='masGanteng'>

Agar lebih jelasnya maka label 4 ini kita bisa ubah misalnya label dengan kategori Humor dan kemudian kita beri judul Humor seperti pada template oyin ini. sehingga hasil perubahannya adalah :

<div id='ads1-wrapper'>
<b:section class='ads1' id='ads1' preferred='yes'>
<b:widget id='HTML20' locked='false' title='Humor' type='HTML'>
<b:includable id='main'>
<div class='masGanteng'>

Jelaskan masGanteng itu ternyata merupakan class dari #ads1-wrapper, Nama ID dan Class ini sesuai dengan keinginan si perancang template, agar aku lebih bisa mamahmi maka nama masGanteng tadi aku ubah menjadi crooT, jadi dalam template menjadi sebagai berikut :

#ads1-wrapper

.croOT_wide{width:300px}
.croOT_wide .thumb{padding-bottom:5px}
.croOT_wide img{display:block}
.croOT_narrow{width:315px;padding-bottom:6px}
.croOT_narrow .thumb{float:right;margin-left:7px}
.croOT_narrow .featuredTitle{font:bold 12px Arial;color:#333}

<div id='ads1-wrapper'>
<b:section class='ads1' id='ads1' preferred='yes'><b:widget id='HTML20' locked='false' title='Humor' type='HTML'>
<b:includable id='main'>
<div class='croOT'>

sedangkan <b:section class='ads1' id='ads1' preferred='yes'> agar sidebar ini muncul di halaman tata letak sehingga kita tidak perlu membuka EDIT HTML jika ingin mengubah isi Sidebar.
Nilai Locked false agar sidebar ini bisa di hapus / diganti isinya sedangkan jika bernilai true maka sidebar tersebut tidak dapat dihapus / diganti.

ID dan Class
ID (Identification) diawali dengan tanda pagar (#), CLASS diawali dengan tanda titik(.). Kedua atribut CSS tersebut nantinya akan dipanggil pada kode HTML seperti ini:
<div id="nama identifikasi"> ......</div> contoh  <div id='ads1-wrapper'> dan
<div class="nama klasifkasi">......</div>. contoh <div class='croOT'>

Nama atribut ID dan CLASS terserah pembuatnya tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah pengeditan. Perbedaan antara atribut ID dan CLASS pada CSS adalah pada tingkat penggunaannya, ID sebaiknya digunakan sebagai identitas yang unique, seperti Logo, Header, Footer, Left Sidebar, dan Right Sidebar sedangkan CLASS digunakan untuk menandai atribut yang lebih sepesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis font, dan ukuran font.

Gak ngerti ya maksudnya wakakaka, maklum aku Guru Bajakan, bukan Guru Asli, Ok mengenai ID dan class ini nanti kita dalami pada bab tersendiri saja agar lebih fokus, karena kita hanya sekedar ingin bisa merubah tampilan template bukan ingin menjadi desainer web ! Oleh karena itu biar cepet maka kita ambil jalan singkatnya saja, langsung praktek gak usah mikir kode Java atau kode HTML, tinggal ikuti saja apa kata pak Guru enaak kan ?

Pada postingan ini, aku sudah menyiapkan contoh-contoh dalam penerapan kode CSS untuk mengubah tampilan blog, sebagai bahan ilustrasi dalam mengubah tampilan blog, aku gunakan template blog tetangga yang aku edit pakai Firebug kemudian aku utak-atik CSSnya, coba perhatikan gambar-gambar berikut ini.

1. Outer-wrapper template asli sebelum di edit kodenya adalah sebagai berikut :

#outer-wrapper {
background: #000000;
border: 2px  dotted #444444;
border-radius: 15px 15px 15px 15px;
}

Maksudnya outer-wrapper pada template blog ini memiliki ketebalan garis (border) 2px dengan bentuk titik-titik (dotted) warna abu-abu atau kode  hex-nya (kode warna)  #444444
ujung bodernya dibuat melengkung,  derajat lenkungannya (boder radius)  15px 15px 15px 15px (artinya jarak pembentuk lengkungan kiri kanan atas bawah memiliki ukuran yang sama masing-masing 15px)

Sekarang aku ubah tampilan bodernya  dengan menambah ketebalannya dari 2px menjadi 5 px, sedangkan bentuk bordernya dari dotted (titik-titik) aku buat solid (rata) dan warna border dari #444444 (abu-abu) aku ganti dengan   #fff (putih) perhatikan perubahan susunan kodenya :

#outer-wrapper {
background: #000000;
border: 5 px solid  #fff;
border-radius: 15px 15px 15px 15px;
}


Sekarang kita mencoba mengubah tampilan border pada sidebar kiri. atau left coulumn, (nama bisa diganti sesuai keinginan misalnya sidebar-kiri dsbnya)  sebelum di ubah, kodenya seperti berikut.

#left-column {
border: 1px solid #444444;
border-radius: 5px 5px 5px 5px;
float: left;


Dari kode Css diatas kita coba ubah nilainya menjadi :

#left-column {
border: 3px solid #fff;
border-radius: 10px 10px 10px 10px;
float: left;

Maka hasil perubahannya akan tampak seperti gambar dibawah ini.


Gampang kan ternyata mengubah template itu  jika kita mau belajar sedikit
memahami penempatan kode CSS ?

Jika pada gambar tersebut kurang melengkung pojoknya atau kurang tebal garisnya, kita tinggal mengubah nilai dari CSSnya saja. Coba sekarang kita bikin pojoknya lebih melengkung lagi dengan menampbah nilai boder radiusnya menajadi 20px. maka akan menghasilkan bentuk seperti gambar dibawah  ini.


Jika kita tidak suka dengan boder yang ujungnya melengkung, maka tinggal hapus saja kode boder radiusnya, sehingga tampilan bodernya menjadi kotak.

Sampai disini dulu ya tutorial kali ini, nanti kita lanjutkan ke torial yang ke 4 tentu akan lebih seru jika kalian masih mau mengikuti, kenapa bisa gitu ? karena bagi yang malas mikir aku akan kasih tau bagaimana cara mencuri seluruh atau sebagian isi posting blog orang lain tanpa harus copy paste satu persatu, walaupun pada blog mereka ada peringatan tidak bisa klik kanan atau ada peringatan sejenis misalnya tidak bisa di block tulisannya  agar tidak di copy dsbnya. Intinya, semua script Java yang menghalangi pencurian konten tidak berlaku....