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..

Milford Sound in New Zealand
border:1px solid black;


dotted

  Milford Sound in New Zealand
border:2px dotted #545565;


groove

Milford Sound in New Zealand
border:6px groove #545565;


double

Milford Sound in New Zealand
border:6px double #545565;


outset

Milford Sound in New Zealand
border:6px outset #545565;


inset

Milford Sound in New Zealand
border:6px inset #545565;


ridged

Milford Sound in New Zealand
border:6px ridge #545565;


dashed

Milford Sound in New Zealand
border:6px dashed #545565;


mixed

Milford Sound in New Zealand
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..


2 comments:

Memo said...

tq admin! btw blog kmo cute la...;)

syapik naser said...

@Memo haha,,ok~