Kode CSS untuk mempercantik widget sidebar

Widget sidebar setelah dilakukan penambahan kode css

Kita tahu bahwa template yang disediakan Blogger adalah template yang standar alias asal bisa dipakai buat ngeblog, sehingga tak jarang orang yang enggan memakai template standard dan lebih memilih template downloadan di luar sana.

Karena template downloadan memiliki desain yang sangat menarik dan siap pakai, tanpa harus repot-repot mengkostumisasi kode css yang membingungkan.

Bagi yang suka tantangan tentu lebih memilih template standard kemudian dimodif menurut selera, sehingga menghasilkan template yang unik dan tidak ada yang menyamai. Tips kali ini merupakan upaya mempercantik salah satu elemen template blog yaitu widget sidebar.

Apabila ingin mengkostumisasi widget sidebar, diperlukan kode css tambahan yang diletakkan di dalam template. Proyek kali ini yang akan kita lakukan yaitu :

1. Mengatur judul widget sidebar agar menjadi rata tengah.
2. Menambahkan box berbayang pada judul widget sidebar
3. Menambahkan bingkai dengan sudut lengkung pada judul widget sidebar dan area konten widget sidebar
4. Menambahkan box berbayang pada area konten widget sidebar
5. Mengatur perataan teks pada area konten widget sidebar menjadi rata kanan-kiri

Berikut ini cara menambahkan Kode CSS untuk mempercantik widget sidebar
1. Buka editor template dengan cara mengeklik menu "Template" > "Edit HTML" > "Lanjutkan".

2. Cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

.main-inner .sidebar .widget h2 {
margin-top: 0px;
margin-bottom: 1px;
margin-left-value: 0px;
margin-right-value: 0px;
padding: 3px 3px;
color: #274e13 !important;
text-align: center;
border: 1px solid #666666;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #3d85c6;
background: #bbbbbb;
}

.main-inner .sidebar .widget-content {
margin: 0px;
padding: 2px 2px;
text-align: justify;
text-decoration: none;
border: 1px solid #674ea7;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #3d85c6;
background: #ffffff;
}

.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

3. Simpan template Anda.

Pengetahuan tentang kode bagi pengguna blogspot mutlak diperlukan agar nantinya bisa mempercantik tampilan blog, termasuk cara menambahkan Kode CSS untuk mempercantik widget sidebar, adalah salah satunya.