Feb 28 2010

(UPDATE) Tutorial ; Autohide Shoutbox anda.

Published by at 4:35 am under Blogger,Tutorial

selamat pagi.

ini hari nak cakap banyak pun tak boleh. sebab tak ada masa and tak dapat nak online lama lama sebab internet rumah ini macam ada sikit problem. HAHAHAHHAA benci T____________T

oh ramai tanya macam mana nak buat shoutbox autohide mcm tu. heh padahal dah ramai yang buat tapi tak apa, saja nak bagi anarm.net femes sekejap, ini tutorial dia.

pegi layout>page element>add gagdet ;

<style type=”text/css”>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;} 

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.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, 30-w) : moveGB(20-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”>

MASUKKAN CODE SHOUTBOX KORANG KAT SINI

<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 = (30-gb.offsetWidth).toString() + “px”;
</script>

Note :

  • 50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.
  • color pepel itu masukkan code shoutbox :)

**Read more / credit: anarm.net ( tutorial sorokkan shoutbox )

**Tab warna berlainan : pisyek.com ( tukar tab kaler lain )

** nak lagi kacak boleh usha : nazrien.com

*untuk ubah color and word, guna photoshop ke apa tah serius aku malas nak buat sbb tu aku guna yang pisyek punya saja :D

selamat berhujung minggu :)

Mereka google ini :

 Hello, saya Liyana Lunia . 22 . Industrial Computing student . saya berbloging secara random .

Random Posts

42 responses so far

42 Komentar to “(UPDATE) Tutorial ; Autohide Shoutbox anda.”

  1. # Vieraon 28 Feb 2010 at 4:40 am

    wahh,tenggs kak bg tuto nie..
    nak try la nnti.
    :) )

    thnkss!

    [Reply]

  2. # black_melon 28 Feb 2010 at 4:48 am

    thnax,,,,,berguna nie,,,

    [Reply]

  3. # Liyanaa.on 28 Feb 2010 at 4:58 am

    cuba cuba cubaaa :P HAHAHAHA ur wc korg ;)

    [Reply]

  4. # d-ba.on 28 Feb 2010 at 6:02 am

    Akk , cmne nk tukar warne tab tu ek ?

    [Reply]

  5. # Diana Naubion 28 Feb 2010 at 6:17 am

    Sayang-sayang-sayang thanks!!!
    Kagum betul!!
    :D

    [Reply]

  6. # sis ainon 28 Feb 2010 at 6:19 am

    akak…. camne nak tukar warna tab tu??? lagi satu yang perkataan shoutbox kat tab tu macam mana nak tukar ke perkataan lain?? macam yang kak mieya bble talk buat.. please tolong saye ye kak…

    [Reply]

  7. # helena'son 28 Feb 2010 at 7:00 am

    ohh bleh sorok2 eh..hahaha

    [Reply]

  8. # Liyanaa.on 28 Feb 2010 at 7:50 am

    kak hel.

    bolehhh cuba try sorok tp makesure dorg jmpa lah HAHA

    [Reply]

  9. # weenon 28 Feb 2010 at 9:43 am

    Ynn,
    terer la u main coding. teruja :D

    [Reply]

  10. # topoon 28 Feb 2010 at 9:54 am

    fuyo hebat ni.. :D
    terima kasih di atas link yg telah diberikan hohoho

    [Reply]

  11. # nuraiminajiahon 28 Feb 2010 at 9:56 am

    kaka..nak tnya ckit…camne nak wat header cam akak neyh???akak wat kat maner??ade x lmn web yg ajar??

    [Reply]

  12. # sickchildon 28 Feb 2010 at 10:46 am

    nak try nak try nak try.

    berat tak laling?

    [Reply]

  13. # Pisyekon 28 Feb 2010 at 12:37 pm

    wow!!! thanks untuk backlink ke pisyek.. hehe…

    nih yg pisyek suke nih… =P

    [Reply]

  14. # Meowon 01 Mar 2010 at 2:18 pm

    kenapa nak hide shotbox xbest la blogger nak walking nanti…huhu

    [Reply]

  15. # zetyon 29 Mar 2010 at 12:54 am

    syg..i gune tutorial u ni..thanks;)

    [Reply]

  16. # Liyanaa.on 29 Mar 2010 at 2:02 am

    baik sygg :D

    [Reply]

  17. # Fatimahon 04 Apr 2010 at 2:26 pm

    Terima KAsih!!!!!!!!

    [Reply]

  18. # ** a i l y **on 24 Apr 2010 at 12:01 pm

    waahhhh menarik! nak cuba la. thanks liyanaa!

    [Reply]

  19. # Liyanaa.on 24 Apr 2010 at 1:16 pm

    sama sama ailyl manis :P

    [Reply]

  20. # hani maduon 26 Apr 2010 at 10:44 am

    hii..
    i suke and i borrow it k..

    [Reply]

  21. # continuously writingon 09 May 2010 at 12:34 pm

    thanx utk tutorial ni (:

    [Reply]

  22. # L.O.V.Eon 13 May 2010 at 12:35 pm

    mkaceh dear…gud tuto…hehehhee..

    [Reply]

  23. # L.O.V.Eon 13 May 2010 at 12:45 pm

    mkaceh dear…gud tuto…hikhikhikk…….

    [Reply]

  24. # PinQibon 02 Jun 2010 at 5:12 pm

    thnkxxxxx

    [Reply]

  25. # Nazwa Amidion 08 Jun 2010 at 2:35 am

    Thankss yerr :)

    [Reply]

  26. # abg.long2010on 01 Sep 2010 at 3:11 pm

    salam ziarah..masih belajar membuat blog..

    [Reply]

  27. # norhusni bt.ramlion 05 Sep 2010 at 12:45 pm

    blog anda sgt cntik…

    [Reply]

  28. # RoSeNoi?A'n'Lon 03 Nov 2010 at 9:38 am

    Ni sangat bagus.. ~ nnt nak try lah.. thanks for sharing.. muahhXxxx

    [Reply]

  29. # HaRunA sHikAnOon 12 Nov 2010 at 5:58 am

    nk cube..yeay^^

    [Reply]

  30. # mizz abellon 23 Nov 2010 at 12:10 am

    salam akak . tq cz buatt kn tutorial ni :)
    dh try , mnjd pulak tue .
    tq akak ~

    [Reply]

  31. # MazTieon 23 Nov 2010 at 8:16 am

    Tq !

    [Reply]

  32. # nikaon 03 Dec 2010 at 11:08 am

    thanx . hehe . :)

    [Reply]

  33. # ||aLeaSaRa||on 05 Dec 2010 at 7:55 pm

    yuhuu…dah berjaya pun…pagi2 buta ni jadi rajin lak follow tutorial sis dan semua menjadi ye..haa….tqvm sis!

    [Reply]

  34. # ika honey bunnyon 11 Dec 2010 at 8:08 pm

    ynn. ika nak share tutorial ynn dalam blog ika ye? hehe. nnti ika bagi credit

    [Reply]

  35. # misluvcoklaton 18 Dec 2010 at 5:20 pm

    tq sis..
    aww ~
    heheh ^^

    [Reply]

  36. # shafiqa viva lavidaon 20 Dec 2010 at 9:07 pm

    x phm lah

    [Reply]

  37. # ~aina~on 24 Dec 2010 at 8:57 am

    yeay..dh jd..tq

    [Reply]

  38. # Syiraon 25 Jan 2011 at 9:35 am

    thanks ye akak ! ^___^

    [Reply]

  39. # ain rahmanon 15 May 2011 at 8:49 am

    y x bole … ajr blk ..

    [Reply]

  40. # farinasyauqinaNo Gravataron 03 Jul 2011 at 5:49 am

    thanks a lot! :)

    [Reply]

    Liyana LuniaNo Gravatar Reply:
    July 4th, 2011 at 3:07 am

    ur welcome dear ;) )

    [Reply]

  41. # BumzNo Gravataron 01 Aug 2011 at 2:05 pm

    Kunjungi jg http://www.javapost.tk ^^

    [Reply]

Trackback URI | Comments RSS

Leave a Reply