Saturday, 20 April 2013

Cara membuat AUTO HIDE CBOX

Setelah saya posting tentang CARA MEMBUAT CBOX / CHATBOX, sekarang saya mau posting tentang cbox yang bisa membuka dan menutup sendiri,atau di sebut juga auto hide.

Ini sangat bermanfaat sekali untuk yang punya blog yang tempat untuk menyimpan widgetnya sudah penuh.

Caranya :

  1. Masuk ke blog anda.
  2. Masuk ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript.
  3. Lalu copykan HTML 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/AVvXsEhJ4Uv1QvrUmgc050k2vJRz7yS_lmKJvsCJNDaucf-OfqIoQngHesZCDXSEmcv8vXeZ2sfm5W6Oa7FKfeuJK4t0cFaJES4iumK1a_khPcgOROnVXTewq_y2me4MO5O3HWAKscr7_9rGZXsU/s1600/finger21.blogspot.com+bukutamu.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 KODE / HTML CBOX ANDA DISINI
<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href=" http://finger21.blogspot.com/2013/04/cara-membuat-cbox-chatbox.html " target="_blank">Suka-suka Blog</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>

Lalu save dan selesai.

Related Posts:

  • Cara membuat copyright di blog dengan mudah Kebanyakan blog ataupun web dibawahnya memakai copyright ,bahkan hampir semua nya menggunakannya. Untuk apa ? Ya untuk mempercantik blog anda. Dibawah ini saya akan sajikan cara membuat nya dengan simpel dan mudah. Tak meme… Read More
  • Tips Sederhana Merawat Laptop atau NoteBook Hallo,jumpa lagi setelah sekian lama aku menunggu kedatanganmu kekasih,etss salah,setelah sekian lama saya tidak posting disini,biasa lah orang baru di blog,fikiran nya belum bisa dimanfaatkan untuk posting,masih bingung kal… Read More
  • Cara menghilangkan rasa malas Penyakit ini memang banyak di derita oleh setiap orang,bahkan 1 orang pun tak akan melewatinya. Ini sudah menjadi suatu kebiasaan bagi kalangan orang,terlebih pada seorang pelajar seperti saya. Salah satu hal yang paling am… Read More
  • Cara ngetwit lebih dari 140 karakter Suka dengan twitter ? Jika suka pasti dong sering berkicau di sana. Tapi suka bete juga kan jika kita mau ngetwit panjang eh bisa nya malah cuman 140 karakter. Memang sih saya juga dulu begitu,bete banget jika ingin ngetw… Read More
  • Cara menghilangkan atribusi bawaah blog Cara menghilangkan atribusi bawaan blog sangat mudah. Ikuti saja cara-cara berikut : Masuk ke blogger. Klik Layout atau tata letak. Klik desainer template. Klik tingkat lanjut. Klik tambahkan CSS dan masukan kode ini : … Read More

2 comments:

  1. ok mksih..
    tlah sya coba dan berhasil..
    visit pandak-software.blogspot.com

    ReplyDelete
  2. cara memasang di wordpress gimana gan??

    ReplyDelete