Cara Mudah Membuat Show Hide Floating Shoutbox

Cara Mudah Membuat Show Hide Floating Shoutbox,Mungkin Anda ingin Memasang Shoutbox Diblog tetapi Ruang Yang tersedia kurang memungkinkan untuk itu
maka dari itu pada Postingan Kali ini Maz Dani Akan berbagi Cara Mudah Membuat Show Hide Floating ShoutMix/Shoutbox,Untuk menempatkan Shotmix Dipojok kanan Tentunya teman-teman sudah mendaftar di cbox/shoutbox/shoutmix. 


Berikut Cara Mudah Membuat Show Hide Floating Shoutbox
-Login ke Dasbord blogger
-Klik menu Tata Letak
-Klik tambah gatget
-Klik Html/java script
-Lalu Copy kode berikut dan Paste-kan Pada kotak HTML





<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">
<Letakan Code ShoutMix/Shoutbox Kamu Disini>
<div style="text-align:right">
<a href="http://dubraw735.blogspot.com">
[Pasang Widget]
</a>|<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>


-Ganti Tulisan merah dengan Id ShoutMix/Shoutbox Kamu
-Jika Ingin Mengganti gambar Ganti Tulisan Biru Dengan Url gambar anda

-Simpan Dan lihat Hasilnya

-Jika Belum paham Bisa Langsung ditanyakan

Demikian Tutorial Blog Cara Mudah Membuat Show Hide FloatingShoutMix/Shoutbox Kamu

Share : Facebook Twitter Google+ Linkedin Technorati Digg

Page Load

Terima kasih telah membaca artikel Maz Dani tentang Cara Mudah Membuat Show Hide Floating Shoutbox dengan url http://dubraw735.blogspot.com/2012/04/cara-mudah-membuat-show-hide-floating.html, Semoga Artikel Cara Mudah Membuat Show Hide Floating Shoutbox bermanfaat bagi diri saya dan anda.