Cara membuat Widget Follower Tersembunyi

Cara membuat Widget Follower Tersembunyi

by wo os ~ Kamis, 23 Juni 2011

Cara membuat widget follower tersembunyi, untuk apa..??? ya agar supaya tempat/kolom sidebar/footer tidak kelihatan berantakan atau ....bagai mana baiknya lah menut anda, nah kalau anda menyukainya, Ayo langsung saja kira buat dengan tahap-tahap berikut ini;


Untuk cara membuatnya, lakukan langkah dibawah ini:
1. Pertama kali sebaiknya anda login dengan akun blogger anda.
2. Lalu buka Google Friend Connect untuk mendapatkan script kode widget follower anda.
3. Maka anda akan dibawa ke halaman utama situs google friend connect.
4. lalu pilih blog anda di sidebar sebelah kiri. kemudian klik tambahkan gadget anggota.

5. Atur ukuran dan warna widget follower anda. untuk membuatnya transparan, kosongkan saja semua pengaturan warna.
6. Klik Buat kode. Maka anda akan di berikan script kode widget follower anda.
7. Buka tab baru pada browser anda. kemudian masuk ke dasbor blogger anda, buka Rancangan > Elemen laman > Add a Gadget > HTML/Javascript
8. Masukkan kode di bawah ini kedalam kolom tersebut:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i36.tinypic.com/bi1n44.jpg') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script> <div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Kode Widget Follower Anda Disini

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

9. replace tulisan Kode Widget Follower Anda Disini dengan kode widget follower anda.
10. Simpan gadget, maka widget follower anda sudah terpasang dengan melayang.

Selesai. semoga tampilan blog anda menjadi lebih profesional. selamat mencoba.