JavaScript Buku Tamu Melayang
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:
Labels: JavaScript, Widget
6 Comments:
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..
@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
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..
kenapa tidak bisa ya?
Simple dan menarik. JS nya juga tidak terlalu berat... pokok e mantap!
Layak di coba untuk blogger pemula kayak ane.....
Post a Comment
<< Home