Kamis, 23 Desember 2010

Hide Show Cbox

Setelah otak-atik kode CSS, maka hadirlah penampilan cbox Beben si bloglang anu ganteng kalem tea yang baru b-) Kan tahun baru, jadi sedikit baru lah ;)) Jika minat dengan yg model yg dulu Amazing Glider Menu silahkan :) Menggunakan javascript dan kode CSS terciptalah hide/show cbox ini. Melihat kebanyakan menggunakan teknik slide buku tamunya :D Kalau minat dg show/hide ramuan membuat buku tamu bisa hilang dan muncul ini kemottt coy!!!

Kode CSS

#cboxbutton {
position: fixed;
top: 5px;
right: 5px;
width: 200px;
padding: 3px;
text-align: center;
cursor: pointer;
background-color: #FFFFFF;
border:#000 1px solid;
font-family: Tahoma, sans-serif;
font-size: 14px;
}
#cboxdiv {
display: none;
position: fixed;
top: 35px;
right: 5px;
width: 200px;
background-color: #FFFFFF;
padding: 3px;
line-height: 0;
border:#000 1px solid;
}
Letakin kode CSS tersebut sebelum/diatas kode ]]></b:skin> Keterangan kode CSS berwarna:
  1. Warna merah
    2. Jika posisi ingin ada diatas, jika ingin ada dibawah silahkan ganti dengan bottom
  2. Warna biru
    3. Lebar frame cbox sobat.
Setelah itu cari kode tag </body> sisipkan javascript berikut
<script type="text/javascript">
//<![CDATA[
   var cbSide = false;
   var cbLoad = false;

   function togglecbox () {
       var cboxdiv = document.getElementById("cboxdiv");
       var cbbut = document.getElementById("cboxbutton");
       if (!cbSide) {
           if (!cbLoad) {
               cboxdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;border-bottom:0px" id="cboxmain"></iframe>
<iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe>';
               cbLoad = true;
           }
           cboxdiv.style.display = "block";
           cbbut.innerHTML = "Close Cbox";
       }
       else {
           cboxdiv.style.display = "none";
           cbbut.innerHTML = "Open Cbox";
       }
       cbSide = !cbSide;
   }
//]]>
</script>
Script berwarna itu (kode frame) ganti dengan kepunyaan sobat ;) Lalu masukin kode HTML ini didalam tag <body><div id='cboxbutton' onclick='togglecbox ()'>Open Cbox</div>
<div id='cboxdiv'></div>Save. Jika sobat pusing dan mau cara instant Add a Gadget ► HTML/Javascript masukin semua deh ramuan ini Click Here for Look Code

Happy holidays \m/

Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)