Minggu, Februari 28, 2010

(UPDATE) Tutorial ; Autohide Shoutbox anda.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYgfSafBq348LBB8f4fTgpBBYI0BoLf5eqBSvH9GtbK3JV6JB8c3iXU_zqSTAtcEmGftHOLiPb2GYdNnbNyBzE9BmMprtiFvAyeKimU6Zk1oB2CP7lGy8qU0TS3yirBSajQzVeWC98CkR/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 :)

46 komentar:

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

    thnkss!

    BalasHapus
  2. cuba cuba cubaaa :P HAHAHAHA ur wc korg ;)

    BalasHapus
  3. Akk , cmne nk tukar warne tab tu ek ?

    BalasHapus
  4. Sayang-sayang-sayang thanks!!!
    Kagum betul!!
    :D

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

    BalasHapus
  6. kak hel.

    bolehhh cuba try sorok tp makesure dorg jmpa lah HAHA

    BalasHapus
  7. Ynn,
    terer la u main coding. teruja :D

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

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

    BalasHapus
  10. nak try nak try nak try.

    berat tak laling?

    BalasHapus
  11. wow!!! thanks untuk backlink ke pisyek.. hehe...

    nih yg pisyek suke nih... =P

    BalasHapus
  12. kenapa nak hide shotbox xbest la blogger nak walking nanti...huhu

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

    BalasHapus
  14. waahhhh menarik! nak cuba la. thanks liyanaa!

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

    BalasHapus
  16. mkaceh dear...gud tuto...hehehhee..

    BalasHapus
  17. mkaceh dear...gud tuto...hikhikhikk.......

    BalasHapus
  18. salam ziarah..masih belajar membuat blog..

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

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

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

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

    BalasHapus
  23. akak tak paham lah adik XD
    ni utk shoutbox pastu shoutbox tu pg mana? akak dah try tutorial link rainbow.tq2 :D

    BalasHapus
  24. aaa?mane nye shoutbox ko xnampak pong

    BalasHapus
  25. thanx yeah ! sy sudah pun mcubaa.. (:

    BalasHapus
  26. nak tkar warne n pic dye camne..??

    BalasHapus

Terima kasih kerana membaca

Mari luahkan isi hati anda juga :)

1. Jangan emosi sangat tau.

2. Luahkan dengan nada comel.

Loading

Tumit

Enter your email address:

Delivered by FeedBurner

 Subscribe in a reader

ping blog
BUAT DUIT DENGAN CHURPCHURP
tak ada blog pun boleh dapat duit dari internet ! guna lah facebook dan twitter anda. MORE here !