Design model sidebar blog

Design model sidebar blog untuk blogspot yang akan aku sharing sekarang ini gambarnya seperti di atas. Kodenya aku yang mengedit sendiri dan kalau mau membuat design sidebar seperti itu kodenya akan aku tuliskan di bawah nanti, caranya adalah sebagai berikut:

1.Login > Dashboard > Template > edit HTML

2.Expand template widget tick dan tekan F3 atau CTRL + F dan cari kode 

h2 { yang letaknya tidak jauh berada di bawah kode  /* Headings

Hapus dulu kalau di bawah kode h2 { ada kode mirip-mirip seperti berikut:

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

3.Letakkan kode berikut di bawahnya:

background: #FFD9EC;
border-left: 20px groove #ADADAD;
border-right: 20px groove #ADADAD;
text-align: center;
color:#2A0A12;
font-size:15px;
padding-bottom:5px;
margin-bottom:3px;
-webkit-transition-duration: 1.0s;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}

Kalau mau ditaruh border seperti gambar di bawah nanti/border dotted warna hitam, cari kode:

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

Letakkan kode berikut tepat di bawahnya:

.sidebar .widget {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border:2px dotted #000000;
background:#FCFCFC;
padding:8px;
margin:0 0 1.0em;
}

Kalau kode di atas diterapkan dalam blog jadi seperti di bawah ini gambarnya:

Border sidebar

4.Langkah terakhir tekan pratinjau dulu baru simpan template.

Itulah salah satu design sidebar pada blog editanku sendiri, kalau suka silahkan untuk mengambil kodenya, yang aku tandai dengan warna ungu/purple itu kode warnanya dan tentang ukuran px dan jenis border bisa ditukar sendiri sesuai keinginan.

Share :