Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget

Sobat, seperti kita tahu bahwasanya hampir semua template standar yang disediakan oleh Blogger tidak menyertakan aksesori berupa bingkai untuk setiap widget yang dipasang di halaman. Dan hal ini sangat berbeda apabila dibandingkan dengan kustom template yang umumnya menyertakan aksesori berupa bingkai untuk bagian tersebut, sehingga tampilan halaman blog yang yang menggunakan template standar Blogger menjadi terkesan tidak lebih menarik apabila dibandingkan dengan blog yang menggunakan kustom template.

Namun demikian bukan berarti kita tidak dapat melakukan kustomisasi pada template standar Blogger agar tampilannya menjadi lebih menarik bila dibandingkan dengan kustom template. Oleh sebab itulah dalam artikel sebelumnya yang berjudul “Inilah Beberapa Daftar Template Blog Terbaik Yang Pernah Ada” saya menyebutkan bahwa sebenarnya template standar yang disediakan oleh Blogger merupakan template blog terbaik yang pernah ada untuk platform Blogger (Blogspot), dengan salah satu alasannya yaitu karena kemudahan bagi kita bila ingin melakukan kustomisasi.

Salah satu dari kemudahan kustomisasi yang dapat kita lakukan adalah ketika kita ingin memodifikasi desain tampilan untuk setiap elemen halaman, termasuk diantaranya yaitu modifikasi widget dengan cara menambahkan bingkai dan warna latar untuk bagian tersebut. Dimana kustomisasi dapat dilakukan dengan menambahkan kode CSS tertentu ke dalam template untuk menggantikan kode CSS standar yang diberikan oleh Blogger.

Nah, dalam hal melakukan kustomisasi untuk bagian widget, dalam hal ini adalah memberi garis dan warna latar untuk bagian tersebut, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

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 #ArchiveList {

  margin: 0px;

}

.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;

}

Simpan template Anda.