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

22 comments:

nelly said...

tq sudi kongsi !

Apit Biebs said...

@nelly wahh , nelly the strange ke nehh ?

ツTyra ツ said...

npe gmbr nye membsr ek ?

Apit Biebs said...

@ツTyra ツwidtg dengan height url button tuh awk tukar kan dengan width and height pic awk , right click and view image info nanti dia kasi tahu width and height pic :)

ツTyra ツ said...

tak fhm laa :\

Apit Biebs said...

@ツTyra ツAdd apit dekat fb nanti apit tolong k

FaraaF said...

thanks up apit <33333

yunie ;) ! said...

Tengs for the tuto :) !

yunie ;) ! said...

Tak jadii :(

ezzah said...

thanks apit . dah jadi :)

Fatihah Halim said...

Thanks for the tuto , jadi lha :P

budak manja said...

thanks for the tuto..lame dh mencari...

Alia Bieber said...

thanks jadi :)

chingu ♥ said...

thanks. menjadik :)

nurin izzati said...

thanks apit :)

airus diary`s said...
This comment has been removed by the author.
airus diary`s said...

Thanks apit ^.^ suke sgat2 <33 heehe

aWatif azmi said...

thnx very much apit!dh jdi:P

Nur Irdina Bte Shariffuddin said...

tq apit.. dh lme cri tuto. akhirnye menjdi jugak... :D

Nur Atiqah said...

PENING :\

Fatin said...

tak jadi larh...boleh tolong buatkan?

tiqa b.a.h. said...

Thank you apit, jadi dah !

Subscribe