Ok sobat blogger, pada kesempatan ini saya akan sharing tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup. Ini melanjuti postingan saya sebelumnya yaitu Cara Memasang Chatbox Shoutmix Pada Blog.Sebenarnya widget buka tutup/floating widget bisa dipasangi yang lain seperti : gambar, adsense, ataupun yang lain.
OK langsung saja, ini dia caranya :
Pertama... kita harus punya akun shoutmix chat, kalau belum punya bisa daftar terlebih dahulu di www.shoutmix.com. jika belum tahu cara buat akun shoutmix buka Cara Membuat Chatbox Shoutmix Pada Blog. Atau mendaftar di cbox.ws silakan buka Cara Mendaftar Chatbox Untuk Blog di Cbox
Kemudian jika sudah punya akun shoutmix chat, seperti biasa login ke blogger
Buka Rancangan/Layout tepatnya Elemen Laman.
Klik Tambah Gadget, kemudian pilih Tambahkan HTML/Javascript.
Copy script berikut dan letakan pada kotak HTML tersebut.
<!-- right hidden chatbox by http://cybercropz.blogspot.com/ / START -->
<style>
#hcl {
position:fixed;
top:60px;
left:3px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:120px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RlkKV9rnhFE2idR_Hxl3ERjrLSd-89NwXrehlQFHI1g8qsFnbZ7hZgiFpOSWmSWUde8Hpe4to4PRRD7d-BBpSq5BYa7sbQz5nCUEVIs81ntq9LLZsEvq2rybUdZY7xL3Cj0kfE1p1fAp/s1600/cbred.png') no-repeat;
}
.hclcontent {
float:left;
border:6px solid #B40404;
background:#F7F8E0;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">
(masukan Script di sini)
<br />
Mau seperti ini?<br />
Click disini--->
<a href=" http://cybersoftwaregratis.blogspot.com/2012/06/ok-sobat-blogger-pada-kesempatan-ini.html l">
Tutorial Blog
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="float:right">
<a href="javascript:showHidehcl()">
[Hide]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://cybercropz.blogspot.com/ END -->
0 komentar: