MEMBUAT KOTAK FOLLOW TERSEMBUNYI

MEMBUAT KOTAK FOLLOW TERSEMBUNYI

Kali ini saya akan memberitahukan cara membuat kotak follow tersembunyi seperti di blog saya (dibawah buku tamu)

Pertama login ke akun blogger kalian
Masuk ke "Rancangan/Design"
Klik "Tata Letak/Layout"
Tambah Gadget, Pilih HTML/JS

Lalu copy paste kode HTML 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/AVvXsEjfGIgaMGaWzgHREFCQMG1ofQuID-UYXwqkU9o9XSNJJhrOQKaSvn_G-lQ1B2KahcbcCqp39VP33wMJke9AyMiIk6iuPelQFuUZ3Fc6NvWLzjMDdT1rBE8txDt0Q2TbGIVn1TFxHy-bOwNU/)#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">


Widget Follow


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



Untuk mendapatkan kode widget blog kalian masuk kesini
Lalu pilih "Tambahkan gadget  anggota"
Edit sesuai selera kalian
Jika sudah selesai mengedit klik "Buat Kode"
Copy kode itu, dan ganti teks warna biru diatas dengan kode tersebut
Save

Lalu copy kode dibawah dan masukkan seperti diatas
(Rancangan-Elemen Laman-Tambah Gadget-HTML/JS)

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


Ganti teks warna biru dengan link gambar ataupun logo kalian untuk mengganti gambar follow.
Kalau tidak punya pakai itu saja tidak masalah.
Terakhir Save,, dan lihat hasilnya. Berhasil atau tidak?

Posted in: trick,trick blogger,Tutorial,Tutorial blogger