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!

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QanlUza33hyoxZfZ3rmz52687rGDGo23Fym_ER60igimvq2lUFuMKZtAlXQkI0Qt0r_eqau5rraaSeT5I8dVX8Zz20PGEyrR4nYcKjFkNw3Vbcnu0DTPcsLPQZiOYpGtip62SAemcHqw/s1600/folo.png
height :77px
width : 99px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEfqtjNCXAXYDK0nyBy5EluN6vbnOCjNxnMNtTd7uWaj3IdyCSV0qm0JA3z5HO_5CwSYnW0-dJs1cI1nEz5mswa5A5UfedT2mmZNUcCXTOUrnRw_IA_Tv7WDFh0NjJ_lIPre5aqEaZgYR/s1600/folopurple.png
height : 138px
width : 46px

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

Credit to : Kak sholehah