Rabu, 08 Juni 2011

Cara Membuat 'GuestBook' Tersembunyi

Ok, Saya Kembali lagi. Setelah beberapa bulan saya vakum dari dunia blogging, saya akan kembali memberikan informasi menarik sekitar tutorial blog dan lain-lain.

Seringkali kita kebingungan untuk membuat buku tamu dikarenakan tempat yang sudah penuh terisini gadget lain. Oleh karena itu, ada solusi agar kita bisa membuat buku tamu dimana saja. Contohnya pada blog ini, lihat lah ke samping kanan.

Ok Langsung saja,
1. Login Ke Blog
2. Rancangan/Layout -> Tambah Gadget/Add a Gadget ->Click HTML/JavaScript
3. Copy Paste Kode ini
<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://i52.tinypic.com/2ns84ck.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #209be2;
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">
<!-- Ganti Ini dengan Kode Buku Tamu Anda  --><iframe title="Prakasa" src="http://www.shoutmix.com/?Prakasa" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?Prakasa">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix --></div></div>
4. 
  • Hijau , ganti kode itu dengan kode buku tamu yang kamu dapatkan dari situs tersebut.
  • Biru Tua , itu adalah link gambar untuk "Buku Tamu" tersebut. Anda bisa mengubah nya.
  • Biru Muda , Warna Border
  • Merah, Warna Background

5. Sekian ^_^
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 komentar:

Posting Komentar

Silahkan Berkomentar. Bebas, tapi sopan ! thanks ^_^