Membuat Widget Hide Show Floating di Pojok Blog

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

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

Untuk membuat sesuatu seperti di atas, sobat bisa 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 kode berikut di atas kode 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 kode berikut di atas kode 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="Follow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ70K812Ny3QR2C58yRu87ZwtPSPeGUy2ZEsSIrQ584K0aBbICxT4ln93ZkSwhyphenhyphenvNA_TIcwv-hmgydt6UjfBXBG4VKPbZA5OqfMwf2Ej1Fnf7tb4yOfNKydsxegs_ZksXBqOLxrV5YAZvz/s148/follow_gfc_t4belajarblogger.png" /></a>

Keterangan:
Sobat bisa mengganti tulisan warna hijau dengan widget, iklan, atau kode follow twitter maupun fanpage facebook sobat. Lalu yang biru adalah link untuk button/tombol, sobat bisa menyesuaikannya sesuka sobat.

7. Klik "Save Template"

Selesai....


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