Design model sidebar blog II

Ini adalah tutorial membuat design model sidebar bagian II yang gambarnya seperti di atas dan aku akan memberikan cara dan kodenya berikut:  

Design model sidebar blog II

1.Masuk ke Dashboard > Template > edit HTML

2.Tick Expand template widget dan cari kode 

h2 {

Hapus dulu kalau di bawah kode h2 { ada kode mirip kode berikut ini/kode bawaan dari template blogger:

margin: 0 0 1em 0;font: $(widget.title.font);color: $(widget.title.text.color);text-transform: uppercase; 

Ini untuk membuat border di bawah sidebar title seperti di bawah tulisan Navigations pada gambar di atas, kemudian letakkan di bawahnya kode:

text-align: center; border-bottom: 1px dashed #000000;font-size: 15px;
}

3.Cari kode:

/ * Widgets
----------------------------------------------- * /

4.Copy paste kode berikut ini dan letakkan di bawah kode no 3:

.sidebar .widget {
background: #FFF;
text-align:center;border-top: 5px groove #ACD6FF;
border-bottom: 5px groove #FF9797;
border-left: 2px solid #ACD6FF;
border-right: 2px solid #FF9797;
margin:5px 5px 1.0em;
padding:0px 5px 1.0em;
border-radius: 10px;
}

Tentang warna background nya kalau mau ditukar silahkan mencari kode warna sendiri, dan yang aku tandai dengan warna biru adalah kode warna nya.

5.Tekan pratinjau dulu baru simpan template.

Share :