...cara membuat 3 widget floating (buka tutup) sekaligus...

kali ini saya akan share tentang floating,
yaitu widget melayang yang bisa buka tutup, sehingga bisa menghemat tempat blog kita.
apalagi 3 widget yang akan di float. yaitu widget blogger, twitter widget, dan widget find us on facebook

langsung saja caranya.

login ke blog anda, pilih rancangan kemudian tambah gadget
pilih HTML/java script

copy code di bawah dan pastekan pada tab konten..

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rgJppRUeHKTIndmT6Kg9Lm9CRDrSsuybD0MvSHkz8Y5tc62MSzVPhnuFGN9ZJYIiAMa7uqjwF2LVBS6AP8Cvtdc2QMd0TeoBi60IPpCofnVrVdRQPxTfLt0SOvc71is2GYgDrFwBe8U_/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;} 
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7D-N0aJjSa3PBLBErK6ttuz3cH4Qt5bmILjlsImHdDIxwGSg1bdgjoqD_s6SPfju3q5Eeh_vYDAo-4Y9CuUUgcYOIilbF8O0TNHO7etiQP8eF_8obQ8ti-RsZvxQeb76zMKEdAP3n4Us0/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;} 
.barconteblogger{margin:5px 0 0 47px}



.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUdsem5rWbCUS63T6vnw1xkttQR3AxVpXEbQjAQwzUV6ryDlE_ez3KhuRwy_kI6fQVKS5eCcpPwLogWgPjifA8g8cBJnWxJlgq7dr-W8l_DIZs9ZqQpezOBIrLS9ZtfWY-oZ1w1vIV33R/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;} 
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpIJuR8TcvFjf-N74h2OiswQZYgIO9sTPfUAiLNHiThRVQkSzntORm-L3jPsuiikk5ZnGpVDuvu0P1ANIoS5Ys92xO4MtjY-9TbYa4wn7Cn6kVmQKiAvzIjp6B9R_gs82JD4m1w_M3ZrVw/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;} 
.barcontetwitter{margin:5px 0 0 47px}



.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTlnQYqX_ztdYmtyNCTpkxnOCsM97ZYnQM3eeECsg9qsCY-5LgFCG7kfTNst3T7ggSiQbgkySb7jcSYJgX0tt-1AuC_pmOJx3W4c-LFi6y__aXlEq3LyHvv2n8nHZI3FxwAZaXPxOarOp/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;} 
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMB-FIy7HxVXDvKjqmiEhqIE3hx-jngCQzM2MAq2ZfDwmVDjXfFXGQcr_1f2uHc8O8bVyx5R6D_mDQSlyWNX1RRgtEkOMfyShbuUcuP_AgXnSepmbJyyUdqoUkFxqXU8YWvvPF6MVRYLlO/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;} 
.barcontefacebook{margin:5px 0 0 47px} 
</style>


<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"> 
<div class="barconteblogger">

    KONTEN BLOGGER DISINI

</div>
</div>


<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"> 
<div class="barcontetwitter">

    KONTENT TWITTER DISINI

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"> 
<div class="barcontefacebook">

    KONTEN FACEBOOK DISINI

</div>
</div>