Tips How To Create Show/Hide Shoutbox

Ok, as per request. Here is the Tips/Tutorial on how to create show/hide Shoutbox in your blog. What is show/hide Shoutbox ? You may refer to my shoubox at upper left corner of this blog.

Firstly login into your blog and then go to Layout. Click add widget and choose HTML.

Then copy paste this code and then save.

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:right; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnFk_kTtT-9bL_E8XC-YR0kejMKCcfNMSzYZy-3AOtuxHlt3I0IjixG9ah7wUWHQIKfNp4V8Ok-8J2aL58uvmCpP8THyBjVktyYEOFnDfZOVGAvRt-3l-4SVw1AGFz8Zye26k-1cTkOng/s320/tabs.png') no-repeat; } .gbcontent{ float:right; border:2px solid #666666; 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.left = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> >>>>>>>>>>>>DELETE LINE NI DAN PASTE KOD SHOUTMIX ANDA KAT SINI<<<<<<<<<<<< <div style="text-align:left"> <a href="javascript:showHideGB()"> [close] </a> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.left = (30-gb.offsetWidth).toString() + "px"; </script>

You can change the position left or right by changing the text I highligted YELLOW

That's all. Enjoy :)