Title sidebar ada hover

Assalamualaikum. hari ni rajin pulak buat tuto,mentang-mentang tak pegi sekolah. depan netbook 24jam . huhu :)
tadi blogwalking, and then jumpa blog ni . jealous tengo dia punya sidebar,bila sentuh dia bergerak;dengan kata lain ada hover :) cari punya cari tuto ,tak jumpe-jumpe macam mana nak buat.last-last godek-godek sendiri.penat tawu,kalau na amek tuto ni,bagitwu and creadit k:) perlu fokus(!) haha XD.

1) Mula-mula dashboard->design->edit html->tick expan widget template(penting)
2) Lepas tu tekan ctrl+f and cari code ni

h2 {

3) Korang perhatikan bawah atau pun anak-anak code tu,yang tu ialah code sidebar korang,mestilah korang dah tawu kan:) contoh anak-anak code tu,tengok gambar kat bawah ni.

4) Lepas tu,copy code ni

h2:hover {
font-family: gergio;
margin: 0 0 1em 0;
font-size: 12px;
color: #000000;
text-align:center;
background:#66ccff;
border-left: 4px dashed #3399CC;
border-top: 2px solid #ccffff;
border-bottom: 2px solid #000000;
border-right: 4px dashed #3399CC;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);

5) And paste dekat bawah code sidebar yang terakhir sekali. paham ?kalau tak paham,tengok gambar ni

-notepad-

6) Oke,dah siap. preview dulu .kalau tak ada error baru save ye.

NOTA KAKI:

1. code dalam ni semua code template amy, so korang kene godek-godek sikit bersesuaian dengan code sidebar korang ye:)
2. color ni untuk color tulisan title sidebar ketika hover.boleh cari dekat SINI.
3. text align boleh center/left/right. ikut suka korang la ye.
4. (-3deg) tu ialah berapa pusing senget korang punya title sidebar tu ketika hover.kalau lagi besar nombor,lagi senget. tapi paling besar 5 ja taw,kalau lebih-lebih berpusing-pusing korang punye title sidebar tu pulak . huhu.

Anak-anak semua paham tak ? :D . kalau faham,bagus ! kalau yang tak faham tu,rajin-rajin la bertanya dekat ruangan komen bawah ni.

---

Thank you for reading

---

Tweet