How to create a hidden shoutmix

Thursday, October 15, 2009

You may be a blog walking, and walking from your blog may never find or see the terhiden ShoutBox or hidden place by the owner, sometimes on the left or right side of your desktop screen. Now the discussion this time I want a little share with friends bloggers are still a little dizzy to make it.

just okay .. kecaranya, consider the following command

First:
1. Login to your Blogger account, select "Layout" then "Page Elements",
2. Click the "Add a Gadget" in the element may wheresoever, choose "HTML / JavaScript",
3. Copy-paste the code below in notepade:

<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://i142.photobucket.com/albums/r81/gusdiwanto/tab.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 buku tamu kamu -->
<font size="2"><a href="http://mediadownloadfree.blogspot.com/search/label/Tips%20N%27%20Trik">Media Download;/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>

* In the code above, for the words "<- Replace this with your guest book code ->, I mean the script from shoutebox or shoutemix you get from the website shoutebox provider.
* You can also set the position. Aja Change the value of its top attributes (width or height). If you want more upward slightly, change so 30px or 20px, it's up to you.
Good luck ....