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 :
- Buka halaman http://www.google.com/friendconnect.
- Pilih blog anda yang akan dipasang widget followers-nya.
- Klik "Tambahkan gadget anggota".
- Silahkan diatur ukuran, warna dll nya. Bila tidak suka pakai yang orsi saja.
- Klik "Buat kode".
- Silahkan Copy kodenya di notepad untuk sementara ini.
- Login ke Blogger.
- Pilih tab Design – Page Elements.
- Add widget – HTML/JavaScript.
- 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/AVvXsEhl9AKUR-25m6CzghyphenhyphenhG_jp_U2Y9K-Bv4HPsbvgEi0ugwKyh00oNHBQ8xydbuFpHaPCgjrLrlpR6vicUAK6fcTZOxtiH35KmGJ1xDQioDBsW1pBP_TL80ofAJbnvdNDAMXRRnHEqG5hoPk8/)#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">
#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/AVvXsEhl9AKUR-25m6CzghyphenhyphenhG_jp_U2Y9K-Bv4HPsbvgEi0ugwKyh00oNHBQ8xydbuFpHaPCgjrLrlpR6vicUAK6fcTZOxtiH35KmGJ1xDQioDBsW1pBP_TL80ofAJbnvdNDAMXRRnHEqG5hoPk8/)#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>
- Tulisan yang berwarna merah adalah code widget followers yang sudah anda copy di notepad. Ganti code tersebut dengan code anda sendiri. Setelah itu Save.
- Selanjutnya, pilih tab Edit HTML – centang Expand Widget Template.
- 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/AVvXsEiCmf7TNthc8Z_22syR9AernkaeyDectsJzVX6T8bmdUnfMuPfHEzpN-ghhixxlJZv2MJ9VeMBg_JaQG6ffsWFsyMuFjk7iaVdW4Nit91DGYSEO0TBQzB6k94R1rEgKCuoLCNVTop-sZTN1/'/></a>
- Setelah semua selesai, Save Template.
Tidak ada komentar:
Posting Komentar