Cara Membuat Widget Followers Auto Hide

Baiklah, langsung saja kita masuk pada pembahasannya membuat "Show/Hide Widget Follower". Tujuannya tidak lain hanyalah untuk mempermudah dalam menerapkannya pada blog. Berikut caranya :



1. Pastinya login Blogger terlebih dahulu

2. Masuk ke Rancangan > Elemen Laman

3. Tambahkan Gadget Html/Java Script

4. Copas kode berikut :

<style type="text/css">

#fl{

position:fixed;

left:150px;

z-index:+1000;

}

* html #fl{position:relative;}

.flcontent{

float:left;

border:2px solid #676767;

background:url(http://i1115.photobucket.com/albums/k551/SuprayNewbie/blackmatrix.gif)#000000 repeat-x bottom center scroll;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideFL(){

var fl = document.getElementById("fl");

var w = fl.offsetWidth;

fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

fl.opened = !fl.opened;

}

function moveFL(x0, xf){

var fl = document.getElementById("fl");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

fl.style.bottom = x.toString() + "px";

if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

}

</script>

<div id="fl">

<div class="fltab" onclick="showHideFL()"> </div>

<div class="flcontent">





Kode Widget Follow Disini





<div style="text-align: left;">

<a href="javascript:showHideFL()">

[Tutup]

</a></div>

<font size="2"><a href="http://imcyber-team.blogspot.com/2011/12/cara-membuat-widget-followers-auto-hide.html"target=_blank"><div style="color: #444444;">

<span >By [./Indramayu Cyber Team]</span></div></a></font>

</div>

</div>

<script type="text/javascript">

var fl = document.getElementById("fl");

fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

</script>

Jangan disave dulu, mari lanjut ke langkah selanjutnya

6. Untuk mengambil kode widget follownya silahkan masuk ke link ini Google Friend Connect

7. Lihat Gambar dibawah



[1] Pilih blog sobat yang akan dipasang widget follownya

[2] Klik "Tambahkan gadget anggota"

[3] Silahkan diatur ukuran, warna dll nya..

[4] Klik "Buat kode Widget Follow"

[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya



8. Paste kode Widget Follow tadi pada kode nomor [4] (*Gantikan kode yang berwarna merah dengan Kode Widget Follow yang sudah dicopy tadi) Save..

9. Masih pada "Elemen Halaman" tambahkan gadget HTML/Java Script kemudian copas kode berikut :

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-EI0aTR6I30JYCd5nBYdmtZKvbsqbUP1v1MMlZJw_UNYul_ich_-jdvjFtKyKSgPxT2PKby2JzAHAlQZAgcSJW8MktHnwxgZrTmDkNI5qnnbUSzwaOJKF0yMRL8z1U4RQNgq8cNODhYo/" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

SAVE

10. Selesai dan lihat blognya..

Source

Bagikan Artikel ini