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&#8221; target=”blank”></a></span>
<div style=”color: #90aed0;”>
<span style=”font-size: x-small;”><a href=”http://t4belajarblogger.blogspot.com/p/link-exchange.html&#8221; 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://lh5.googleusercontent.com/-mG8VYpPjsfc/T1IAtPLi3GI/AAAAAAAAEMw/wAui–iVWEY/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….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s