Jumat, 30 Maret 2012

Cara Membuat Show-Hide widget FOLLOW

 cara membuat tombol Follow seperti punya blog. Kelibihan dari tombol FOLLOW ini adalah dapat memperindah blog kita dan juga membuat blog kita menjadi lebih simple.

Nah Penasaranya cara membuat nya? mari kita coba saja cara di bawah ini.




1. Login dengan akun blogger anda
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya:



<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/AVvXsEg5hq_dQjSiC7yqTnwvNSdeqdjcHbsynRHq4ux3gI1GSaYYVJI_YVbZN-PutzgECPm01hKno3Wf4t4MV7bvNwgcc6STNGdGeSTgfrWGEg1B9vwZ4IQwbNy4hZW-wwGL6LqHa-_uU3QziLQp/f)#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="titi-share.blogspot.com"target=_blank"><div style="color: #444444;">
<span >By Titi-sharer</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>



Nah setelah selesai, jangan klik save dulu . Masih ada langkah2 selanjutnya..






Nah tulisan yang berwarna merah di atas itu akan kita isi dengan kode follow nya.
caranya buka link ini 
http://www.google.com/friendconnect






Lalu
7. Setelah masuk pilihlah blog anda yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna ,tampilan dst.. menurut selera anda/sesuaikan dengan blog anda
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarnamerah dengan kode Widget Follow yang sudah dicopy tadi)
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:




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

0 komentar:

Posting Komentar

also