JavaScript Buku Tamu Melayang

Tabel Konten
  1. Lebih Banyak Tema 
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:

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 MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!Buku Tamu MelayangPilih!
#FF0F0F#F811DF#D88989#D37E9E#D6B785#CD8C3D#C985D6#B5D685#B0B0B0#A5BD51#5848C1#85C0D6#48C1C1#9F85D6

6 Komentar

  • Pulung

    salam mas bro.. kalo paham semua tutorialnya pasti bisa bikin template sendiri hehehe, newbie nih mas bro.. floating coment form kaya gini sayang ga ada tutornya ya, aku cuma dapet yg kaya di blogku. ga semua elemen masuk ke floating fixed.cuma modelnya ku edit kaya di tutorial mas bro hehe mohon pencerahannya ya mas bro.. maksih tutorialnya..

  • Taufik Nurrohman

    @pulung udara manggiling: Sebenarnya Saya sih mau saja memposting tentang tutorial membuat formulir komentar seperti ini, tapi masalahnya setiap template blogspot memiliki standar yang berbeda-beda. Ada elemen komentar yang dibungkus dengan <div id='comments'> dan ada juga formulir komentar yang dibungkus dengan <div id='comentsbox'> dan mungkin ada juga yang lainnya.
    Saya tidak bisa memastikan mana yang benar, tetapi pada intinya itu semua bisa dibuat dengan mudah setelah memahami JQuery. Formulir komentarnya Mas Pulung Udara Manggiling juga sudah bagus kok. Tidak ada yang menyamai. Itu yang terpenting :D

  • Pulung

    emm.. gitu ya mas, scriptnya aku pake nih mas, tp bkn buat buku tamu, kupakai buat following, mas jadi the first follower ya please, sebelum ada yg lain hehe (blagu:D) tx b4..

  • Unknown

    kenapa tidak bisa ya?

  • Anonim

    Simple dan menarik. JS nya juga tidak terlalu berat... pokok e mantap!

  • Anonim

    Layak di coba untuk blogger pemula kayak ane.....

Komentar telah ditutup.