Show and Hide Kotak Follower

ASSALAMUALAIKUM

Hari ney untung,dapat balik sekolah awal.hehe.balik-balik umah buat tutorial ney,show and hide kotak follower ney untuk kemaskan sikit blog.kalau tengo blog amy,amy buat show hide followers ney,sebab blog amy berselerak.hehe.tapi kan,korang perasan tak kotak follower tu selalu hilang dy punye follower,kadang-kadang geram jugak.hehe.okeh,xna cakap panjang lg,duduk diam-diam,kite mula tuto ney ea.

1) Mula-mula pergi dashboard->design->page element->add gadget->pilih html/javascript.
2) Lepas tu,copy code ney ea

<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="200" height="200"src="url button" alt="PUSH" title="Follow"/></a> </div>

3) Paste dekat dalam kotak html/javascript tu tadi ea.

NOTA KAKI:

1. url button tu ialah image button korang tu
2. top/left tu korang boleh la edit-edit balik.
3. 200/200 tu ialah saiz image button korang k.

Amy ada buat kan image button,siape2 yang amek bgtwu amy kat komen k.image ney saiz 200/200,so korang xyah la ubah code tu k<-----untuk siape2 yg amek image yg amy buat sahaje.

http://i1118.photobucket.com/albums/k606/melonstrawberry/follow-me-1.png

http://i1118.photobucket.com/albums/k606/melonstrawberry/follow-me-2.png

http://i1118.photobucket.com/albums/k606/melonstrawberry/follow-me-3.png

STEP SETERUSNYA:

1) Tekan GOOGLE FRIEND CONNECT.

tekan add the members gadget

set kan warna kotak and sebagainya untuk kotak followers korang.

\

dah puas hati,tekan generate code.

2) Then,buka lagi satu html/javascript.
3) Lepas tu copy pula code ney

<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) ; 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>

4) Paste code ney dekat kotak html/javascipt yang baru.
5) Kalau dah puas hati,boleh la save.

NOTA KAKI:

1. tulisan merah tu ialah code yang korang copy dari google friend connect tadi.
2. tulisan biru untuk warna border kotak tersebut.
3. tulisan hijau untuk background,and background tu boleh cari dekat photobucket.

Maaf,tuto ney sangat panjang ! kalau tak paham,comment, amy akan tolong yg mna boleh.

---

Thank you for reading

---

Tweet