- Back to Home »
- TipsnTrick »
- Tips membuat ChatboX di Blog
Posted by : Unknown
Sabtu, 09 November 2013
Wa gak bisa Jelasin Lebih Banyak ..... Langsung Aja Coba ...
Contoh seperti Gambar Chat box wa ini :
Copy kode di Bawah :
Caranya :
1. Login ke blog anda
2. Trus buka Tata letak
3. Add a Gadget
4. Pilih HTML/Javascript
5. Copy Kode di bawah.
Oh ya Sob ............... Chat box nya ganti pake Chat box sobat !!!
Tuh Di bawah yang Warnanya Merah Ganti Pake Script ChatBox Sobat .... OK.
Klik Untuk Lihat Kode
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mPUjZ_sLEnP_NgGxl-xFQvG26oE5YzV6n3OHgon8blBdN_imG9LbJnTw17oG_Lelixj7m8OEEbeSoTT_TugBS08WnhVOE6Cc24nlHWXwpIpLkZUkyFoPS5G4S-_Y58bm2qe5-WXaHv7q/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="298" src="http://www5.cbox.ws/box/?boxid=725801&boxtag=xvg5at&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-725801" style="border: 0px solid;" id="cboxmain5-725801"></iframe></div>
<div><iframe frameborder="0" width="200" height="82" src="http://www5.cbox.ws/box/?boxid=725801&boxtag=xvg5at&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-725801" style="border: 0px solid;border-top:0px" id="cboxform5-725801"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mPUjZ_sLEnP_NgGxl-xFQvG26oE5YzV6n3OHgon8blBdN_imG9LbJnTw17oG_Lelixj7m8OEEbeSoTT_TugBS08WnhVOE6Cc24nlHWXwpIpLkZUkyFoPS5G4S-_Y58bm2qe5-WXaHv7q/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="298" src="http://www5.cbox.ws/box/?boxid=725801&boxtag=xvg5at&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-725801" style="border: 0px solid;" id="cboxmain5-725801"></iframe></div>
<div><iframe frameborder="0" width="200" height="82" src="http://www5.cbox.ws/box/?boxid=725801&boxtag=xvg5at&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-725801" style="border: 0px solid;border-top:0px" id="cboxform5-725801"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
Post-post Terpopuler
-
OK buat para sobat Blogger yang mempunyai Twitter yang berisikan konten-konten pada Blog-nya. Posting ini adalah salah satu solusi untuk m...
-
Pada Prinsipnya Membuat Sebuah blog itu Identik dengan kata-kata dan Tulisan yang sangat Panjang. kadang kadang kita berfikir apabila menuli...
-
Oke Buat Sobat Blogger...... Kemarin aku udah Update Untuk Teks Berjalan tapi Sobat Cuma Bisa ganti Tulisan aja tanpa bisa ganti Warna dan...
-
Nah Buat Sobat Blogger Yang Berminat Menerapkan Pada Blog Sobat Semua, Sobat Bisa Ikuti Caranya Dibawah ini: Login Ke Akun Blogger So...
-
Masih seperti biasanya Sob.... Coz Blog identik dengan HTML makanya semua Widget yang di buat selalu seperti ini menggunakan cara yang s...
-
Cara Membuat Cursor Bertabur Bintang Mempercantik atau memperindah tampilan Blog adalah naluri dari setiap blogger .dan jikalau tamp...
-
Untuk cara pemasangan di halaman postingan berikut tutorialnya . 1. Login ke akun blog sobat 2. Klik Entri baru kemudian beri judul sesu...
-
Oke Langsung Saja nih Pergi ke Template > Edit HTML , lalu centang "Expand Template Widget" setelah itu cari kode </he...
-
Berikut langkah-langkah pembuatannya : Klik Untuk Liat Kode 1. Login ke Blogger 2. Masuk ke Template >> Edit HTML (centa...
-
Posting selanjutnya .............. Cara Membuat Fanspage Melayang Di Blog- kita pasti pernah melihat kotak facebook melayang di blog, pas...