JavaScript Buku Tamu Melayang

Oktober 26, 2011

Pertama-tama masuklah ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<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://hompimpa.googlecode.com/files/tabs%23FF13E5.png') no-repeat;
}
.gbcontent {
  float:left;
  border:2px solid #FF13E5;
  border-right-width:15px;
  background:#F5F5F5;
  box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  -moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  opacity:0.7;
  filter:alpha(opacity=70);
}
</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">

          LETAKKAN KODE BUKU TAMU DI SINI

          </div>
     </div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Klik Simpan, maka kamu akan mendapatkan hasil seperti ini:

Lihat Demo

Lebih Banyak Tema

Untuk tema yang lebih beragam, kamu bisa mengganti kode yang Saya beri garis bawah dengan URL di dalam link Pilih!. Klik kanan pada link tersebut kemudian pilih Copy Link Location. Gunakan URL tersebut untuk menggantikan URL yang Saya beri garis bawah. Salin juga kode warna di bawahnya, kemudian gunakan untuk menggantikan kode yang Saya beri garis bawah: