cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.
1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bagian konten.
<script type="text/javascript">
function showHidechat(){
var chat = document.getElementById("chat");
var w = chat.offsetWidth;
chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
chat.opened = !chat.opened;
}
function movechat(x0, xf){
var chat = document.getElementById("chat");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
chat.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
}
</script>
<div id="chat">
<div class="chat-click" onclick="showHidechat()"> </div>
<div class="chatbox">
<center>
SCRIPT CHATTING DI SINI
</iframe></center>
<a href="http://tipzrfrancblog.blogspot.com/2010/08/kotak-chatting-tersembunyi.html" title="Pasang widget chatting seperti ini di blog anda" target="_blank">[+]</a>
<span style="float:right">
<a href="javascript:showHidechat()">
[x]
</a></span>
</div></div>
<script>
var chat = document.getElementById("chat");
chat.style.right = (30-chat.offsetWidth).toString() + "px";
</script>
6. Simpan gadget.
Skarang pada bagian css, ikuti langkah-langkah berikut.
1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]></b:skin> kemudian copy-paste kode css berikut di atasnya.
#chat{position:fixed; top:25px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}
3. Simpan template.
0 komentar:
Posting Komentar