Cara Membuat widget Pengikut/Follower Tersembunyi

Membuat Widget Follower / Pengikut Melayang dan Tersembunyi. Widget follower atau pengikut dapat membuat blog kita dikira profesional oleh para pengunjung. terutama jika follower kita sudah banyak. namun disamping itu ada kelemahan yang membuat widget ini menjadi buruk menurut saya.

kelemahan tersebut adalah  widget ini akan memperjelek tampilan blog kita menurut saya widget ini terlalu mencolok dan banyak gambar. untuk itu, kini saya akan mulai memberikan solusi bagaimana agar widget ini membuat blog kita menjadi lebih profesional namun tidak memperburuk tampilan blog kita. caranya adalah dengan Membuat Widget Follower / Pengikut Melayang dan Tersembunyi seperti yang saya pasang pada blog saya ini. atau lihat gambar 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.

trik2-blog