Design model sidebar hover cantik II

Gambar di atas adalah design sidebar editanku sendiri tadi dan aku ingin mengkoleksi di daftar tutorial blog aku sekalian ingin aku tuliskan kodenya di bawah nanti.

Design model sidebar hover cantik II

1.Dashboard > template > edit HTML

2.Tick expand template widget > tekan F3/CTRL + F dan cari kode:

h2 {

Kalau di bawah h2 { masih ada kode bawaan dari blogger mirip-mirip kode di bawah ini sebaiknya hapus dulu:

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

3.Letakkan kode di bawah ini tepat di bawahnya:

text-shadow: 0 0 0.1em #A9A9F5, 0 0 0.1em #A9A9F5;
background:url (URL BACKGROUND);
text-align:center;
border: 1px dotted #A9BCF5;
border-right:5pt solid #FF95CA;
border-left:5pt solid #FF95CA;
margin:0 0 1.5em;
padding:7px 10px 7px 10px;
text-align: center;
margin: 0 0 1em 0;
font: bold normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-transform: uppercase;
color: #8E8E8E;
margin: .5em 0;
}
h2:hover {
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}

Model yang lain:

background:#D2E9FF;

text-align:center;

border: 1px dotted #ccc;

border-right:5pt solid #ccc;

border-left:5pt solid #ccc;

margin:0 0 1.5em;

padding:7px 10px 7px 10px;

text-align: center;

margin: 0 0 1em 0;

font: bold normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

text-transform: uppercase;

color: #8E8E8E;

margin: .5em 0;

}

padding:3px;

margin:1.5em 0 .75em; font-size: 12px;

background:#D2E9FF;

border-left: 4px solid #FF9797;

border-right: 4px solid #ccc;

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

text-align:center;

}

Warna pink/pink itu kode warna, merah url background dan yang bawah warna biru itu kode hover nya, kalau tidak mau menaruh hover ya gak usah ditaruh kode yang aku tandai dengan warna biru tapi cukup menaruh kode yang atas saja. Di bawah ini model h2:hover { yang lain:

h2:hover {background: #FFF url( URL BACKGROUND);-moz-border-radius: 5px;border-radius: 5px;-webkit-transition-duration: 1.0s;border-top: 1px dashed #ff7575;border-left: 4px groove #ff7575;border-right: 20px solid #ff7575;border-bottom: 1px solid #ff7575;}

4.Untuk menaruh border luar yang warna pink solid  (jenis-jenis nama border) cari kode:

/* Widgets
.sidebar .widget {

Mungkin di bawah kode di atas masih ada kode bawaan dari blogger sebaiknya dihapus dulu kemudian letakkan kode berikut ini di bawahnya:

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #FF95CA;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px}
}

5.Tekan pratinjau dulu dan simpan template.

Share :