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:

kindergartenlibrary said...

tq sudi kongsi !

Apit said...

@nelly wahh , nelly the strange ke nehh ?

ツTyra ツ said...

npe gmbr nye membsr ek ?

Apit 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 said...

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

FarahanaF said...

thanks up apit <33333

Anonymous said...

Tengs for the tuto :) !

Anonymous said...

Tak jadii :(

ezzah said...

thanks apit . dah jadi :)

Ros. said...

Thanks for the tuto , jadi lha :P

It'sAllAboutBabygirl said...

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

aliafauzy said...

thanks jadi :)

lin:) said...

thanks. menjadik :)

Anonymous said...

thanks apit :)

airisrose stories said...
This comment has been removed by the author.
airisrose stories said...

Thanks apit ^.^ suke sgat2 <33 heehe

aWatif azmi said...

thnx very much apit!dh jdi:P

Aku said...

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

Atiqah Mu'az♥ said...

PENING :\

ftnbhrzlhnf said...

tak jadi larh...boleh tolong buatkan?

▲tikaℍ ▲ℍ said...

Thank you apit, jadi dah !

Subscribe