Tutorial Show / Hide Kotak Follower

Assalamualaikum !
ok hari ni ungu nak ajar tuto pasal sorokkan kotak follower
macam kat blog ungu yang comel comot ni . 
tahu tak yang mana ?? ok senang cite , macam gambar kat bawah ni
KLIK pada gambar untuk tumbesaran

ok sudah paham ??? lets start !
1. Pergi ke Dashboard > Design > Page Element > Add Gadget > HTML/JAVASCRIPT
2. Copy code di bawah ni, tekan Ctrl + C untuk Copy 

<style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;F
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>
    <div style='display:scroll; position:fixed; top:220px;left:-0px;'>
    <a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="120" height="150"src="url untuk button" alt="PUSH" title="Follow"/></a>
    </div>

PETUNJUK : 
merah : boleh ubah kedudukan button 
biru : saiz button yang korang nak
ungu : image untuk button korang

3. Paste dalam kotak HTML tu

4. And then tekan kat GOOGLE FRIEND ni
5. pilih add the members gadget
6. ubah warna untuk kotak follower kat choose colours tu , kalau taknak ubah pon takpe.
7. Lepas dah selesai edit colours, tekan kat GENERATE CODE and Copy code
    dibawahnya. Contoh akan jadi macam ni .

8. Lepas tuh,  pergi kat Add Gadget > HTML/JAVASCRIPT sekali lagi

9. Copy code di bawah ni dan pastekan di kotak HTML yang baru tadi ye .

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:3px solid #FE9A2E;
background:url(url background yg kolah pilih) #FE9A2E repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

CODE GENERATE FOLLOWERS GADGET

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

PETUNJUK:

biru : letak code yang korang copy dekat follower gadget tadi tu

merah : warna border untuk kotak follower korang

pink : background untuk kotak follower 

10. Save and View ! Good Luck (:

Kalau berjaya, tinggalkan komen anda. Kalau tak berjaya, silalah cuba lagi tanya yer :DD