new sidebar border style

hello,,selamat pagi anda2 sekalian,,kali ni mahu sambung lagi buat tutorial lah,bace tajuk kat atas tu,new sidebar border style,actually,aku rase tak lah baru pon,tapi melalui penyelidikan aku,tak ramai pon yang gune style2 semua ni,so aku nak mengajak lah korang2 semua try style yg aku nak bagi ni pulak,,kalau dah jarang org gune,so org mesti anggap bende ni bende baru,,ye dak ? haa,,so jom lah kita try,so same2 kite punya blog nampak baru dan cool saja,,

firstly,korang cari dulu code .sidebar h2 {

dah jumpa ?? bagus2,,lepas tu,step yang kedua,korang boleh la copy code yang aku senaraikan kat bawah ni yer,,

solid..

border:1px solid black;

dotted

  

border:2px dotted #545565;

groove

border:6px groove #545565;

double

border:6px double #545565;

outset

border:6px outset #545565;

inset

border:6px inset #545565;

ridged

border:6px ridge #545565;

dashed

border:6px dashed #545565;

mixed

border-width:10px;border-color:#545565;border-style:dotted dashed solid double;

okey,kalau dah siap ambik,korang paste lah bawah .sidebar h2{ tadi taw,pastikan code lama dipadam taw sebelum buat ni,sebab nanti bercampur baur nanti dah tak jadi..okey !! dah paste kan,,lepas tu korang boleh la letak code yang ini pulak...copy n paste bawah code border yg korang ambik kat atas tadi..

padding:5px ;
background-image: url('http://i1200.photobucket.com/albums/bb323/NurSyafiq_Naser/body.jpg');
margin: 1.6em 0 .5em;
padding: 4px 5px;
font-size: 115%;
color: #888888;
font-family: century gothic;
text-align: center;
font-weight: normal;
text-decoration: none;
}

paste bawah code border tadi taw !!..

sekarang ni untuk mengubahnya pulak..

ungu - size border

maroon - warna border

biru -background image

kuning - warna tulisan

hijau - font

okey,done ! jap2,,kalau korang nak yg macam aku kan,bila hover je keluar bunga kat hujung tu kan,korang boleh lah paste kat bawah code2 diatas tu,korangkan dah siap edit code2 kat atas tu,so korang boleh smbung letak code ini plak.. contohnya macam gmbar bawah ni

klik untuk tumbesaran..

YANG HIJAU TU CODE HOVER

YANG OREN TU CODE YANG KORANG DAH FOLLOW ATAS TADI

so,korang boleh la copy code ni

.sidebar h2:hover {
background-image:url( http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic009demoji_15702394decoojp.gif);
background-color: #FFECEC;
background-position:bottom right;
background-repeat:no-repeat;
-webkit-transition-duration: 2.4s;
}

biru- code icon yg akan keluar nanti

merah - warna background selepas hover nanti..

kali ini pulak,,,,tuto untuk bila kita hover jadi senget,,

korang copy code ni lepas tu paste bawah code atas tadi,,yg ini bila di hover taw.same je macam atas,tapi ini senget..

.sidebar h2:hover {
background-image:url( http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic009demoji_15702394decoojp.gif);
background-color: #FFECEC;
 -moz-transform: rotate(10deg);-webkit-transform: rotate(10deg);-webkit-transition-duration: 3s;}

ungu- url icon image

pink -warna background selepas hover

dah siap tu,,try priview lah,,kalau okey save lah yer..

kalau tak paham boleh tanya yer..

k bye..