1.
Hai sobat blogger !., kali ini saya mencoba untuk
memposting satu artikel ringan nih sob, alias tidak memakan waktu banyak untuk
menyelesaikannya. Kali ini saya akan membahas tentang topik Cara membuat
widget Buku tamu Auto hide . widget ini berfungsi untuk
mengetahui siapa yang berkunjung di blog sobat. Jadi kita bisa
langsung merespon dan membalas komentar itu. Caranya :
1.) Baca
Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Tata Letak > Tambahkan Gadget > Html/Javascript
4.) Masukkan kode dibawah ini didalam kolom konten kosong yang tersedia
BUKU TAMU
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BRkA2VdtQe1if3sTyYiDV7jsQEzJlJ-ed8YNTPNlf__Hs0lB-Xm2wb8KV0N8PZw8-o0buyPAbVRR6D0gvGWBxDnl4U94c64qPlwLPP42NZjkhfTkhNCrrDVXwAvGlqEN8U4YKplEK4kA/')
no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">
Buku Tamu Tari
<form method="post"
action="#">
<table>
<tr>
<td>Name</td>
<td><input type="text"
name="Name" size="30px"
maxlength="20"/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text"
name="Address" size="30px"
maxlength="20"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text"
name="email" size="30px"/></td>
</tr>
<tr>
<td>Gender</td>
<td><input
type="radio" value="M" name="Gender" />Man
<input type="radio"
value="W" name="Gender" />Woman
<input type="radio"
value="O" name="Gender" />Other
</td>
</tr>
<tr>
<td
valign="top">Fafourite Program</td>
<td><input
type="checkbox" value="Sport" name="acara"
/>Sport
<input type="checkbox"
value="Learn" name="acara" />Learn
<input type="checkbox"
value="Traveling" name="acara" />Traveling
<input type="checkbox" value="Other"
name="acara" />Other
</td>
</tr>
<td
valign="top">massage</td>
<td><textarea
cols="40" rows="5"
name"Massage"></textarea></td>
<tr>
</tr>
<tr>
<td
valign="top">Impression</td>
<td><textarea
cols="40" rows="5"
name"Impression"></textarea></td>
</tr>
<tr><td
colspan="2"><input type="submit"
name="submit" value="Kirim" />
<input type="reset"
name="reset" value="Batal" />
</td>
</tr>
</table>
</form>
</div>
<script
type="text/javascript">
var gb =
document.getElementById("gb");
gb.style.right =
(30-gb.offsetWidth).toString() + "px";
</script></div>
