27 March 2011

AutoHide Follower Box!


Assalamualaikum semua! 
Hari ini korang akan belajar macam mana nak buat Hide Follower Box! Maknanya, ianya tergantung la.. Macam Shoutmixt/Cbox korang. Jom Mulakan!


LANGKAH 1
  • mula mula.pegi DESIGN > PAGE ELEMENT > ADD GADGET > HTML/JAVASCRIPT
LANGKAH 2
  • copy koding nie..masuk dlm gadget tu okei. :)
LANGKAH 3


<style type="text/css">
#gb{
position:fixed;
top:150px;
z-index:+1000;
}
* html #gb{position:relative;}
}
.gbtab{
height:138px;
width:46px;
float:left;
cursor:pointer;
background:url('URL GAMBAR KORANG') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 46-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">


KODING FOLLOWER BOX KORANG 

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (46-gb.offsetWidth).toString() + "px";
</script>

LANGKAH 4
  • Dah buat??biarkan dulu..kita nak ambik koding untuk folower okei. :) masuk google. Search google friend connect . Dah jumpa??klik. Pastu pilih ADD THE MEMBERS GADGET.
  • Pandai lh korang adjust smua wrna.height..width kotak folower korang kat ctu :)

LANGKAH 5
  • dah siap?korang klik GENERATE CODE.pastu copy & paste kat LANGKAH 3 tadi okeh.. yang ada Kihah buat  "KODING FOLLOWER BOX KORANG"

 LANGKAH 6 
  • sila tengok kode yang berwarna merah.korang mesti pastikan kode bewarna merah tu ikut size width gambar atau icon yang korang nk pakai okeh.kalau takk.ada yg nampak half..terlebih nampak..hehe..
  • kode warna biru tu pulak.jarak kotak folower korang dari atas oekeh..nak bawah lagi..korang tambah je nilai px tu.

LANGKAH 7
  • okei.dah siap.. :) sapa yang berjaya buat tu..tepuk tangan tiga kali..yeye.. hehe


EXTRA! Freee!

 http://3.bp.blogspot.com/_34uMWGcXHtM/TUwjEuchk5I/AAAAAAAABew/c72HGU0xgJY/s1600/folo.png
height :77px
width : 99px

http://1.bp.blogspot.com/_34uMWGcXHtM/TUwhbxvq2-I/AAAAAAAABes/PwNVzZ5etWk/s1600/folopurple.png
height : 138px
width : 46px


Ingat pesan Kihah tadi.kod yang berwarna merah tu..jangan lupa  :)

Credit to : Kak sholehah

No comments:

Post a Comment

Your words defines you