JavaScript Buku Tamu Melayang
Tabel Konten

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:
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.....