tutorial #35 : show / hide follower gadjet

Assalamualaikum , wah wahh . rasa bangga memunjak2 selepas isu hater tadi , haha . Okay , disebab kan scha terlalu ingin tahu macam mana nak buat sliding follower box macam blog apit yang burok ini  ,kihkih ,
So apit pun cadang nak buat , :) Nazihah pun ada tanya tadi ,
Okay  . mula mula korang buat button follow korang sendiri dekat2 mana2 , photoshop ke photoscape ke ,
then upload la dekat photobucket .

Dashboard>edit layout>add a gadjet>html/javascript and paste kan code ni ,

<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; right:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="140" height="180"src="URL BUTTON" alt="PUSH" title="Follow"/></a>
</div>

Tukar kan Url button tuh dengan button or gambar yang korang da buat tadi .top boleh tukar dengan bottom kalau nak kedudukan button kat bawah , and right boleh tukar dengan left . Lepas tuh save . Eitts , belum habis lagi yaa .
Yang ini hanya code untuk gambar sahaja

Okay then nak letak code follower pulak , korang pergi google friend connect
sign in laa dulu  . masuk kan url site korang .
Tengok gambar kat bawah je lah

Lepas da tekan new site tuh masuk kan url blog korang and tekan add member gadjets

Boleh tukar width dia dan nak berapa barisan rupa

kemudia tekan generate code and copy code yang dia da bagi tuh

Okay . Masih berada di edit layout , korang pilih add a gadjet lagi and pilih html/javascript
and paste kan code ni

<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:2px solid #E45E9D;
background:url(URL BACKGROUND) #E45E9D 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 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>

Okay?Sekarang belajar .
 solid: jenis border boleh tukar dashed or dotted
#E45E9D :warna border
URL BACKGROUND : boleh tukar dengan yang korang suka
CODE FOLLOWERS GADGET : tukar dengan code yang korang da copy dekat google friend connect tadi . Okay ? then save . preview dulu okay . kalau tak jadi sila comment :)
creds : hafizah