Membuat buku tamu berguna untuk meninggalkan jejak pengunjung antar sesama blogger, baik itu tujuannya untuk bersilaturrahmi, atau hanya sekedar meninggalkan pesan, dll. Kali ini kita akan membahas cara memasang buku tamu namun dengan cara yang agak berbeda dan terasa unik, yaitu buku tamu yang tersembunyi. Walau namanya "buku tamu tersembunyi" tidak berarti form buku tamu tersebut tidak dapat dilihat, akan tetapi tetap terlihat namun hanya sebagian saja, yaitu tombol untuk menampilkan buku tamu tersebut, di mana untuk menampilkan buku tamu seorang pengunjung harus mengklik tombol tersebut, jadi sistemnya hampir tidak beda dengan tombol hide-show. Kalau teman2 ingin melihat contohnya maka bisa dilihat di blog saya yang beralamatkan di Albarmadlrc.blogspot.com
(Update: blog demo telah dihapus, fungsi insyaAllah akan terus berjalan), tepat di sisi kanan blog tersebut, teman2 akan melihat suatu tombol ijo dengan tulisan Buku Tamu dengan arah vertikal...........
Bagaimana, mau bikin yang seperti itu?
kalau mau maka caranya gampang, silahkan untuk menaruh kode berikut ke gadget HTML-nya teman2
<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/AVvXsEhGu46W1E17re_p4dRoq-k6pHSRGZB_f1sxNvcArtqqhIXICokLtnJq6bQk3W2QzBHk9LjysXoei2yoC04yM1oynhiT1zIS5Onctf9gtX0z-NAqBu_punsfNibkKgQmyEnTkWx5VOsKeVE/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
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">
KODE BUKU TAMU ANDA DI SINI
<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
#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/AVvXsEhGu46W1E17re_p4dRoq-k6pHSRGZB_f1sxNvcArtqqhIXICokLtnJq6bQk3W2QzBHk9LjysXoei2yoC04yM1oynhiT1zIS5Onctf9gtX0z-NAqBu_punsfNibkKgQmyEnTkWx5VOsKeVE/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
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">
KODE BUKU TAMU ANDA DI SINI
<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
beberapa bagian yang dapat teman2 atur adalah
-. Warna biru adl URL gambar tombol. bagi teman2 yang ingin membuat desainan sendiri monggo...
-. Yang berwarna merah adalah border atau garis tepi, silahkan diatur ketebalannya dengan mengatur nilai/angka yang tertera. Teman2 juga bisa mengatur warna border tersebut [pilih kode warna di sini]
-. Orange adalah warna background-nya [pilih kode warna di sini]
-.Hijau diisi dengan kode buku tamu anda
-. hitam tebal, bisa teman2 atur kata2nya. Baik itu dengan kata2 seperti, close, keluar, dll
Selamat mencoba
1 komentar:
:38
Posting Komentar