Cara Modifikasi Tampilan Header Sidebar Blogger

Bro sist, Tips Trik Blogger balik lagi nih menggunakan posting tentang CSS sesudah sekian usang blog ini jarang di-update karena kesibukan mengurus beberapa toko online.
Mungkin sobat merasa kurang puas menggunakan tampilan judul header sidebar blog sobat. Kurang inilah, kurang itulah, terlalu gelaplah, atau warnanya kurang menarik. Atau, mungkin juga background pada title sidebar terlalu mengganggu serta ingin dihilangkan. Tips berikut mungkin bagi sobat yang sudah pernah mengutak-utik CSS (intermediate), namun nir ada salahnya jua bagi sobat newbie blogger buat memeriksa CSS dengan memulainya menurut mengganti anggaran CSS dalam judul sidebar.

Di Blogger, seperti pada web dalam umumnya, semua tampilan diatur dengan CSS. So, begitu pula menggunakan judul sidebar, tampilannya diatur dengan CSS melalui properti serta declarator eksklusif. Sebelumnya kita ambil poin penting dalam perintah CSS header. CSS header memiliki deklarator sama seperti kode HTML (

judul

), yaitu h. Karena merupakan header, judul sidebar pun mengandung deklarator h.

Judul header sidebar biasanya adalah jenis header level dua , yaitu

judul

. Maka, mula-mula dalam edit HTML/template Blogger, carilah anggaran CSS yang mengandung h2, yaitu bagian CSS yg mengatur seluruh header blog level 2. Aturan CSS berada pada antara serta .
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 serius pada pengubahan tampilan header sidebar, perlu diketahui bahwa h2 mengatur seluruh tampilan header blog dalam level 2. Sedangkan bagian CSS yg mengatur sidebar secara holistik umumnya dinamai sidebar-wrapper (atau sejenisnya, misal sidebarwrapper, dll, cari yang seperti), maka judul dalam sidebar-wrapper umumnya juga ditandai menggunakan deklarator menggunakan 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 nir terdapat, maka sobat wajib menambahkan sendiri. Nantinya, buat terlebih dahulu kemudian letakkan h2 atau #sidebar-wrapper h2 pada antara serta . Apabila nir ada #sidebar-wrapper (atau sejenisnya; yaitu elemen wrapper dalam sidebar), maka gunakan saja h2.

Memodifikasi Elemen CSS Pada Sidebar Header (Judul Sidebar)

Untuk melakukan modifikasi, ada beberapa elemen/properti CSS yg perlu diketahui. Properti CSS yg mengatur posisi dalam umumnya merupakan: margin serta padding. Kemudian color merupakan buat mengatur warna font. Line height adalah untuk mengatur tinggi jarak antar baris, serta line spacing adalah jarak antar alfabet . Background adalah buat mengatur warna latar berdasarkan bagian header. Sobat sanggup menambahkan elemen/properti lain untuk menambah tampilannya. Untuk melakukan uji coba dalam mengganti nilainya secara aman, backup template terlebih dahulu. Kemudian silahkan ubah nilai masing-masing properti. Jangan di save dulu. Lihat output tampilannya dengan meng-klik "Preview". Apabila sudah beres, baru "Save". Untuk mengetahui seluruh elemen/property styling CSS, silahkan lihat di w3schools.com.

Menambahkan Icon/Gambar pada 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 serta memposisikannya sedemikian rupa. Tambahkan url(alamatgambar.jpg) pada bagian background.
contoh:
h2 background: url(//www.alamaturlgambar/icon.jpg) #000:
Agar gambar tidak berulang (memenuhi background):
h2 background: url(//www.alamaturlgambar/icon.jpg) no-repeat #000:
Selanjutnya, apabila ingin gambar berada di sebelah kiri goresan pena judul sidebar:
h2 background: url(//www.alamaturlgambar/icon.jpg) no-repeat left center #000:
Agar berada pada sebelah kanan judul sidebar:
h2 background: url(//www.alamaturlgambar/icon.jpg) no-repeat right center #000:
Kemudian, atur besar padding supaya goresan pena nir bertabrakan menggunakan icon/gambar. Pada beberapa perkara, padding ditulis secara individual: padding-left, padding right, padding-top, serta padding-bottom. Ubah nilai dalam padding left jika gambar di sebelah kiri. Apabila gambar di sebelah kanan, ubah nilai padding-right. Nilai padding harus lebih besar menurut lebar (width) gambar/icon yg digunakan.

Pada kasus lain, CSS padding ditulis menggunakan shorthand. Contoh:
h2 padding: 3px 2px 4px 4px;}
Nilai right terdapat dalam bagian ke 2, sedangkan nilai left ada bagian ke empat. Ubah salah satu menurut nilainya lebih besar menurut lebar gambar/icon.

Ada jua shorthand seperti ini:
h2 padding: 4px 6px;}
Nilai pertama merupakan buat padding atas serta bawah sedangkan nilai kedua adalah buat padding kiri serta kanan. Mengubah nilai kedua akan membuat tulisan semakin memiliki ruang sempit. Ada baiknya sobat menghapusnya serta mengganti aturan padding secara independen (padding-right, padding-left, serta seterusnya) atau dengan shorthand yang terdiri dari 4 nilai berjajar seperti contoh shorthand di atas.
Contoh selengkapnya penggunaan anggaran CSS untuk menambahkan icon gambar dalam judul header sidebar:
#sidebar-wrapper h2
background: url (alamatgambar.jpg) no-repeat left center #000;
margin:4px;
padding: 5px 40px lima 40px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff; ...; ...; dst...
}
Ubah nilai pada masing-masing properti sesuai impian.
Setelah melakukan editing CSS, preview terlebih dahulu. Jika sudah beres serta sesuai keinginan, save template.
mencuri adalah pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Cara Modifikasi Tampilan Header Sidebar Blogger"