Cara Membuat Shout Box Sembunyi Ala zulkbo | Tutorial



Salam semua, dah ada yang bertanya maka saya jawablah ye.Tutorial bagaimana hendak membuat shout box sembunyi yang bordernya lut sinar(transparent)..he he, layan..


1-Login Blogger Dashboard,

2-Design,

3-Add A Gadget,

4-HTML/Javascript,

5-Copy dan paste kod di bawah pada content HTML/Javascript,



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

.gbtab{height:110px; width:30px; float:left; cursor:pointer; background:url('http://i31.servimg.com/u/f31/14/01/65/89/shoutb10.png') no-repeat}
.gbcontent{float:left; border:2px solid #666; background:#fffffg; 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">
CODE SHOUT MIX ANDA
<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script>

 6-Preview dulu kalau tak ada problem,

7-Save.




Posted by: Zulkbo zulkboCom Zulkbo Blog Updated at : Jumaat, Januari 28, 2011

32 Komen:

  1. Warna shout box saya merah..
    kalau anda tak suka boleh
    adjust sendiri di account
    Shout mix anda...

    BalasPadam
  2. Info yang berguna..
    trm ksh.

    BalasPadam
  3. Oh, macam tu rupanya. Sudah lama saya cari, terima kasih ye. Tapi tak tahu bila hendak ubah....

    BalasPadam
  4. Assalamualaikum sdra...

    Terima kasih berkongsi ilmu...

    BalasPadam
  5. Salam Zul.. terimakasih berkongsi pengetahuan saya suka jugak bender tu :)

    BalasPadam
  6. hehheh... thanks ye en.zul...sy dh lama gak nk buat mcm ni tp xtau hehehhe

    thanks again!!

    BalasPadam
  7. assalamualaikum abg zul..

    trime kasih ya...

    BalasPadam
  8. hmmm pernah buat sekali... tetiba hilang shout box... terus buat macam biasa.... heheheh

    BalasPadam
  9. @Alimaz-Kembara Terasing

    pulaks..?
    template tak sesuai
    kut..?selalu begitulah..

    BalasPadam
  10. pergghh sifu zul,

    terima kasih

    Terini dari blog AUC: Ikan Patin Curi ke ni?

    BalasPadam
  11. merah itu berani heeee..

    BalasPadam
  12. ada kotak jerit sllu berikan upacan...jgn tinggalkan spam yer huuu

    BalasPadam
  13. tips berguna...dh guna kat my blog.Thanks

    BalasPadam
  14. kekadang susah juga nak cari yang tersembunyi tu

    BalasPadam
  15. as salam,
    saya punya dan hilang..
    pling..

    BalasPadam
  16. Salam...

    Dulu pernah buat mcm tu tp ada blogger complain tak jumpa la, tak nampak la...

    BalasPadam
  17. thanks, saya ikut tunjuk ajar dari blog nie :)

    BalasPadam
  18. 1 lagi, erm, camne nak tuka gambar shoutbox tu ye??

    BalasPadam
  19. @-DieLa_kE_Ai-

    ermm..
    tukar url backround
    gambar mana yang anda
    mahu...

    background:url('http://i31.servimg.com/u/f31/14/01/65/89/shoutb10.png') no-repeat}

    BalasPadam
  20. salam
    banyak menulis banyak membaca
    banyak terkumpul ilmu dan idea

    BalasPadam
  21. sy juga nak merah...tahun ni tema merah

    BalasPadam
  22. salam
    steady tutorial ni, saya dah lama tak guna shoutbox ni, geram dengan marketers hehe

    BalasPadam
  23. nak buat tapi rasa macam tak nak buat. macam mana tu? hehehe...thanx...tercari2 gak tuto ni suatu masa dahulu. huhu

    BalasPadam
  24. main sembunyi2 pulak shout box sekarang nie...

    BalasPadam
  25. SALAM..
    TERIMA KASIH,
    SEMUA YANG SUDI MENINGGALKAN
    KOMEN ANDA DI SINI..AMAT SAYA
    HARGAI..JAZAKUMULLAH KHAIR..

    BalasPadam
  26. salam..abg zul..saya punye suda jadi shoutbox yang abg bagi ni..saya nk tanye..cm ne nk tukar ayat shoutbox tuh?saya nk letak nama saya dekat ayat shoutbox tuh...

    BalasPadam