✎ follower

Susah Senang Sama Sama

Daisypath - Personal pictureDaisypath Anniversary tickersborder="0" height="80" src="img src="http://davf.daisypath.com/pywip8.png" width="450" / />

Friday, December 30

Tutorial 12 - Button Follower Lain Dari Yang Lain

Hyte !
Aku baru je berjaya buat eksperiment kat blog adik aku.
Macam biasalah blog adik aku selalunya jadi mangsa hehe.

Kali ni aku nak ajar korang bila tekan button follower ni..


Dari atas follower box akan turun.


Kalau nak lebih faham pergi blog sini nanti korang akan lebih faham apa yang aku maksudkan.

Jom buat !

1- Mula-mula korang kena cari dulu CODE FOLLOWER BLOG korang.  Jangan risau, korang pergi tutorial yang SINI. Tutorial ni ada ajar cara nak cari code follower =) .

2- Dashboard > Design > Add a gadget > HTML / Javascript .  Copy code dibawah ni dan paste di ruang HTML.

<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:-0px; left:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="100" height="80"src="http://i.imgur.com/otyvC.gif" alt="PUSH" title="JOM KLIK"/></a>
</div>


3- Code di atas ni untuk buat BUTTON FOLLOW.
 width="100" height="80" : untuk saiz LEBAR dan PANJANG button follow.
 http://i.imgur.com/otyvC.gif : untuk URL IMAGE button follow.
 JOM KLIK : untuk ayat korang.  Nak kekalkan pun takpe.

4- Save.

5- BELUM SIAP lagi tau !  Sekarang nak buat tempat follower pulak.
Dashboard > Design > Add a gadget > HTML / Javascript.

6- Copy code dibawah ni dan paste diruang HTML okay.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:60px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dashed #a64d79;
background: url(URL BACKGROUND);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;">
Masukkan CODE FOLLOWER KORANG tadi.
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br /><div align="right"><font size="3"><a href="http://wanhazel.blogspot.com/"><div style="color: #FF0000;">
<span ></span></div></a></font></div>
</div></div></div>

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



7-
 dashed : boleh tukar kepada dotted , solid atau nak kekalkan pun boleh.
 #a64d79 : code warna untuk border background korang.
 URL BACKGROUND : URL BACKGROUND follower box korang.
Masukkan CODE FOLLOWER KORANG tadi : CODE FOLLOWER BLOG yang mula-mula aku suruh korang cari tadi tu.


8- Dah SIAP !  SAVE !  =)

Kalau jadi tinggalkan komen ye =)  Selamat mencuba !


dah baca??? Tinggalkanlah comment. Tengkayu =)

No comments:

Post a Comment