Membuat Tombol Followers Sembunyi di SideBar

Post by Unknown on Friday, April 29, 2011 | 12:18 AM


Ternyata tidak hanya widget Chat yang bisa kita sembunyikan di sidebar, widget Followers pun bisa. Namun sebelum menggunakan code HTML ini anda harus mengambil code widget followers dari akun Google anda sendiri. Cara ini bisa cocok sekali untuk blog anda yang banyak sekali widget-widget hingga memenuhi Homepage. Okelah, tidak usah panjang-panjang yang penting ngerti tujuannya, hehehehe. Ini deh langkahnya :
  1. Buka halaman http://www.google.com/friendconnect.
  2. Pilih blog anda yang akan dipasang widget followers-nya.
  3. Klik "Tambahkan gadget anggota".
  4. Silahkan diatur ukuran, warna dll nya. Bila tidak suka pakai yang orsi saja.
  5. Klik "Buat kode".
  6. Silahkan Copy kodenya di notepad untuk sementara ini.
  7. Login ke Blogger.
  8. Pilih tab Design – Page Elements.
  9. Add widget – HTML/JavaScript.
  10. Masukkan kode berikut ini :
<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/AVvXsEgwjN1H9c15mYugisqa3WrGiEtF8bfwpJvQ7mQYOD9lnSsAEJqZXdm7WWK67ECtRxcSb2tuZZmc1TBKTRty15R-vH7LN1jqdk0yeTATDgFfTJhV9w_MkYOFfJn7H-XVfYgX6btJmK7gXMJW/)#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">

Code Widget Followers anda


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Close]
</a></div>
<font size="2"><a href="http://exeloph.blogspot.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

  1. Tulisan yang berwarna merah adalah code widget followers yang sudah anda copy di notepad. Ganti code tersebut dengan code anda sendiri. Setelah itu Save.
  2. Selanjutnya, pilih tab Edit HTML – centang Expand Widget Template.
  3. Cari code <body> dan paste cade dibawah ini tepat di atas code <body>.
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6Q5HC2DRt5uZ8pU6nh1Q4w9GFno7YaeA_STCJd3w9_vkHXnXBrEtqicBa-adFFHyHo4xFzrEniuaRZ7Gw3tcuEN4P0f8xs5EO56Jhn4_I_EdbiQhP2kHhrAusP6PBCqXn2Tgjnu7nDof/'/></a>

  1. Setelah semua selesai, Save Template.





10 Comments:

  • selamat malam sobat, datang cuma memberitahu cara bikin gadget top komentator.. :) ada dipostingan q kok, silakan berkunjung lg..

    btw, semakin mantaf aja nih tampilannya.. :D

  • wahhh...mantab ini postingan gan...makasih infonya ya.?

  • Lah kok dadi ngunu navigasine? Css e gak dipasang ta?

  • pencerahan baru nih,,infonya sangat membantu sekali dan sangat bermanfaat ,,makasih banyak kawan,,salam sejahtera,,

  • info yang keren dan menarik,,makasi banyak,,

  • makasih banyak infonya.... sip...

  • @boy : oke deh mas aris tak liat tuh tipsnya nanti

    @agriculture : iy mas sama" deh sudah kunjung kesini

    @fery : nah iku masalahe mas wis kabeh padahal now

    @obat : terima kasih kembali deh buat mas" yang sudah mampir kesini, sukses juga yah

    @dila : okay sip juga deh ^^

  • Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .