Cara Modifikasi Tampilan Header Sidebar Blogger

Bro sist, Tips Trik Blogger kembali lagi nih dengan posting tentang CSS setelah sekian lama blog ini jarang di-update karena kesibukan mengurus beberapa toko online.

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:

#sidebar-wrapper h2 {
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...
}

Ubah nilai pada masing-masing properti sesuai keinginan.
Setelah melakukan editing CSS, preview terlebih dahulu. Jika sudah beres dan sesuai keinginan, save template.