Buat Show Hide Widget Followers Di Blog

Berbagi-Kreativitas.blogspot.com - Buat Show Hide Widget Followers Di Blog trik yang kali ini akan saya publik, mungkin sudah tidak asing lagi dan bukan tips yang baru, namun untuk partisipasi dan koleksi tips berbagi kreativitas saja ini saya bagikan. Dilihat dari tampilannya yang memiliki kesan menarik ini cukup menghemat penempatan pada blog kita, agar tidak terlihat berantakan dan juga terlihat lebih rapi. Langsung saja lihat langkah-langkahnya dibawah ini.

Buat Show Hide Widget Followers Di Blog

Panduan Buat Show Hide Widget Followers Di Blog Lebih Keren Dan Menarik

1. Login ke blogger.com
2. Pilih Rancangan/ Design
3. Pilih Elemen laman ->> Tambahkan Gadget HTML/ JavaScript
4. Masukan kode di bawah ini

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSIG2he5VeWLqjiuoABbQCTwBvM0QsvWb5Iy_fmJN5zMVOUCfwxCUh8M7NFe_jc0KcTzWzWxD_RiqgTq-EhiQ9P69m8-IQoBH6_3PhJLOmT1fk2oAKjqBoAQPX87e90zLWfQwwEJUPa5H/)#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: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://berbagi-kreativitas.blogspot.com/2011/06/show-hide-widged-followers.html"><div style="color: #444444;">
<span >By Berbagi Kreativitas</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

5. Selanjutnya untuk mendapatkan Kode Widget Follow, Login ke www.google.com/friendconnect
6. Pilih Tambahkan Gadget Anggota, lihat gambar dibawah.

7. Edit ukuran gadget dari lebar dan jumlah sederetan wajah yang ingin ditampilkan

8. Pilih warna dan klik tombol buat kode HTML jika telah selesai melakukan pengeditan

9. Masukan kode HTML google friend connect yang telah di dapat di antara kode diatas, perhatikan "Kode Widget Follow Disini" yang berwarna biru.

10. Tambahkan kembali kode di bawah ini pada Gadget HTML/ JavaScript

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSrhvOLcLcjqtkrYRF5ugA61lgqggOwRFW3yp10aBHEFxQSWHssXmIaQ7URzwN1i9bjoN99lI_0kbdUZF5xN6Zxk_MqID3U-a3FhB1xeitplW3iOUUXAB82B6eo7Pzsw_MbIhJvjGDb2kr/" alt="kode" 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>

11. Simpan Gadget. Selesai selamat mencoba.