Dijual Rumah di Kota Bandung
LT 140 m2 LB 110 m2 Harga Nego
untuk info KLIK disini

Kamis, 15 Desember 2011

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

2 comments:

  1. g ada y buat sebelah kiri kk?

    BalasHapus
    Balasan
    1. makasih kunjungannya. Maaf saya telat balas.
      untuk merubah menjadi sebelah kiri.
      1. Agan terlebih dahulu buka html widget
      2. cari HTML/Javascript : (paling bawah)

      var gb = document.getElementById("gb");
      gb.style.right = (30-gb.offsetWidth).toString() + "px";

      rubah menjadi
      gb.style.left = (30-gb.offsetWidth).toString() + "px";

      3. save lihat hasilnya dan coba klik.... semoga dapat berhasil.

      Hapus