Mungkin kawan merasa kurang puas dengan performa judul header sidebar blog sobat. Kurang inilah, kurang itulah, terlalu gelaplah, atau warnanya kurang menarik. Atau, mungkin pula background pada title sidebar terlalu mengusik dan ingin dihilangkan. Tips berikut mungkin bagi kawan yang sudah pernah mengutak-utik CSS (intermediate), namun tidak ada salahnya pula bagi kawan newbie blogger untuk mempelajari CSS dengan memulainya dari merubah hukum CSS pada judul sidebar.Di Blogger, menyerupai pada web pada umumnya, seluruh performa dikontrol dengan CSS. So, begitu juga dengan judul sidebar, tampilannya dikontrol dengan CSS lewat properti dan declarator tertentu. Sebelumnya kita ambil poin penting pada perintah CSS header. CSS header memiliki deklarator sama menyerupai instruksi HTML (<h1>judul</h1>), yakni h. Karena ialah header, judul sidebar pun mengandung deklarator h.
Judul header sidebar biasanya ialah jenis header level 2 , yakni <h2>judul</h2>. Maka, mula-mula pada edit HTML/template Blogger, carilah hukum CSS yang mengandung h2, yakni bab CSS yang mengendalikan 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 hukum tersebut berbeda-beda pada masing-masing template Blogger.
Sebelum berkonsentrasi pada pengubahan tampilan header sidebar, perlu dikenali bahwa h2 mengendalikan seluruh performa header blog pada level 2. Sedangkan bab CSS yang mengendalikan 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, yakni #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, umpamanya minima template, hukum CSS ini tidak ada, maka kawan mesti menyertakan sendiri. Nantinya, buat apalagi dahulu kemudian letakkan h2 atau #sidebar-wrapper h2 di antara <b:skin><![CDATA[ dan ]]></b:skin>. Jika tidak ada #sidebar-wrapper (atau sejenisnya; yakni komponen wrapper pada sidebar), maka gunakan saja h2.
Memodifikasi Elemen CSS Pada Sidebar Header (Judul Sidebar)
Untuk menjalankan modifikasi, ada beberapa elemen/properti CSS yang perlu diketahui. Properti CSS yang mengendalikan posisi kebanyakan adalah: margin dan padding. Kemudian color yakni untuk mengendalikan warna font. Line height yakni untuk mengendalikan tinggi jarak antar baris, dan line spacing yakni jarak antar huruf. Background yakni untuk mengendalikan warna latar dari bab header. Sobat sanggup menyertakan elemen/properti lain untuk memperbesar tampilannya. Untuk menjalankan uji coba dalam merubah nilainya secara aman, backup template apalagi dahulu. Kemudian silahkan ubah nilai masing-masing properti. Jangan di save dulu. Lihat hasil tampilannya dengan meng-klik "Preview". Jika sudah beres, gres "Save". Untuk mengenali seluruh elemen/property styling CSS, silahkan lihat di w3schools.com.
Menambahkan Icon/Gambar di Sebelah Judul/Title Header Sidebar
Melalui hukum CSS, kawan sanggup mempercantik performa judul sidebar dengan gambar. Trik ini ditangani dengan cara menyertakan komponen background gambar dan memposisikannya sedemikian rupa. Tambahkan url(alamatgambar.jpg) pada bab 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 goresan pena 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 mudah-mudahan goresan pena 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 mesti lebih besar dari lebar (width) gambar/icon yang digunakan.
Pada permasalahan lain, CSS padding ditulis dengan shorthand. Contoh:
h2 {padding: 3px 2px 4px 4px;}
Nilai right ada pada bab kedua, sedangkan nilai left ada bab ke empat. Ubah salah satu dari nilainya lebih besar dari lebar gambar/icon.
Ada pula shorthand menyerupai ini:
h2 {padding: 4px 6px;}
Nilai pertama yakni untuk padding atas dan bawah sedangkan nilai kedua yakni untuk padding kiri dan kanan. Mengubah nilai kedua akan menghasilkan goresan pena makin memiliki ruang sempit. Ada baiknya kawan menghapusnya dan merubah hukum padding secara independen (padding-right, padding-left, dan seterusnya) atau dengan shorthand yang berisikan 4 nilai berjajar menyerupai pola shorthand di atas.
Contoh selengkapnya penggunaan hukum CSS untuk menyertakan icon gambar pada judul header sidebar:
Contoh selengkapnya penggunaan hukum CSS untuk menyertakan 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 menjalankan editing CSS, preview apalagi dahulu. Jika sudah beres dan sesuai keinginan, save template.
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com
Setelah menjalankan editing CSS, preview apalagi dahulu. Jika sudah beres dan sesuai keinginan, save template.
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com
