Senin, 13 Juni 2011

Cara Membuat Widget Follow Melayang


Berikut ini ada cara membuatnya :
seperti biasa anada harus?

  • Login dengan akun blogger sobat
  • Masuk rancangan/design
  • Pilih Tata Letak/Layout
  • Klik Add a gadget, dan pilih HTML/Javascript
  • Selanjutnya, Copy dan Paste kode berikut..

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioNATrXnB_TYAzUXou-n0enIUgGi183olfDptNSyRseanSdn4najHu0UwtG0fQNcl768h66Z_RG7DTYAwwgz4lShJrZ0JH8MXKaJmVABg4a_r55x6XDs7BV-pFbQ-_4r_xPtP42P8Xk9E/)#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 Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Setelah cara yang dia atas selesayyyy, Jangan disimpan dulu,karna  masih ada langkah-langkah  berikutnya yaitu :
  • Sekarang snda membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke klik link_Disini 
  • Setelah anda masuk ke google friendconnect lihat pada gambar dibawah ini
  • Screenshot
  •  
  • Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
  • Klik "Tambahkan Gadget Anggota"
  • Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
  • Klik "Buat kode"
  • Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
  • Lalu Save
  • Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:
<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmGBiNf90tjvbp54D_kFjEwqdkAbOcbD3KsKgA8FvB7jaoiLXtT6NAiqGTeA5OIjZo-hL7TIjgGkzVIWMw6Aku1_SMOAeqV0mbc4t1XVuEypRp9FBcdkgu7Bk8Ry-0D1zZ4fzLj3Qg9J8/" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right: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="130px" width="40px" /></a>
Save dan lihatlah hasilnya.

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...

follow