Membuat Tombol "Buku Tamu" atau "Guestbook"

Membuat tombol atau button yang vertikal di Blog adalah sangat mudah sekali. Seperti tombol "Guestbook" di pojok kanan Blog ini atau "Buku Tamu" di Blog lain. Atau seperti yang ini.

Ikuti cara-cara berikut ini :

1. Buat images dengan Photoshops atau Photo Space sesuai dengan selara.
2. Setelah selesai di upload ke Picasa atau Flicker.
3. Perhatikan dan diingat URL Address-nya
4. Buka Album Picasa atau Flicker dengan Internet Explorer atau ketikkan alamat URL dari album yang disimpan di Picasa atau Flicker
5. Klick kanan pada images yang diinginkan
6. Pilih Preopertise
7. Copy Alamat URL dan pastekan pada backround: url

<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcOPQ2YoVLc6UlL2y30Z4Z02PHcpi8KgNxqlbTqrk9FwuQmyFkSbKI1xDf50V_gNprcbzDEYRKlvd0hUf8ybmQ2Vy9Ou9G8hyphenhyphenukEd-6TFDzBf7u2Xrsk4_jYReXIfrJKf8GbqF53yUuQY/s128/Bukutamu_images.jpg') 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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="298" src="http://www2.cbox.ws/box/?boxid=2286636&amp;boxtag=gnbqzg&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="82" src="http://www2.cbox.ws/box/?boxid=2286636&amp;boxtag=gnbqzg&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Yang warna Hijau: URL dari Tombol atau button yang dibuat sendiri
Yang warna kuning: Scrip kode dari cBOX atau bisa scrip lain untuk tampil di sisi kanan

Related Post:

Mau berbagi pengalaman tentang Artikel Menarik Tips Blogger ... klik disini