Cara Membuat Cbox Melayang atau Floating pada blog

Tweet

Assalamu'alaikum Warahmatullahi Wabarakatuh.
Kali ini saya akan membagikan sebuah posting mengenai cara membuat cbox melayang atau floating seperti pada gambar di atas. Daripada nulis panjang lebar ga karuan mending langsung saja kita tengok langkah-langkah di bawah ini.

Pertama mari kita buka Page Layout -> Add Widget kemudian pilih html/javascript.
Sekarang tinggal copy paste kode dibawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTdktlavWAK3hd2S6HmT9ebvTn6TrVhyphenhyphenBzSnKAYsiJGUWS4Rg2n5HgVYDIIrKM5AgIrl51phLCbyhbNGm6lBFP2KuREtVsgd9kdYZiowGDclofEVy7-LlYtPvTAxJebB_YptbiVLzEnwA/')
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">

<!-- Ganti ini dengan code cbox anda -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

<!-- Ganti ini dengan code cbox anda --> di atas.
Anda juga dapat mengganti button buku tamu seperti di bawah ini dengan mengganti URL gambar yang

berwarna biru pada script di atas. Dengan catatan ukuran gambar harus 30×100 pixel.





OK, selamat mencoba. :D

Hasil Pencarian Untuk Artikel Terkait