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/AVvXsEgVOONsJa4SeIwKMiyHDcHRiclUf5wf8XgTDFr7DXzDn9FfAXcIP2POHGEgQ2Lr-ZlWgiWkXxHrb5-sY5hMPyKMAtQryrkyyK4N0tdZFUtn4_Mm0ZgqKMIUAxClrc7I6_i5V5ehof4cHFnJ/)#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/AVvXsEi9JMm2mJnD4rcn-q42RTpNZe8b0lyUuw_ZAfe99B0LVrh1swdrXZmholT2OmHhC_dRgm_78kSO-Eg5sgJR1MXKBm6xPWqMSdOEsuhpws8Q4XSDCLrfmWShQ1iSbnx_ujapo_ik2VL5Gy3p/"
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;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?
