Syaz Harzays Minme: Tutorial : CBOX macam syaz

Pages

STATUS UPDATED!
Assalamualaikum korang korang and korang... terima kasih kerana sudi singgah kat blog syaz ni.. hihihihi...

28 Jan 2014

Tutorial : CBOX macam syaz

Assalamualaikum..

Hyep.. Aloha loca people... hihii...
 syaz nak buat tutorial .. hahaha... tutorial ni request by sum1..


dia RQ at ask.fm.. tak tau sapa... tapi xpa.. syaz bantu awak oke.. :)
tutorial ni boleh pakai untuk DENIM TEMPLATE / BLOGSKIN...
senang jee.. follow je k.. 

DENIM TEMPLATE

1. Dashboard --> Layout --> Add Gadget --> HTML/Java Script

2. Copy kod yang dekat bawah ni :

<style>
.cbox{
position:fixed; top:20px; right:10px;
padding-top:0px;padding-bottom:7px;
text-align:center;
height:20px; width:100px;
overflow:hidden;
border:3px solid #993399;
color:#888;
border-radius:100px;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
background-color:#FFFFFF;
z-index:999;
}
.cboxcontent{
padding-top:10px;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.cbox:hover {
border:3px dotted #993399; padding:15px; height:150px; width:330px;
border-radius:200px;
}
</style>
<div class="cbox">
<center>
<center>
<img src="http://i.imgur.com/fMhxnaJ.png" style="background:none;border:none;padding-top:0px;" /></center></center>
<div class="musicplayer">
<center> CBOX CODE HERE </center>
</div></div>

3. Dah copy?? Kalau dah . boleh PASTE kat dalam html korang tadi...oke...

4. SAVE.. boleh view dulu... (korang boleh ubah ekot suka korang sendiri)


p/s:

abc123 - yang ni untuk warna border korang.. tukar ikut warna pilihan sendiri
abc123 - warna background.. ( kalau nak guna background yang di upload.. delete "background-color:#FFFFFF", gantikan dengan "background : url(kod bg korang)"... oke..
abc123 - kod cbox/shoutbox korang



BLOGSKIN

1. Dashboard --> Template --> Edit Html

2. Tekan F3, then cari kod yang dekat bawah ni :

</style>
dah jumpa?? ok next..

3. Copy kod yang dekat bawah ni pulak :

<style>.cbox{position:fixed; top:20px; right:10px;padding-top:0px;padding-bottom:7px;text-align:center;height:20px; width:100px;overflow:hidden; border:3px solid #993399;color:#888;border-radius:100px;-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;background-color:#FFFFFF;z-index:999;}.cboxcontent{padding-top:10px;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;.cbox:hover {border:3px dotted #993399; padding:15px; height:150px; width:330px;border-radius:200px;}</style><div class="cbox"><center><center><img src="http://i.imgur.com/fMhxnaJ.png" style="background:none;border:none;padding-top:0px;" /></center></center><div class="musicplayer"><center> CBOX CODE HERE </center></div></div>

4. Dah copy?? kalau dah... PASTE dekat bawah kod yang korang dah cari tadi...

5. PREVIEW dulu... kalau dah berkenan tu.. boleh la save... hihihi


p/s:

abc123 - yang ni untuk warna border korang.. tukar ikut warna pilihan sendiri
abc123 - warna background.. ( kalau nak guna background yang di upload.. delete "background-color:#FFFFFF", gantikan dengan "background : url(kod bg korang)"... oke..
abc123 - kod cbox/shoutbox korang


DONE... gud luck... hope tuto yang syaz buat ni membantu la erk... kalau ada apa2 pertanyaan . boleh tanya terus dekat syaz... :)

7 comments:

  1. baru perasan,cbox Syaz unik.xpnh lg jmpa kt mna2 blog.tQ 4 de info Syaz.len ary t akk cba.pguna shoutbox pn blh pkai ka???

    ReplyDelete
    Replies
    1. sama2 akak zahhh... hihi.. boleh kak... cbox or shoutbox .. dua2 boleh pakai... :)

      Delete
  2. Salam...abak follow sni... pkongsian yg sngat bguna kpada warga blogger

    ReplyDelete
    Replies
    1. hyepp abakk.. salam... syaz dah follow abak balik oke.. thanksss :)

      Delete
  3. Kak syaz terima kasih sangat-sangat. Dah dapat jimat ruang kalau guna chatbox macam akak :D

    ReplyDelete
  4. waw!.uniknya shoutbox akak!.=D

    ReplyDelete

Assalamualaikum...
alang-alang dah baca tu..
mintak tolong komen sekali boleh??
hehehehe ^^

Syaz Harzays Minme© . Designed by MaiGraphicDesign