Senin, 09 Mei 2011

Membuat widget Followers Buka tutup (show/hide)











Nah bagaimana caranya? ikuti langkah berikut ini.


Langkah-langkahnya sebagai berikut.
1.Jangan lupa loggin dulu ya ke Blogger
2.Click tulisan Rancangan/Design

3.Pilih add gadget
4.Pilih gadget html/javascript
5.lalu copy pastekan kode berikut ini kedalamnya
<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://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.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">
Kode widget anda Disini
<div style="text-align: right;">
<a href="javascript:showHideFL()">
    [Tutup]
    </a></div>
    <font size="2"><a href="http://ypsrandy.blogspot.com/2011/04/widget-memasang-widget-follower.html"target=_blank"><div style="color: #ffffff;">
    <center><span >©YangPentingshare©</span></center></div></a></font>
    </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://i1102.photobucket.com/albums/g456/yangpentingshare/follow_me.png" alt="Yps" title="Klik untuk membuka kotak 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>
Lalu untuk Kode widget nya anda bisa dapatkan Di Google friend connect.
Lihat langkahnya pada gambar Berikut:


nah kopas aja kode htmlnya..

0 komentar:

Posting Komentar