Blogger Note

Article :

Cara Buat Buku Tamu Melayang DI Blog

Pada Tutorial Blog sebelumnya Musa ' Blogs sudah menerangkan cara Membuat ScreenSaver Pada Blog pada tutorial hari ini saya akan menerangkan Cara Buat Buku Tamu Melayang DI Blog Jika saya sudah pernah share tentang Cara Daftar Dan Memasang cbox Pada Blogger tapi tutorial ini lain,tutorial ini adalah hasil modifikasi dari CBOX untuk tampilan CBOX biasa seperti ini :

Menjadi :

Ok langsung saja caranya:

  • Log in ke blog Anda
  • Buat widgate baru HTM/JavaScript
  • Copy Paste Script di bawah ini pada widgate baru tadi
<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 -->
<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>

Script yang berwana merah dapat Anda ganti dengan script buku tamu sudah Anda buat.

2 comments:

17 Juni 2011 03.51

mau pake apa ngga ya? takut berat ntar sob tapi walopun eye catching banget. galau nih hahahaha

9 Juli 2011 01.05

@Aristides Fariz ya sob bener juga tuh

Posting Komentar