Membuat Widget Hide Show Floating Di Pojok Blog

RELATED:

Membuat Widget Hide Show Floating di Pojok Blog. 2 Minggu yang kemudian saya mendapat sebuah email dari seorang sahabat Blogger yang menanyakan perihal cara pembuatan tombol "Follow" yang ada di pojok kiri bawah blog ini (namun kini telah dicopot). Dan alhamdulillah, kali ini kita akan membahasnya bersama.

Singkat kata, sahabat dapat memasang url tombol sesuka sobat; contohnya menu, atau tombol lain. Tombol ini jikalau diklik maka akan muncul suatu kotak yang berisikan widget maupun apa saja yang sahabat inginkan, dapat iklan atau hanya sekedar widget hiasan. Namun dalam tutorial ini saya memakai widget follower, twitter, serta link untuk link exchange. berikut tampilannya:

Untuk menciptakan sesuatu ibarat di atas, sahabat dapat melakukannya dengan cara:
1. Login ke akun blogger dulu
2. Lalu klik tab "template"
3. Klik edit HTML => proceed

4. Centang kotak "expand widget templates"
5. Lalu letakkan instruksi berikut di atas instruksi tag ]]></b:skin>

#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #FFFFFF;
background:url(#)#FFFFFF 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;
}

6. Lalu letakkan instruksi berikut di atas instruksi tag </body>

<div id="fl">
<div class="fltab" onclick="showHideFL()">
</div>

<div class="flcontent">

KODE WIDGET FOLLOWER, IKLAN, ATAU APA SAJA DI SINI

<div style="text-align: right;">
<a href="javascript:showHideFL()">
</a>
<div style="color: #90aed0;">
<a href="javascript:showHideFL()">[Tutup]</a></div>
</div>


<span style="font-size: x-small;"><a href="http://t4belajarblogger.blogspot.com/p/link-exchange.html" target="blank"></a></span>
<div style="color: #90aed0;">
<span style="font-size: x-small;"><a href="http://t4belajarblogger.blogspot.com/p/link-exchange.html" target="blank">Link Exchange</a></span></div>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById(&quot;fl&quot;);
fl.style.bottom = (-100-fl.offsetWidth).toString() + &quot;px&quot;;
</script>
<a href="javascript:showHideFL()" style="bottom: 5px; display: scroll; left: 5px; position: fixed;" title="Membuat Widget Hide Show Floating di Pojok Blog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnrEnhsxaUP0WTLmrFRG5yDvkjuvRfBz2fXk7wSa4UvWrTT5km1Ztuza3-En-SY_3ZEApeRYQPloGnWeG1M6RMe4eeWtjqUgFA1eAj4TYH0fYp-FaG7-j93pENWTjJ7yc5i_3yR6mpA7W/s148/follow_gfc_t4belajarblogger.png" /></a>

Keterangan:
Sobat dapat mengganti goresan pena warna hijau dengan widget, iklan, atau instruksi follow twitter maupun fanpage facebook sobat. Lalu yang biru ialah link untuk button/tombol, sahabat dapat menyesuaikannya sesuka sobat.

7. Klik "Save Template"

Selesai....


Jika sahabat memilki problem dalam menerapkan trik ini di blog sobat, silahkan untuk meninggalkan komentar di bawah post ini. Thanks

Tags: floating pojok blog, tombol melayang, tombol follow hide show