Hide and Show Chat Box di Blog

Neh Gwe punya cara untuk membuat chat box ala Facebook.
langsung anda test aja ya
1. kamu login facebook dan langsung masuk ke http://developers.facebook.com/setup/   
create new app

2. setelah selesai proses register akan muncul

3. Langkah selanjutnya masuk ke sini http://developers.facebook.com/docs/...ns/live-stream
4. Masukkan App id anda pada kolom App Id
5. jika sudah klik tombol get code dan akan muncul kolom kode hasil app tadi.copy code iframe
contoh kode yg di dapat
<iframe src="http://www.facebook.com/plugins/live_stream_box.php?app_id=App Id Anda&amp;width=400&amp;height=500&amp;via_url&amp;always_post_to_friends=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:500px;" allowTransparency="true"></iframe>&lt

isi app id dengan app id anda
6. Untuk Hide & Show chat box nya tambahin kode ini

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:201px; width:35px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_EW8LhmljFgI/TPaK7K2wxKI/AAAAAAAAAIA/G1Gac0K4M_M/s1600/Chatbox+copy.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- live stream - -->

KODE FACEBOOK LIVE STREAM

<!-- End live stream -->
<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>



ganti tulisan berwarna merah di atas dengan kode facebook live stream kamu 

7. Untuk Memasangnya pada blog silahkan login pada blog dan masuk ke bagian rancangan.
8. Pilih add gadget HTML/JavaScript dan pastein kode gabungan antara hide chat dan facebook live stream kamu tadi.lalu save

jika kamu gak mo pusing² copy paste aja kode di bawah ini dan masukkan ke HTML/JavaScript kamu
<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:201px; width:35px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_EW8LhmljFgI/TPaK7K2wxKI/AAAAAAAAAIA/G1Gac0K4M_M/s1600/Chatbox+copy.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- live stream - -->

<iframe src="http://www.facebook.com/plugins/live_stream_box.php?app_id=255955255198
&amp;width=400&amp;height=500&amp;via_url&amp;always_post_to_friends=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:500px;" allowTransparency="true"></iframe>

<!-- End  live stream -->
<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>


semoga berhasil ya

Penulis : -=[oXside89]=- ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Hide and Show Chat Box di Blog ini dipublish oleh -=[oXside89]=- pada hari Rabu, 08 Desember 2010. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Hide and Show Chat Box di Blog