Apr 2, 2011

Tutorial | Cara Hide Dan Tukar Tab Shoutbox

Salam to all readers..

Mesti korang pelik kan
tetiba kali ni Dil buat tutorial pasal blog pula
*biasanya tutorial photoshop je memanjang..heheh

Bukan apa, ada readers Dil
request tutorial pasal shoutbox yang letak gambar ni.
Alaa, shoutbox macam dalam blog Dil ni..


Actually senang je nak buat shoutbox macam ni..
Jum tengok tutorial yang Dil sediakan untuk korang..




Langkah 1

Log in blog>Dashboard > Layout > Add A Gadget.
Seterusnya klik pada HTML/Javascript.

Langkah 2

Paste kan code kat bawah ni dalam content HTML/JavaScript.

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

.gbtab{
height:400px;
width:200px;
float:left;
cursor:pointer;
background:url('URL GAMBAR/ICON') 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, 100-w) : moveGB(90-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 kod Shout Box Anda di 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 = (100-gb.offsetWidth).toString() + "px";
</script>

Langkah 3

Klik untuk Save.

nota kaki:

URL GAMBAR/ICON
untuk mendapatkan URL gambar/ icon,
korang boleh uploadkan gambar korang dekat Picasa ataupun Photobucket.

33 comments:

  1. kalo taknak letak gambar just kena buang yang gambr tu jela eyhh ?

    ReplyDelete
  2. @ munirah: kalau xna pakai gmbar, just letak url asal tab shoutbox awak..

    ReplyDelete
  3. cik dil rajinnye wat tutorial..
    bagus2..keep it up..

    ReplyDelete
  4. wah!bgus..nnt bole la tnye doctor blog lagik yea..wee!tocey..muwah!

    ReplyDelete
  5. Thanks for the info cik DIl :) Hehe . Tapikan kenapa bla syai bkk profile dye ade kat tengah2 ? Kene tekan baru dia ke tepi ? hehe

    ReplyDelete
  6. x jd la sy buat..xtau nape...pic kuar then hilang...shout kuat kt tgh2 plk 2....huhu,,,,

    ReplyDelete
  7. THANXX KAK! I'VE MADE IT! THANKS ALOT FOR YOUR TUTORIAL:)

    ReplyDelete
  8. wah...blog ni mmg best la...siap ada tutorial lagik....kalu jmpa blog ni awal2 dlu...msti dh lawa page aku...:D

    ReplyDelete
  9. kat dahboard tu memg akn kluar layout eh?tpi sy pnya dashboard xkluar pn...cume kluar yang nie, View Profile
    Edit Profile
    Edit Photo
    Edit Notifications

    You are not an author on any blogs yet, create one now to start posting!

    Create your blog now

    Can't find your blog? See "My blog disappeared from my account!"...

    hmm..maaf, sy msih baru di blog nie =)...tq 4 yr help...

    ReplyDelete
  10. akak dil , kenape saya punya x jadi .. Saya x nak gambar but x tahu nak buat camne kalau nak buang code gambar tuh .. Macam mana kak dil?

    ReplyDelete
  11. HuRuL AiNi: kalau xna pakai gmbar, just letak url asal tab shoutbox awak..x pon, meh dil editkan coding untuk awak..bg email awak

    ReplyDelete
  12. kalo nk tuka tulisan shoutbox bagi comey2 mcm cik dil pye cmne????

    ReplyDelete
  13. best3...nk try wat la nnti wlaupown xreti sgt.thx eaa

    ReplyDelete
  14. tak jadi pon.
    terus shoutboz tu ilangg..
    huhu...

    ReplyDelete
  15. sume2 tak ley.
    dh folo da cara2 tu , copy paste and msukkan url gamba dri photobucket.
    bile tekan save then preview, tak jadik pun. plus shoutbox die ilang terosss... huhuh..

    ReplyDelete
  16. saya dah buat dan menjadi.tapi kenapa saya punya lebar dan besar ek?nak adjust kat mane nak bagi kecik mcm kamu punye?

    ReplyDelete
  17. cik dil..saya dah buat dah tutorial ni..tapi bila je bukak blog sy,mesti shout box tu terkeluar sikit..pas tu,bila klik kat tab shout box tu untuk tutup..baru dia ok..cam ne nak solve problem ni ek?jasa cik dil amat dihargai..:)

    ReplyDelete
  18. kak dil, wanie punye takjadi pon. :(
    wanie baru lagi dalam blog2 nie..
    try tak jadi pon..tak keluar pape..

    ReplyDelete
  19. cik dik.. beminat ngan ni..tp tak bape paham... btw ni yg shoubox boleh hide tu ke?? mean kalau nk komen kilk kt shoutbox baru dia kua dr bahagian tepi tu eh?

    ReplyDelete
  20. npe nie...dh siap dh..dh mau dh...tpi ble pgi ke blog aku..tmpt chat tetibe kuar...kite x tkan gmbo lgi..dh kuar..tgnok rr..http://adnanbotey.blogspot.com/

    ReplyDelete
  21. errr. dah buat tapi macam error je. boleh tolong betulkan tak?

    ReplyDelete
  22. kaka dil , tak jdi lah wanie buad ! mase mcok kan url icon tuh ,ty tngh2 dea kluar code ! cm ne tuh ?

    ReplyDelete
  23. kaka dil , tak jdi lah wanie buad ! mase mcok kan url icon tuh ,ty tngh2 dea kluar code ! cm ne tuh ?

    ReplyDelete
  24. ur banner is sooooo cute! :D

    ReplyDelete
  25. knp anis x dpt copy paste code pon :(

    ReplyDelete