Created (c) by Princexells Seyka (Princelling Saki)

Rabu, 27 Februari 2013

JavaScript Buku Tamu Melayang & Tema buku tamu !!

JavaScript Buku Tamu Melayang

javascript buku tamu


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:

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:

Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
Buku Tamu Melayang
Pilih!
#FF0F0F#F811DF#D88989#D37E9E#D6B785#CD8C3D#C985D6#B5D685#B0B0B0#A5BD51#5848C1#85C0D6#48C1C1#9F85D6

Check out this Pen!

1 komentar:

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Lagi Perbaikan Blog
Back to Top