Skip to content Skip to sidebar Skip to footer

Design model sidebar hover cantik

Design model sidebar hover cantik
Contoh model sidebar nya adalah seperti gambar di atas, itu adalah editanku sendiri dan kodenya akan aku berikan di bawah nanti. Pada sidebar title nya kalau cursor mouse menyentuh akan bergerak miring dan hover. Cara membuat design model sidebar cantik seperti di atas caranya harus melakukan sedikit coding untuk memasukkan kodenya seperti berikut:

1.Dasboard > Template > edit HTML
2.Tick Expand template widget dan tekan F3/CTRL + F dan cari kode:
h2 {  (yang letaknya di bawah  /* Headings)
Hapus dulu kalau di bawah kode h2 { ada kode mirip-mirip berikut/kode bawaan dari blogger:
margin: 0 0 1em 0;font: $(widget.title.font);color: $(widget.title.text.color);text-transform: uppercase;
3.Letakkan kode berikut ini di bawah kode no 2:
text-shadow: 2px 2px 3px #FF79BC;
padding:3px;
margin:1.5em 0 .75em; font-size: 12px;
background: #D2E9FF;
border-top: 2px dashed #D0FAFF;
border-bottom: 1px dashed #000000;
border-left: 4px solid #ff7575;
border-right: 1px solid #07A5FF;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
text-align:center;
}
h2:hover {
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}

Yang aku tandai dengan warna pink adalah kode warna background dan border, boleh diubah menurut keinginan, untuk yang lain seperti ukuran px boleh diubah juga, pintar-pintarlah mengeditnya xD.

4.Untuk membuat border warna pink dotted di pinggir/yang kotak square itu cari kode:
.sidebar .widget {
5.Copy paste kode di bawah ini dan letakkan tepat di bawahnya:
background:#FCFCFC;border:1px dotted #FF9797;margin:0 -6px 1.6em -5px;padding:0px 10px 15px 10px;
}
6.Kode warna yang aku tandai dengan warna pink juga boleh diubah sendiri, juga ukuran px border, pading, margin/lebar batas ubahlah sesuai keinginan. Kalau semua sudah selesai, tekan pratinjau dulu untuk melihat hasilnya jadi apa nggak, baru simpan template.

1 comment for "Design model sidebar hover cantik"