TutorialBlog: AutoHide Follower Box

Assalamualaikum dan salam sejahtera,

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 solehah 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

LANGKAH 8

sapa yg nk combine dalam 1 kotak mcm kt tepi ---> tuu.korang paste koding follower ats koding shoutbox korang okei..*bg sesiapa yg pkai autohide shoutbox sahaja. :)

CONTOH:

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchWOchvbu9afIK2A3HueSaGLLx1HFCx2WAjlAzBoGsXKta9AYbEQHeP58M_7eVA-n8YHJHMhxjulH_iVJnLUM4hdfsDtSAJBXDLocAaA8Q1Qm99vJMjITdmLGzj7JvcjM953RFD8JxE2E/s1600/folo.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDadQTEwqFlC2QpO5XSa8d-hXvtTaOlcROWq2kIP43kY6YtRYxYwjBBZo3m7-jKksc06ieaycNeB3Qgbl5P5a7meOxqD239lgSAxIYrsFoEGYTrg3cvdXC56nHAtxhLeseRAJnLdhyphenhyphenu0_l/s1600/folopurple.png

boleh cari kat SINI juga.

credit: empayarbintangtiga

Terima kasih baca, sudi-sudilah komen :) .