CARA MEMBUAT BINGKAI JUDUL

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.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]>

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;

}

Ketiga, simpan template Anda.

Perlu diketahui bahwa background yang digunakan dalam rangkaian tersebut merupakan warna solid (dalam hal ini adalah #bbbbbb dan #ffffff), sehingga agar tampilannya menjadi seperti gambar di atas maka Anda dapat mengganti kode warna pada background: dengan gambar atau warna gradasi. Sebagai contoh misalnya dengan memakai kode di bawah ini.

Background dengan menggunakan gambar (misalnya untuk judul widget).

background: url("https://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/

AAAAAAAAAPI/SYKtH9zZlXA/s800/Menu.png") repeat-x scroll left bottom rgb(243, 244, 246);

Background dengan menggunakan warna gradasi (misalnya untuk area widget).

background: -moz-linear-gradient(center top , white 20%, rgb(243, 243, 243) 100%) 

repeat scroll 0% 0% transparent;

Demikian halnya untuk warna garis dan warna bayang-bayang, Anda dapat menyesuaikannya dengan desain tampilan halaman blog yang Anda kelola, yaitu dengan cara mengganti kode warna yang terdapat pada border: dan box-shadow:. Dan perlu diketahui pula bahwa kode tersebut dapat diimplementasikan pada semua kategori template standar Blogger (Mudah, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan). Terkecuali untuk kategori template PT Keren Sekali, kode tersebut hanya dapat diterapkan pada desain template yang belum memiliki bingkai pada bagian widget. Karena apabila diimplementasikan pada template dalam kategori PT Keren Sekali yang telah memiliki bingkai pada widget, maka tampilannya malah akan menjadi tidak proporsional.