Membuat Widget Followers Yang Tersembunyi Di Sisi Blog

Untuk menghemat ruang blog widget followers bisa dibenamkan disisi blog. Jadi yang muncul disisi blog cuma judul widgetnya aja dan kalo di klik baru muncul halaman widgetnya. Untuk langkahnya sebagai berikut : 

1.  Login ke akun blogger anda, sebelumnya anda masuk dulu ke Google Friend Connect atau  klik aja disini untuk masuk ke Google Friend Connect, tujuannya untuk mendapatkan kode widget follower anda. Setelah masuk ke Google Friend Connect, klik tambahkan gadget anggota dan atur lah warna widget follower anda. Setelah selesai klik buat kode. Dan kode script follower anda akan mucul. Simpan dulu ya.

2. Lanjut masuk ke dasbor blogger anda setelah anda tadi sudah mendapatkan kode follower anda, buka Rancangan, Lemen Halaman, Klik Tambah Gadget dan pilih HTML/JavaScript.

3. Masukkan kode berikut :

<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://i1094.photobucket.com/albums/i443/irawan9/folllowers.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 = (10-gb.offsetWidth).toString() + "px";
</script></div></div>

4. Ganti tulisan yang dicetak miring berwarna merah diatas dengan kode follower yang sudah anda simpan tadi, dan ganti tulisan yang berwarna biru dengan alamat url gambar anda atau bisa juga menggunakan alamat diatas.

5. Simpan gadget dan lihat hasilnya.

Artikel Terkait Lainnya Seputar:

Posted in: seputar blog