Mungkin sobat merasa kurang puas dengan tampilan judul header sidebar blog
sobat. Kurang inilah, kurang itulah, terlalu gelaplah, atau warnanya
kurang menarik. Atau, mungkin pula background pada title sidebar terlalu
mengganggu dan ingin dihilangkan. Tips berikut mungkin bagi sobat yang
sudah pernah mengutak-utik CSS (intermediate), namun tidak ada salahnya pula bagi sobat newbie blogger untuk mempelajari CSS dengan memulainya dari mengubah aturan CSS pada judul sidebar.
Di Blogger, seperti pada web
pada umumnya, seluruh tampilan diatur dengan CSS. So, begitu pula dengan
judul sidebar, tampilannya diatur dengan CSS melalui properti dan
declarator tertentu. Sebelumnya kita ambil poin penting pada perintah
CSS header. CSS header memiliki deklarator sama seperti kode HTML (<h1>judul</h1>), yaitu h. Karena merupakan header, judul sidebar pun mengandung deklarator h.
Judul header sidebar biasanya merupakan jenis header level 2 , yaitu <h2>judul</h2>. Maka, mula-mula pada edit HTML/template Blogger, carilah aturan CSS yang mengandung h2, yaitu bagian CSS yang mengatur seluruh header blog level 2. Aturan CSS berada di antara <b:skin><![CDATA[ dan ]]></b:skin>.
Contoh sederhananya:
h2 {
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
Tentunya aturan tersebut berbeda-beda pada masing-masing template Blogger.
Sebelum berfokus pada pengubahan tampilan header sidebar,
perlu diketahui bahwa h2 mengatur seluruh tampilan header blog pada
level 2. Sedangkan bagian CSS yang mengatur sidebar secara keseluruhan
biasanya dinamai sidebar-wrapper (atau sejenisnya, misal sidebarwrapper, dll, cari yang mirip), maka judul pada sidebar-wrapper biasanya pula ditandai dengan deklarator dengan id-nya, yaitu #sidebar-wrapper h2.
Contoh:
#sidebar-wrapper h2 {
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
Pada template tertentu,
misalnya minima template, aturan CSS ini tidak ada, maka sobat harus
menambahkan sendiri. Nantinya, buat terlebih dahulu lalu letakkan h2 atau #sidebar-wrapper h2 di antara <b:skin><![CDATA[ dan ]]></b:skin>. Jika tidak ada #sidebar-wrapper (atau sejenisnya; yaitu elemen wrapper pada sidebar), maka gunakan saja h2.
Memodifikasi Elemen CSS Pada Sidebar Header (Judul Sidebar)
Untuk
melakukan modifikasi, ada beberapa elemen/properti CSS yang perlu
diketahui. Properti CSS yang mengatur posisi pada umumnya adalah: margin dan padding. Kemudian color adalah untuk mengatur warna font. Line height adalah untuk mengatur tinggi jarak antar baris, dan line spacing
adalah jarak antar huruf. Background adalah untuk mengatur warna latar
dari bagian header. Sobat bisa menambahkan elemen/properti lain untuk
menambah tampilannya. Untuk melakukan uji coba dalam mengubah nilainya
secara aman, backup template terlebih dahulu. Kemudian silahkan ubah
nilai masing-masing properti. Jangan di save dulu. Lihat hasil
tampilannya dengan meng-klik "Preview". Jika sudah beres, baru "Save". Untuk mengetahui seluruh elemen/property styling CSS, silahkan lihat di w3schools.com.
Menambahkan Icon/Gambar di Sebelah Judul/Title Header Sidebar
Melalui
aturan CSS, sobat dapat mempercantik tampilan judul sidebar dengan
gambar. Trik ini dilakukan dengan cara menambahkan elemen background
gambar dan memposisikannya sedemikian rupa. Tambahkan
url(alamatgambar.jpg) pada bagian background.
contoh:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) #000:}Agar gambar tidak berulang (memenuhi background):
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat #000:}Selanjutnya, jika ingin gambar berada di sebelah kiri tulisan judul sidebar:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat left center #000:}Agar berada di sebelah kanan judul sidebar:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat right center #000:}
Kemudian,
atur besar padding agar tulisan tidak bertabrakan dengan icon/gambar.
Pada beberapa kasus, padding ditulis secara individual: padding-left, padding right, padding-top, dan padding-bottom. Ubah nilai pada padding left jika gambar di sebelah kiri. Jika gambar di sebelah kanan, ubah nilai padding-right. Nilai padding harus lebih besar dari lebar (width) gambar/icon yang digunakan.
Pada kasus lain, CSS padding ditulis dengan shorthand. Contoh:
h2 {padding: 3px 2px 4px 4px;}
Nilai right ada pada bagian kedua, sedangkan nilai left ada bagian ke empat. Ubah salah satu dari nilainya lebih besar dari lebar gambar/icon.
Ada pula shorthand seperti ini:
h2 {padding: 4px 6px;}
Nilai pertama adalah untuk padding atas dan bawah sedangkan nilai kedua adalah untuk padding kiri dan kanan.
Mengubah nilai kedua akan membuat tulisan semakin memiliki ruang
sempit. Ada baiknya sobat menghapusnya dan mengganti aturan padding
secara independen (padding-right, padding-left, dan seterusnya) atau
dengan shorthand yang terdiri dari 4 nilai berjajar seperti contoh
shorthand di atas.
Contoh selengkapnya penggunaan aturan CSS untuk menambahkan icon gambar pada judul header sidebar:
Contoh selengkapnya penggunaan aturan CSS untuk menambahkan icon gambar pada judul header sidebar:
#sidebar-wrapper h2 {Ubah nilai pada masing-masing properti sesuai keinginan.
background: url (alamatgambar.jpg) no-repeat left center #000;
margin:4px;
padding: 5px 40px 5 40px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff; ...; ...; dst...
}
Setelah melakukan editing CSS, preview terlebih dahulu. Jika sudah beres dan sesuai keinginan, save template.