Membuat widget Followers Show and Hide

Mr.Black Hats Informasi - Widget Sekarang kita akan membahas tentang widget berbeda dengan posting sebelumnya yang membahas tentang Free Software yaitu Free Software : Optimization Mozilla Kalian,Jika mozilla kalian masih belum bekerja optimal baca lah posting itu dulu baru kita lanjut posting ini :).

Widget followers adalah widget bagi para pengunjung yang ingin mengikuti blog kita,jika mereka sudah follow blog kita os tos mas tis setiap posting baru di blog kita muncul di dashboard blog mereka yang sudah follow blog kita begitu juga sebaliknya kita menerima posting blog mereka bagi kita yang sudah follow blog mereka dan akan muncul di dashboard blog kita.

Meskipun widget followers (widget bawaan blogger.com) tetapi banyak para blogger yang masih memakai widget ini,Google sendiri pun men support jika kita ingin modifikasi widget Followers,Jika kalian ingin lihat contoh dari widget yang kita ingin bahas ini,lihat gambar dibawah ini :

Gb.1

Atau jika kalian ingin lihat widget nya secara jelas atau detail klik gambar dibawah ini :

Klik Disini

Lihat dibagian tengah sebelah kanan pada blog tersebut !

Tertarik ingin membuat nya?Oke lihat tutorial dibawah ini :

• Login pada blog anda masing-masing
• Klik tombol 'Rancangan'
• Klik 'Tambah Widget'
• Pilih 'Html/Java Script'
• Lalu copy paste kode dibawah 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/AVvXsEg25OY9fIhVwK72CCFAyCHw5DbSMAi2sFoZ902NdvJX2aMoiQGembTiQ0h23KnU_2lm9GqS85KnoOvMtCYy2qSB44BWOSyYZerYN5uNlaKguhGep6xZ50_Wj20iFg4inn9-d-TruxFO-jQX/)#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">


Taruh Kode Html Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.black-hats.cc.cc/2011/07/membuat-widget-followers-show-and-hide.html"target=_blank"><div style="color: #444444;">
<span >By Black-Hats</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

• Jika sudah jangan disimpan dahulu karena kita masih lanjutin Tutorialnya
• Selanjutnya,Buka GFC (Google Friend Connect)
• Setelah masuk GFC,silahkan pilih blog sobat yang ingin dipasang widget nya
• Lalu,Pilih 'Tambahkan Gadget Anggota'
• Anda atur sesuai keinginan sobat
• Jika sudah selesai,Klik 'Buat Kode'
• Copy kode tersebut
• Lalu pastekan di tulisan yang bercetak tebal

• Selanjutnya Copy paste java script berikut di bawah kode tadi

<span class="Apple-style-span" style="font-family: monospace; white-space: pre;"><a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6WTzMn6VKv6oBozCgvur46qiqyHmFXXKL_aYcRqpmOcBHR9YZV5luu4SqkvZz3RCw_5cB_uTSqS93zv9h8236qIz6oAaDothKMsksIsOUNEnhzioft1FgwAA5YJfDFPF4QLfU-q1iW7R/" 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></span>

• Klik 'Simpan'

Jika kalian ingin bertanya LANGSUNG ke saya silahkan kontak saya di Boymalik atau kesini Forum Tanya Jawab atau juga silahkan komentar dibawah ini