Cara membuat widget Facebook,Twitter dan Blogger di blog

Assalamualaikum.Widget melayang atau tutup buka ataupun auto hidden sangat bermanfaat untuk blog.Dapat menghemat  tempat di blog.Sehingga blog kita pun menjadi lebih rapi.Berikut ini cara pembuatannya.

1.Masuk ke akun blog anda

2.Tata Letak

3.Tambahkan gadget

4.Pilih HTML/JavaScript

5.Pastekan kode berikut

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09uBzbMi8pLkH6Whlxzj3FCejmHe0oskQM0UBOXmlwljx5-u8jmMZk-DT19tH8Sphd8xcw6nY32xdTi8LBTD-EdzL2u43Wa4aa5-3AGtPka076myO43Eibj-qQCEEOFz6_k4yoAMmbrXe/');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/AVvXsEi9NcjWVhJbNcLKk2XaFzbUS7UqV-M9vhtuwSAl4M6Uz3_fTfhHg7GCbWs9K0_Fi_M9pOWWnCq5fmjbipwMGb5iayPC5BUqeMdm52tS4fRiU6rv4UyMxjo3y5mLMmySNAyXWPJ28q3JwLQT/');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/AVvXsEiZH3Rg33HRlgK11p87gsj8WW6XQJgETvVehde5nIW4iF1H7uwkKC9iI_IYxdTCCK5bbW1cxCD-x60rYL1Az8cLxBTOZCebW8kgAL84UgjvM5-zoBmm9TcUdzKS9hOfo8sg9nZAI0_2ezsg/');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/AVvXsEgwa1W-knB8jg9fmGVfWrOfbcqszTepRI468fSoyaw1WQD9qvtyeykBakHICMYkggfrdbefRPh8JhMdeKdbYU6gyxD-kVyd84vqepXUOOgrmT0hGQmAeiBDCHjF_Hqm1p9JRXbhD0WQkHjQ/');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/AVvXsEiFLATty5rj2se3fYGB5aPo8JKqKOjcZOgKWB_SS5hmHCZIkGkmwudeANrH1V4XSv6R6WkUlI0F7KwJhr-6EJtk4IMJ46grQz6Ujey9knjZuVn14zjFQzC0upnSYd-XosAvrBcqDF-8S7Hr/');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/AVvXsEjWBtlNzcM53clDbSVUDGeIJMbFNLk0AXr7ku_eDe8oygrDLzLTf3maFRoP4VBhfzW7lvGnkPARKTVZDGQEaLQVf37qYri6bMWdSy6TBBoZKmFhihxWWRucG5YPAo5ybCKCwUIelZejTKsL/');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>

NB:
Ganti yang berwarna hijau dengan konten facebook,twitter dan blogger anda
-Cara membuat widget facebook(cara membuat kode fanspage facebook anda) KLIK DISINI!!
-Cara membuat widget Twitter (cara membuat kode twitter anda) KLIK DISINI!!!

Semoga artikel ini bermanfaat untuk anda.Wassalamualaikum.