Minggu, 22 Mei 2011

Cara Membuat Buku Tamu Tersembunyi

Postingan kali ini saya mencoba mensharingkan cara membuat ShoutBox tersembunyi di samping. Sebagai contoh pada halaman blog saya ini, shout box nya berada di kiri ( klik tulisan "GUEST BOOK" disamping kiri).
Nah jika anda tertarik untuk membuat tampilan ShoutBox anda seperti itu, saya ingin mensharingkan cara-caranya. langsung saja ke tahap pembuatan.

  • Seperti biasa login dulu ke Blogger
  • Masuk ke Tata Letak/Layout - Page Elements
  • Add gadget - HTML/Javascript
  • Copy code dibawah 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">
<!-- Ganti ini dengan kode shout box anda -->
<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://serba-seru.blogspot.com/2009/12/membuat-shoutbox-tersembunyi.html">
Serba Seru
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
  • Pastekan ke gadget anda tadi
  • Nah...tulisan yang berwarna merah anda ganti dengan code shoutbox anda,
  • untuk angka yang berwarna pink dapat anda sesuaikan dengan selera anda

Tidak ada komentar:

Posting Komentar