1. Bikin chatbox dulu. Udah tau belum caranya? Baca artikel ini klo belum!
2. Login blogger
3. Dari dasbor pilih rancangan, elemen laman
4. Pilih tambah gadget, terus HTML/JavaScript
5. Bagian judul ga usah diisi. Biarin aja tanpa judul. Bagian konten diisi kode warna biruberikut :
<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>
</iframe></center>
<a href="http://udahtaubelum.blogspot.com/2010/06/10-langkah-menyembunyikan-kotak.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>
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>
TARUH KODE CHATBOXMU DI SINI
</iframe></center>
<a href="http://udahtaubelum.blogspot.com/2010/06/10-langkah-menyembunyikan-kotak.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
7. Sekarang kita edit HTML-nya. Dari rancangan, pilih Edit HTML
8. Cari kode ]]></b:skin> Inget, biar cepet ketemu tekan ctrl + f
9. Taruh kode berikut diatas kode ]]></b:skin>
#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;}
10. Simpan template dan liat hasilnya
7. Sekarang kita edit HTML-nya. Dari rancangan, pilih Edit HTML
8. Cari kode ]]></b:skin> Inget, biar cepet ketemu tekan ctrl + f
9. Taruh kode berikut diatas kode ]]></b:skin>
#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;}
10. Simpan template dan liat hasilnya
Selamat makan jagung bakar 
... eh selamat mencoba maksudnya!
... eh selamat mencoba maksudnya!
7 komentar:
mantap bro ilmunya..thanks ya
makasih juga kunjungannya bro :)
Hoho
thanks ilmunya
:)
wheewww...ilmunya segar ;) terus posting sob, buat newbie bermanfaat banget nih ;)follow my blog ya, i'll follow yours deh..
@razeed : yups, sering2 mampir yah, haha
@puti : makasih dah komen, oke segera saya follow
blog yang sangat bagus, template ini juga oke.
jgn lupa kunjungi blog: www.pelitaterang-blog.blogspot.com
sekalian saja saya pasang link untuk blog ini. kalau mau tukar link. Mau lihat ada di kotak Sahabat Pelita Terang. thanks
Posting Komentar