0 Cara Memasang ChatBox Tersembunyi Di Kanan Blogger

      Akhirnya... Setelah Nunggu Mood Balik Lagi Ke Fine Selama Lebih Dari 1 Minggu, Gue Bisa Update Postingan Tentang Tips & Trick Blogger. Maklumlah Selama Hampir Satu Pekan Lebih, Mood Gue Lagi Buruk-buruknya.Kenapa? Minggu Lalu Gue Jatoh Waktu Lagi Nyetir Motor. Mana Kaki Gue Terkilir Lagi, Harus Diurut. Tapi Alhamdullailah Gue Masih Bisa Balikin Mood Ke Fine Lagi. Okelah Mari Kita Bahas Materinya. Kali Ini Gue Mau Ngasih Tau Cara Bikin ChatBox Tersembunyi Di Kanan Blog. Taukan Gimana Contohnya? Pasti Taulah! Gak Mungkin Seorang Blogger Yang Udah Lama Terjun Di Dunia Yang Penuh Persaingan Ini Gak Tau Sama Yang Namanya "ChatBox". Gue Sengaja Gak Masang ChatBox Di Samping Blog. Soalnya Kalo Pake Template Ini Kelihatannya Kurang Rapih. Jadi Sengaja Gue Taruh Tombol Aja Di Bawah Blog. Jadi Kalo Diklik, Akan Pindah Ke Page ChatBox. Coba Aja Dah Klik Biar Gak Bingung. Nah Untuk Yang Kali Ini Dibahas Adalah ChatBox Tersembunyi Di Blog. Coba Aja Deh Biar Gak Bingung.

1. Login Blogger Dulu Ya...
2. Masuk Aja Ke Tata Letak.
3. Add Gadget > HTML/JavaScript
4. Masukin Kode Ini :
   
   
   
   <style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;}.gbcontent{

float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KODE CHATBOXNYA DISINI

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Mau Widget Ini? <a href="http://blogmartstein.blogspot.com/2012/11/Memasang-ChatBox-Tersembunyi.html" target="_blank">Klik Disini</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

NB : Yang Tulisan Warna Biru, Boleh Diganti Sama URL Tap ChatBox Yang Sesuai Buat Disebelah Kanan. Tapi Lebih Baik Jangan Diganti Karena Itu Saja Sudah Bagus. Jika Tidak Diganti Akan Terlihat Kaya Gini : 

Jika Ingin Diganti Sesuaikan Ya, Karena Posisinya Disebelah kanan. Kalo Lu Ngerti Bahasa Pemrograman Khususnya Di Bidang Pengeditan HTML & CSS Code. Boleh Kodenya Di Otak-atik Biar Sesuai. Tapi Versi Default Yang Gue Kasih Kaya Gitu. Segitu Aja Ya Dari Gue... Thanks!

Komentar →