...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/AVvXsEgmpLSU_TbZwA5p9qQfDNK9zSEvUmUzi_F2dPpNMPeJ-eIhlp6u8N0VaPB6qVeP6NrYybvggfaKMPvviQrjVswOxjFG1YUSrw7kmHPE3wIeBz3LE1pth3Oipkt41PcB14lUYs8RKp0yzwcy//');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/AVvXsEiFVAWMRs_Sb_bccw-ariacUR_Ag2c-2Gnjn2rit4nuuNN3DB_bS00ZZJMuL9rQPVvt6YUy0sh37ogOtwjp1xicoX4iR0wONoZUplroVpxkUR5pYBxSttciBBG_Yb7TJGL642BEGKgWQZCD//');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/AVvXsEhmOTFRspjj1UM_gwPE4aziE4OUPtnzu8UjHPtjLRJqeR-YtHKa2aRd8a9Bgrs5zFVB834Y0HlJKUMbaANT400NCNAyZj_bfo_pZWkpHfiuZ9piWjHrVMTtbu4V7KZ8ot4CPQfQZhLGIAgA//');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/AVvXsEigdn8KsiOGkUbGx6iIMeGvIQCUtESJwmFgtNiXfyofXq1PVRgLiXl4eECZr1pt_PwOwfaFNlcvfDClEZEjEp2krxdE22lkPAW0C01YwC3eKRrM0gnjYeAhLxOgj9oQVpXlf7VVho-pcq_m//');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/AVvXsEjKx8jWt37RXAk2VRomhduEuT45tRUpkWbjkmgaDu0Bt8MMlOGfPbkHFZ7UDpvU-uPQ9goaOmwcwMC8J7HQzUClg6L9JMgheJMmTO8KB1TH58KWvgp4USIaAtSTlsL84z81M2VJj6x-VJqD//');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/AVvXsEiDVjq4Q_WCaQ_aBL_gmiCfmup-2K4h8odEHOsQWQNGz7-zR7SFc857Sce1WKkQFYhKhwJjmSPnnqf8eU95KWJs3H3iNBwQZc1XlUhwBg7Njyfu4zau9vcw4aczIgH8UJs-R0iTf7eXWKpi//');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>