Blogger Tutorial : How to make Auto Hide Widget Shoutbox

Sample only. :)

Mungkin ada ramai yang bertanya dan teringin nak buat auto hide widget shoutbox yang ada kat sidebar blog tu kan. ok², aku pun sebenarnya tercari-cari jugak tutorial untuk membuat auto hide widget berkenaan. sehinggalah aku terjumpa tutorial berkenaan di blog kriep2. jutaan terima kasih untuk blog tersebut dan sekarang aku pula ingin sharing dengan kawan² semua cara bagaimana untuk membuat auto hide widget shoutbox. :)

okeh, tak sabar² dah ni nak mula. haha.

1. Macam biasa anda login blogger anda dan click Layout > Page Elements > Add a Gadget > HTML/JavaScript .
2. Kemudian paste code di bawah ok. :)

Auto hide shoutbox - right side

<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://2.bp.blogspot.com/_yQJt2cKxkbE/TEB7JEoD3gI/AAAAAAAAApY/L8HVpVCBgmY/s1600/green-right.png') no-repeat; }

.gbcontent{
float:left;
border:2px solid #A5BD51;
background: #F5F5F5 url('http://url-image-here.com') no-repeat;
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">

PUT YOUR SHOUTBOX CODE
OR ANYTHING YOU WANT TO PUT HERE


<div style="text-align:left"><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>

Auto hide shoutbox - left side (NOT work in IE, only work with MF & GC)

<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('http://3.bp.blogspot.com/_yQJt2cKxkbE/TEB7QMrELGI/AAAAAAAAAqQ/HonEF_Hr0o0/s1600/green-left.png') no-repeat;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background: #F5F5F5 url('http://url-image-here.com') no-repeat;
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">

PUT YOUR SHOUTBOX CODE
OR ANYTHING YOU WANT TO PUT HERE


<div style="text-align:left"><a href="javascript:showHideGB()">[close]</a></div>

</div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() "px";
</script>

*Tukar kan tulisan berwarna biru dengan url image anda sendiri yang bersesuaian dengan widget.

Senang je kan. copy & paste je. budak darjah 1.5 boleh buat. so, kawan², ape tunggu lagi.. jom la sama² mencuba tutorial ini. beri kelainan sedikit pada blog kita. :D

Update: Anda boleh juga menukar tab colour shoutbox anda. untuk menukar/menggunakan tab shoutbox di bawah; sila click tab berkenaan dan ambil/copy url di address bar di atas kemudian paste di tempat yang telah ditetapkan di bahagian gtab. :)

Coloured Shoutbox Tab - for Right Side


Coloured Shoutbox Tab - for Left Side


pSS: tutorial ini direquest oleh Lala dan sepenuhnya kredit kepada kriep2.

22 comments:

  1. tutor untuk page yang kaler2 tu xder???
    comey..

    ReplyDelete
  2. thanks for sharing. sangat membantu :)

    ReplyDelete