Membuat Buku Tamu Melayang

Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu dengan background hijau, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

  1. Sign in ke blogger dan silahkan Login dengan Account Anda
  2. Pilih Layout/Tata Letak
  3. Pilih Page Elemen/Elemen Halaman
  4. Klik Add a Gadget/Tambah Gadget
  5. Lalu pilih "HTML/JavaScript"
  6. Kemudian Copy-Paste kode di bawah 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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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 ShoutMix - http://www.shoutmix.com --> <iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto"> <a href="http://www6.shoutmix.com/?m4n0">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 --> <br/> Anda berminat buat Buku Tamu seperti ini?<br/> Klik di <a href="http://bloganaksmanda.blogspot.com/2011/02/membuat-buku-tamu-melayang.html"> sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>
    CATATAN :
  7. Ganti tulisan yang berwarna Tebal dengan kode yang anda peroleh dari ShoutMix
  8. Icon Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background seperti blog teman kita ini. Klik Disini
  9. Selamat Mencoba
Show comments
Hide comments

2 komentar

avatar

Update script terbaru untuk chat melayang..(Multi Browser and Resolusi)

berguna untuk mendeteksi resolusi browser, karna sering kita temukan pada brwoser dengan resolusi width 1280 (RESOLUSI DI LAPTOP) dengan 1024 dan 800 hasil chat boxnya berbeda, yakni pada browser dengan resolusi 1280 lebih maju (nongol), sedangnkan pada 1024, tampilannya normal. Berikut ini solusinya:
Javascriptnya,

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************

// for NN4/IE4
if (self.screen) {
width = screen.width
height = screen.height
}

// for NN3 w/Java
else if (self.java) {
var javakit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = javakit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
else {

// N2, E3, N3 w/o Java (Opera and WebTV)
width = height = '?'
}

var gb = document.getElementById("gb");
if (width==1024) {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}else if (width==1280) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";}


Salam hangat,
http://debrianruhut.blogspot.com

Apakah Anda mempunyai saran? Silakan Tambah komentar. Jangan spam!