Membuat Widget Follower Melayang dan Tersembunyi di Blogspot

Membuat Widget/Kotak Follower Melayang dan Tersembunyi? Hmm...apalagi ini? Mungkin anda bertanya-tanya begitu. Widget Follower/Pengikut (saya menyebutnya ‘Penjejak’) sering kali membuat tampilan blog seolah menjadi penuh, terutama jika follower kita sudah banyak.

 

Widget ini akan tampak mencolok dengan banyaknya gambar para follower. Solusi bagaimana agar widget ini tetap ada namun tidak memperburuk tampilan blog kita. caranya adalah dengan membuat widget follower melayang dan tersembunyi. Blog pun akan tampak lebih profesional.

 

Tanpa basa-basi lagi, berikut triknya :

 

1.     Setelah login, masuklah ke Google Friend Connect untuk mendapatkan script kode widget follower anda.

 

2.      Anda akan dibawa ke halaman utama situs Google Friend Connect.

 

3.      Klik “Tambahkan gadget anggota” atau “Add the members gadget”.

4.     Atur ukuran dan warna widget follower anda. Untuk membuatnya transparan, kosongkan saja semua pengaturan warna.

5.     Klik “Buat kode” atau “Generate code”. Maka anda akan diberi script kode kotak follower anda. Jangan tutup tab browser anda.

6.     Buka tab baru pada browser anda. Masuk ke akun blogger lalu ke dasbor, buka Rancangan > Elemen laman > Add a Gadget/Tambah gadget > HTML/Javascript

 

7.     Masukkan kode di bawah ini kedalam kolom  :

 

<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”

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

 

 

8.     Ganti tulisan “Kode Widget Follower” dengan kode widget follower yang tadi anda peroleh dari Google Friend Connect.

 

9.     Simpan.

 

10. Kotak Follower akan muncul di samping kanan blog anda secara terselip/tersembunyi.