Membuat Follow Box Tersembunyi



Mau membuat kotak follow tersembunyi seperti di cybertex komputer? Follow box tersembunyi akan tampak lebih rapi untuk blog anda.




MEMBUAT FOLLOW BOX TERSEMBUNYI

1. Buka Google Friend Connect
2. Buat Gadget Anggota / Follow
3. Setelah Selesai, Catat Kode yang di dapat di Notepad
4. Login ke Blogger
5. Pilih Rancangan > Edit laman
6. Tambah Gadget > HTML / Javascript
7. Letakkan Kode di Bawah ini




<style type="text/css">
#fl{
position:fixed;
right:250px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://irenkdesign.files.wordpress.com/2008/09/burst_7.gif)#000000 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 showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
Letakkan Kode Widget Follow yang di catat di notepad tadi.
<div style="text-align: center;">
<a href="javascript:showHideFL()">
    [Close Box Follow]
    </a></div>
Mau Box Follow Seperti ini ? <a href="
http://xenon-vista.blogspot.com/2011/05/box-follow-tersembunyi-ala-xenon-vista.html">Click Here!<br />
<a href="http://www.xenon-vista.blogspot.com"><font color="red"/>www.Xenon-Vista.blogspot.com</font></a></a></div>
    </div>
 
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script><a href="javascript:showHideFL()"/><img border="0" src="http://kreyolnetwork.com/images/twitter_follow_me.png" alt="XE" title="Klik untuk membuka Box Follow!" style="display:scroll;position: fixed; top:150px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="75px" width="100px" /></a>


NB : Ganti Kode yang bewarna Merah dengan kode yang di catat di notepad tadi.





Selamat Mencoba
Related Posts Plugin for WordPress, Blogger...

comment 2 komentar:

Dwinkha Agita Puteri on 8 Agustus 2011 pukul 11.34 mengatakan...

bang aku mohon izin untuk mengcopy dan menggunakan tutorial ini..

aku sangat terinspirasi oleh blog ini..
Maju terus bang.. selamat berkarya..

Unknown mengatakan... E

Silahkan gan... :D

Terima kasih atas kunjunganya..

Posting Komentar

۩۞۩ Pembaca yang baik selalu meninggalkan komentar yang baik dan sopan. ۩۞۩
Komentar berunsur Junk, Spam, Flaming dan sara tidak akan di tampilkan.

 

Total Pengunjung