...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/AVvXsEg_h3O4UA7rowQ-nUTq44OatoB2JLEQSpF5A02IEHBgmjmMDYDKvJLyiQO3qYZgchEbNQXe0_KKUyRB1clVC8fbpvbktF7aKJvDvnM0FurGJaLzlthsorfKIuYI9-HLbVEtoFJEENBZP3ku/');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/AVvXsEgNkhRSN_XshWxLrHSL-8Nugm8kiD8qFwZNw_MLyhyphenhyphenqkpI_gQss9Bvvwi59tDLWQF6D4il67T_4cqoF7QBDNNBL7aKVE04UuBumYJ9-WRNb29HxMq5ZYm-Btkw-sQLFn39OrunLHqNZMKcS/');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/AVvXsEj6lK5D4yN4vhmjo51haSnT65nxXZQwKnwfeyA84fXTmGn5ITJLWTBgvg1YQ_mXb-tdetDFlaR0SUKcEMQklnkMbew9mvr_Sek15IJsjXV3cRb5hRGOlP-4yl9Pdwf63VNLjqmyYh8lLNDC/');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/AVvXsEioLiJowTLYU1HY2o9azz4mU1vOm1_yCs6hyphenhyphen6OkvSBUwE_mHRQbXZ-0Nm2sYI4t3UPFDhBQTzadpGPNuAmvcimkqYEKcUVyrNNxtA7u9TednSXuk-NNA8-h-c_ghDZNr8i02vdkxZoVEc9p/');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/AVvXsEjNB4TTCt1ByEzPDkGAAmRWe2Sue9Ki4FeR3a4DEnNj5o66FjltNtL3aMusaMKQz9ysPxqcS5ATMDcDzopuBY9t2T7Qvj1akZAR3KLlsTjvPR_1iWh5-WYrqh2ZvPmHGP1Owfc8LWVYCh9E/');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/AVvXsEjB74E8G8v3kp6xPJ62rHd4CQOPSE6u2mk3pKdyzb3YFrYkpsrY_LaGx1SPhSGnvynPgMKbF3N0BKbJs7lEpqaOpMIbpkx7K8z2hoMC4CaQ9qmBWxGqwcP44gXgUpn5uJrLY5MY9cZxxTpt/');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>