H
aloo sobat
AHS, kali ini saya akan membahas tutorial tentang
cara membuat chatbox.
ituloh sobat yang biasanya ada di sisi sebelah kanan blog,ya memang cara itu sudah banyak sekali beredar di internet, benar kan? tetapi hanya beberapa orang saja yang tau/bisa membuat script sama seperti yang saya buat untuk tutorial ini (
Chatbox Versi 2 : Edited
AHS)
sebetulnya sih,cara membuat chatbox itu sudah sangat banyak sekali sobat, mulai dari memakai css + javascript biasa sampai memakai css + jquery + javascript.
tetapi,di sini yang mau saya kasih kepada sobat itu cara yang standar sama cara yang saya pakai dalam membuat chatbox(dibaca memakai jquery).
oke, tidak usah berlama-lama yuk simak cara memasang chat box ini.
Cara memasang chatbox melayang(Versi Standart)
Demo
yang penasaran dengan chatbox ini,harap segera melihat demonya xD (ngga suka ndak usah dipasang -_-)
- Pertama anda login ke blogger anda dahulu
- Setelah itu,ke menu layout/ tata letak.
- Lalu klik add element > HTML/Javascript
- Nah,setelah itu copy kode dibawah ini kedalam kotak HTML/Javascript tadi(bukan pada judul,tetapi kotak yg besar dibawahnya)
<style type="text/css">
.gb_fixed{position:fixed;
top:60px;
right:-4px;
z-index:+10;
-moz-border-radius:3px;
border-radius:3px
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;
border:1.5px solid #cccccc;
-border-radius:5px;
background:#000000;
padding:10px;
padding-top:0px;
-moz-border-radius:5px;
border-radius:5px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://lh4.ggpht.com/_oFXd4wU3lK8/TSQrWfZqfnI/AAAAAAAAADQ/OzM7TygiCdM/Close.png" title="Click to Close"/></a></div>
<!-- BEGIN CBOX - www.cbox.ws - v001 --><div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="245" height="333" src="http://www7.cbox.ws/box/?boxid=631314&boxtag=t978zk&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-631314" style="border:#ababab 1px solid;" id="cboxmain7-631314"></iframe></div><div><iframe frameborder="0" width="245" height="117" src="http://www7.cbox.ws/box/?boxid=631314&boxtag=t978zk&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-631314" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-631314"></iframe></div></div><!-- END CBOX --><div>
<center><blink><a href='http://ah-shared.blogspot.com' target='_blank'>Get This Widget</a></blink>
</center></div>
<center>
</center></td></tr>
</table>
</div>
<script src="http://ahshare-project.googlecode.com/files/cbox.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhol0CXoIk3HIGU01cBUrKCdPgCMkN4BQtdSMn_jKcQXERWy_kyG_XpUXFM5YDL8Z9Zv4C06ivPu-5it0toKO9LfkbLTP6a5BlKa1Ia8c1uMc4OtQPLUqfbMuzgqHytnf5afkQ9hVfXf_g/s1600/bukutamu.png" alt="Ah-Shared.com"/>
</a></div>
Cara Membuat Chatbox Versi AHS
Demo
yang penasaran dengan chatbox ini,harap segera melihat demonya xD (ngga suka ndak usah dipasang -_-)
- caranya sama seperti diatas,tetapi hanya berbeda pada kodenya
- copy kodenya ini
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gbbtn").click(function(){
$("#gbcontent").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
/* ---------------
Edited by : Angwyn
Powered by : http://ah-shared.blogspot.com
---------------------------------- */
.gb {
position:fixed;
top: 0px; right:450px;
z-index:+1000;
}
#gbcontent {
height: auto;
background: #898787;
width: auto;
display: none;
padding: 10px;
border:4px solid silver;
background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
padding:10px;
}
.gbbtn {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight)
}
.active {
background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">
KODE CHATBOX KAMU</div>
<br />
<div id="gbbtn"><a href="#" class="gbbtn" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png" border="0"style="cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"/></a></div></div>
Versi 1(standart) :
Kode Merah Merupakan Kode Chatbox,kode itu ganti menjadi milik anda sendiri,
Tambahan: Cara ini bisa digunakan untuk membuat follow blog melayang,dll
Versi 2(Edited by AHS) :
Kode merah yang paling atas itu kode jquery.min.js, hilangkan itu jika template kalian sudah memasangnya
kode biru merupakan kode dari chatbox anda.
Ingat sobat, jangan pernah sekalipun mengganti credit,jadilah blogger yang menghargai karya orang lain.
Maka demikianlah artikel
Membuat Chatbox.