tutorial : sorok shoutbox

ASSALAMMUALAIKUM & SELAMAT MEMBACA


cikgu trex akan mengajar cara buat shoutbox tersorok macam blog ni.. nampak tak gambar tulis chit chat ni? heheheh... bila picit kat situ.. 


nanti dia jadi macam ni... nampak tak dia keluar tu... cantik tak? heheheheh... jimat sikit ruang widget kat blog tu bila sorok shoutbox camni.. kemas sikit kan?? heheheheh...


cara-cara

1) DASHBOARD > PAGE ELEMENT > ADD GADGET > HTML

2) Copy CODE kat bawah ni



<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:172px;
width:120px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNtHo41XKfmmtoC0OAYFHqmxCkyxfY4ZzGEVEs4dg6HaP4vxnz7QS3LwI-9xZKGo4JVu1VtC8kBdg3MZ9LmCzGt5IgQ0bxNBzSBhe0V52cAzUOtenG_olN5Ezi0WYvg5OtIry8r7nHSo/s1600/shout.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 120-w) : moveGB(120-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
LETAK CODE SHOUTBOX KORANG
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (120-gb.offsetWidth).toString() + "px";
</script>
NOTA 
warna merah :: kedudukan shoutbox korang... adjust ikut suka la nak kat atas ke bawah ke... try and error okay?
warna oren :: saiz shoutbox... adjust sesuka rasa korang ye... =)
warna hijau :: code gambar yang korang nak letak dekat shoutbox... macam trex letak gambar sendiri dengan tulisan chitchat tu.. nampak x? ni ikut suka hati korang la nak letak gambar apa pun.. 
warna biru :: tu code shoutbox korang lah... kalau pengguna shoutmix.. pergi amik code dekat shoutmix pastu tempek kat situ.. ada faham?? heheheh...




kalau tak jadi.... hurmmm tak tahu la den... sebab kalau ikut code ni betul2.. insyaALLAH jadi.. hihih =)


SELAMAT MENCUBA~
Labels:
loading..

23 comments

  1. CikbintangFebruary 10, 2011 at 8:32 PM

    thanx for da info
    neway...xphm mana nk dpt code tuk ltak gmba sdri kt shoutbox..can i know???

    ReplyDelete
  2. athirahassinFebruary 10, 2011 at 8:37 PM

    oh... gambar tu kta design sendiri lepas tu upload dekat photobucket.com... pastu amik code dekat direct link after kita upload tu...

    tp bkn dekat photobucket je leh... kat imageshack pun boleh... flickr... tp trex guna photobucket.. heheh..

    kl still x sure cena.. insyaALLAH trex bt tutorial nya... tp kena update sini selalu laa ea..

    thanx =)

    ReplyDelete
  3. CikbintangFebruary 10, 2011 at 8:41 PM

    oh ye....ok cikbintang try by myself first
    tgk jd ke x..hehehee

    mmg jenguk...but silence readers..hehehe...

    thanx ye cik trex comel^_^

    ReplyDelete
  4. athirahassinFebruary 10, 2011 at 9:16 PM

    hhheee.. thanx for coming =)

    ReplyDelete
  5. Along UsopFebruary 11, 2011 at 2:00 AM

    nak try!!!

    tapi takut blog jd slow..nguu..

    ReplyDelete
  6. ardinihumairaFebruary 11, 2011 at 7:15 AM

    sape ado shoutbox mesti cuba!;)

    ReplyDelete
  7. athirahassinFebruary 11, 2011 at 10:34 AM

    along :: ehhh... rs ny x slow kot...

    ReplyDelete
  8. athirahassinFebruary 11, 2011 at 10:34 AM

    dni :: =)

    ReplyDelete
  9. sazali yusofFebruary 11, 2011 at 2:20 PM

    seuju dgn athirah.. tak slow kot,, sebab dia dah float kat tepi.. :))

    ReplyDelete
  10. athirahassinFebruary 11, 2011 at 2:24 PM

    sazali :: mekasih =)

    ReplyDelete
  11. Tieah MadianFebruary 11, 2011 at 3:00 PM

    Wah, hebat ek..
    Tutorial..
    Dah buat dah dulu..
    Huhuhu..

    Latest entry : Lagi Sambungan 5 Masalah Cinta Terhangat

    ReplyDelete
  12. athirahassinFebruary 11, 2011 at 4:25 PM

    bgs la =)

    ReplyDelete
  13. Along UsopFebruary 11, 2011 at 5:21 PM

    mungkin slow bile bukak byk2 tab kot.. heheh.. =P

    ReplyDelete
  14. athirahassinFebruary 12, 2011 at 12:23 AM

    along :: mungkin la kot.. xpun sbb tenet slow

    ReplyDelete
  15. ilanilyanaFebruary 12, 2011 at 7:50 PM

    awak bile nk buat tutorial tab shoutbox muke kite tu. kite nk buat jugak. ;)

    ReplyDelete
  16. athirahassinFebruary 12, 2011 at 8:20 PM

    hurmm?? xfahammm

    ReplyDelete
  17. sayatashaFebruary 17, 2011 at 10:55 AM

    kalo nak buat yg same kat facebook profile cmne ye?bole x buat tutor utk tu...nak sorok facebook badge kat tepi cm shoutbox

    ReplyDelete
  18. athirahassinFebruary 17, 2011 at 12:35 PM

    yg ad twitter, youtube, sume tu ke?? kena buka buku balik.. insyaALLAH ada masa trex bt tutorial :)

    ReplyDelete
  19. ShaZa'sFebruary 18, 2011 at 4:38 PM

    As salam

    Athirah, akak buat dah jd..cuma gambar tu kan athirah set berapa besar ekk sblm upload kat photobucket tu...

    ReplyDelete
  20. Puteri Ummi AtiliaApril 8, 2011 at 11:09 PM

    salam.
    i have tried. but, bile preview kuar pic cik trex. da tukar tapi tak kuar pic lak. kena png ke pic tue ? jpg takleh ?

    ReplyDelete
  21. Puteri Ummi AtiliaApril 9, 2011 at 2:04 AM

    yeay ! dah jadi. bape jam ngadap laptop nak buat. ahaks ! :D tapi tak reti nak bajet saiz pic tepi tue.. hoho btw, thanks for the tutorial. :) sng nak paham..

    ReplyDelete
  22. Schu haDaFebruary 14, 2012 at 7:16 PM

    npe x jd2 gx shoutbox ni. .sobs :'(

    ReplyDelete
  23. Watch Movies 2uJuly 30, 2012 at 3:20 AM

    Thanks Cik Trex... dah jadi dah :P TerBAIKKKK !!! huhuhu Selamat Puasa :)

    ReplyDelete

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...