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 memasang ALEXA toolbar Memasang alexa toolbar sangat mudah sekali,pemasangan toolbar ini berfungsi untuk memudahlan kita mengetahui ranking web / blog yang sedang kita buka. Jadi kita tidak perlu masuk ke situs alexa.com untuk mengetahui ranking … Read More
  • Cara membuat menu DROPDOWN Membuat menu dropdown memang sedikit rumit,tapi jika kita memang benar-benar teliti,kerumitan itu dapat teratasi. Sebagai contoh,lihat lah menu diatas. Langsung saja ke cara-cara nya,karena sedikit panjang. Masuk ke … Read More
  • Cara memasang widget ALEXA rank di blog Kebanyakan,setiap blog telah memasang widget alexa rank mereka dengan tujuan untuk menunjukan rankng blog mereka kepada publik. Ya tentu saja sudah pasti untuk mereka-mereka yang rank yang sudah tipis sekali pasti memasang … Read More
  • Cara membuat CBOX / ChatBox Dewasa ini memang hampir semua blog selalu menggunakan widget ini. Ya ,namanya cbox / chatbox. Lalu fungsi nya untuk apa ? Fungsi nya tidak lain orang kebanyakan adalah sebagai buku tamu,atau sebagai alat komunikasi setiap … Read More
  • Cara memasukan video YOUTUBE ke postingan Postingan kali ini saya akan membahas tentang cara memasukan video youtube ke postingan blogger,dimana cara itu ada 2 cara,dan kedua cara tersebut sangatlah mudah. Cara yang pertama : Masuk ke blog anda. Lalu entri baru a… 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