Tutorial Sembunyikan Shoutbox Blog

Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)



Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript


<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.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">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<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>




Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)

TAMBAHAN.

Secara default, tab shoutbox adalah berwarna hijau, anda boleh menukar mengikut warna yang anda mahu dengan gantikan url yang anda mahu.
Cara Sembunyikan Shoutbox Dalam Blog

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}


Anda copy sahaja mana² url dari tab di bawah ini.
(tidak tahu cara dapatkan url gambar.?)


Cara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam Blog


Tab kredit:ohcerita.com

135 comments:

  1. mau tanya boss, kalau mau pake yang warna buttonnya bisa ganti-ganti (blink2)gimana caranya, saya pernah liat di blog lain kayanya menarik juga tuh...btw saya dah follow blog ini dan mohon follow baliknya...nice share..

    ReplyDelete
  2. kod shoutbox mcm ne 2??? x phm...

    ReplyDelete
  3. wau.. ade banyak color.. thank share

    ReplyDelete
  4. weee..ada bnyak pilihan.thanks tuk tuto ni :)

    ReplyDelete
  5. lpas dah copy url gmbar tuh nak paste kat mne ?

    ReplyDelete
  6. apasal saya tak leh right click kat url gambar tue ekk..saya nak yg warna biru nyer...btw thanks saya dah berjaya sembunyikan shoutbox saya...

    ReplyDelete
  7. kenape mase mula-mula masuk blog, shoutboxnye dah keluar dulu?

    ReplyDelete
  8. mcm mne nk dlete blog kte??

    ReplyDelete
  9. slm..,
    nk tnya nie..
    kalo nk sembunyikn singing box plak cam na ya???
    http://www.singingbox.org (ney lmn utk singing box
    )

    ReplyDelete
  10. lps right click kt url color tue... kte nk paste kt mne???

    ReplyDelete
  11. Dah cuba tapi tak jadi sbb mungkin kod shoutbox tak betul. Nak amik kat mana kod tu ye dan mcm mana bentuk kod tu?

    ReplyDelete
  12. tak boleh tekan pown yg shoutbox warna2 tu..mcm mna nk amik url nye..?

    ReplyDelete
  13. kan ada caranya
    pergi click 'http://tutorialuntukblog.blogspot.com/2010/04/cara-dapatkan-url-gambar.html'

    siap da pecah2 kan saper yang pakai opera,chrome,safari,firefox & ie

    then paste terus kan code. baca lok2 k kawan2.

    ReplyDelete
  14. thanks mas,sangat bermanfaat,tapi punyaku belum terpasang shoutbox,,hehe

    ReplyDelete
  15. nape sy nye shout box asyk terkeluar je? npe x boleh duduk diam2 kat tepi tuu. =(

    ReplyDelete
  16. dop jadi wehhhhh huhuhuuhuhuh sedihh :(

    ReplyDelete
  17. ta paham la yg cara na tuka wane shoutbox toh . na paste kt mane ?

    ReplyDelete
  18. x nk kaler yg lain.gambar len xde ke? sy pernah nmpk org pakai gamba mcm-2.camne ekk?

    ReplyDelete
  19. yesss!! dah berjaya...tq bebanyak!!

    ReplyDelete
  20. yesss dah berjaya...thanx yaaa...

    ReplyDelete
  21. admin ! napa shoutbox saya sekejap jer muncul. then dia hilang !! :( jdi tuh da jdi but dia ade dlm beberapa saat jer.

    ReplyDelete
  22. done well in my blog!thanks a lot
    btw, nice blog. salam kenal all

    ReplyDelete
  23. knape buat tak jadi pon..die keluar kt tepi tu..tp bile tekan keluar tutorial here..huhuhu

    ReplyDelete
  24. kod shoutbox nk cri kat mne?plezz

    ReplyDelete
  25. nk tya kod shoutbox tu mcmana ni..dah leh sembunyi tp x tahu kod tu lak..sedih

    ReplyDelete
  26. dah jadi ...tapi nape die terbuka masa kita bukak blog ni yer...

    ReplyDelete
  27. kod shoutbox tu ialah...korang klik edit je yg lama(patern) tue..then amik kod tue...paste kat ruang yg disediakan...TQ

    ReplyDelete
  28. shoutbox nye dah keluar dulu laaa... :(

    ReplyDelete
  29. knape shoutbox tu dah keluar dulu?

    ReplyDelete
  30. salam..macam mana nak tukar pkataan SHOUTBOX kepada perkataan lain..tq

    ReplyDelete
  31. camne nk tuka name name yg sedia ade...contoh..
    name=name awak
    website=url blog awak
    message=pesanan

    contoh contoh tok tuka nme 2...ade tngk kt blog org lain....

    ReplyDelete
  32. knp saye x dpt buat???peningnye...

    ReplyDelete
  33. Thx gan tutornya bermanfaat banget, sukses selalu gan

    Aamiin...

    ReplyDelete
  34. x boleh wat pun.. dah seminggu try tp x jadi ape2 pun

    ReplyDelete
  35. kalo korg prasan...lepas korg masukkan shout box korg kat blog.. try korg search blog korang kat google..then klik paga link ke page korang tu... korang xkan dapat masuk page tu, coz dia auto redirect ke blog or web lain...try korg check....

    ReplyDelete
  36. nak tanya kalau guna shoutbox ni, chat yg lama ilang la ea? huhu sori xpandai sangat bab2 ni...baru nak belajar

    ReplyDelete
  37. kenapa sya x leh dptkan kod shout box..ia mengatakan bahawa ia tdk wujud...

    ReplyDelete
  38. jd tp knape box nye jd lebar sngt..x macam shoutbox yg laen..camne ni?? help plezzz

    ReplyDelete
  39. cmne nk amek kod shout box uh..sye dpt id je

    ReplyDelete
  40. naper saya punya jadi tapi bila buka x de shoutbox

    ReplyDelete
  41. korang kalau tak tau yg CODE tuh, follow my steps :

    1) Go to shoutmix.com > login
    2) Click kt name korang @ symbol spanner
    3) Then click kt 'Embed'
    4) Kt situ ade small green box yg tulis 'Get Code'
    5) Click situ > copy > paste di 'KOD SHOUTBOX DISINI'

    Then, korang save.
    Gud luck :D

    ReplyDelete
  42. I need ur help :'/ macam mana nak tukar tab shoutbox bergambar???

    ReplyDelete
  43. selepas dh copy image url nk ltk kat mane?

    ReplyDelete
  44. shoubox wne ijau bole plak..wne pink ta bole..gramm

    ReplyDelete
  45. shoutbox yg tepi ny boleh x tukar gmbr laen? cmne nk buad?

    ReplyDelete
  46. kalau sebelah kiri plak mana...need help

    ReplyDelete
  47. terima kasih banyak , sudah dipraktekin pun , dah jadi , thank you

    ReplyDelete
  48. dah berjaya

    thanx for de tuto

    ^__^
    wink wink !!

    ReplyDelete
  49. yeayy ! da jd..thnx yaa , information yg sgt bergune :)

    ReplyDelete
  50. guna cbox boleh tak..and 1 more thing..kod shoutbox tu nk cri kat mana..:(

    ReplyDelete
  51. Tuan..ada yg saya tgk dia gantikan tab ni dgn gambo kartun..cantik sgt..mcmane ek?

    ReplyDelete
  52. terima kasih..dah guna...n masih baru dlm dunia blog...bnyk lg kena bljr...hehehe

    ReplyDelete
  53. Terima kasih, tips kat sini menarik!

    ReplyDelete
  54. Tips yang bagus, terima kasih!

    ReplyDelete
  55. ad x tutorial utk tkar gmbar shout box tu? bruk lah lau dy wrne hijau jer...

    ReplyDelete
  56. saya sudah tukar url tab shoutbox ke warna merah..tapi,kenapa still warna hijau je erkk??

    ReplyDelete
  57. tq...nice toturial...
    hope view blog sy yer..

    ReplyDelete
  58. aku rasa ni yang paling bermakna utk blog aku setakat ni

    ReplyDelete
  59. akak nak tanya sket.. mcmna nak gantikan kotak tulisan shoutbox tu dengan gambar kita sendiri?

    ReplyDelete
  60. macam mana nak tau kod shoubox ?

    ReplyDelete
  61. sip....keren jadinya, thx ya bro

    ReplyDelete
  62. warna shoutbox tu xde kaler hitam or grey or silver ke ? sangat berharap dpat kaler2 tu

    ReplyDelete
  63. yes ! berjaya akhirnya . . .thanks a lot . bole xnak req tutors cmne nak buat kotak shoutbox tu dengan ayat kita sendiri . please dah byk kali try buat but still tak bole . . harap dappat membantu

    ReplyDelete
  64. kalau yang beginian aku udah pernah liat kawan..tapi belum pernah saya pasang.he

    ReplyDelete
  65. postingan yg mantap dan bermanfaat kawan
    terima kasih sudah berbagi

    ReplyDelete
  66. thnks! mula2 buat x jadi.. pastu try lg baru jadi.. :)

    ReplyDelete
  67. SEKARANG ADA YG LEBIH KRENLOH CHAT GUNAKAN SHOUTBOX LIHAT DI WEB INI

    http://alzagemuruh.blogspot.com/

    ReplyDelete
  68. cara dapetin code shutboxnya gmna

    ReplyDelete
  69. sip gan,,,,, ini baru nuhuy,,,, kunjungan balik
    http://softwaremaniapc.blogspot.com/

    ReplyDelete
  70. Sangat bermanfaat terimakasih atas informasinya

    ReplyDelete
  71. Info yang sip banget gan.. Langsung di coba untuk web baru saya.. Terima kasih

    ReplyDelete
  72. Makasi banget infonya, coba dipraktekan ah :)

    ReplyDelete
  73. makasih sudah share infonya semoga bermanfaat

    ReplyDelete
  74. sudah di coba dan ternyata bisa, sangat luar biasa untuk jalan-jalannya di blog ini.

    ReplyDelete
  75. I needed to thank you for this excellent read!! I certainly
    loved every bit of it. I've got you bookmarked to check out new things you post…

    Feel free to surf to my blog post - inverter fuji

    ReplyDelete
  76. Thanks ya untuk tutorialnya, ini menarik sekali.

    ReplyDelete