Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang

Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog - Setelah kemarin saya membahas tentang Cara Memasang Widget Buku Tamu dari ShoutCamp, Dan sekarang saya akan membahas tentang widget blog yaitu Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog . Widget ini merupakan widget yang sangat menarik karena widget ini bisa melayang sekaligus 3 lo ... lihat gambar di bawah ini .


Nah Bagi agan yang ingin mempunyai widget tersebut, sobat tinggal langkah - langkah Berikut ini:


1. Login ke Blogger atau Web agan .
2. Pilih Rancangan > Tata Letak > Tambah Gadget / tambah kotak konten
3. HTML/JavaScript
4. Letakkan kode berikut didalamnya.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVt7ycvOFLY73JII46caC7lH_y3E-umWzVl2_m8daArNjeRJchKUbpSptN88H2tQkPE_2NF-nXNtjKLoBEwQ8m5f5ZZiPbfy3QZNX_NOmFClF_NcJm4OLeXxZk-8Ea7iLvTWq2jmYDjAMn/');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/AVvXsEjydfRbtxxvipBSaMLEFZAUEk_dy7YJRQ-PKgvLg09yZOH6xbZXZZx6arCFEN0nvA92qoZ-GmgpD3r9zdiYfwjgDUN-LGquhIKJOAPUFEwoy4dMXZKCrJWTHfuuCCCGZn6Zy8xYpMs4tCeG/');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/AVvXsEgkq4oP3oME7tvHzyti-TgP8mDhNrGBevXL9EaPy6y5ymR3pS4W4MIxqAjWe7jJxoKNm_vWij8Q4Or4L6UJC5CwrdCl2q-vYHBil2-TQ_y4MmaCM0v3ur-rz_DaADSNZUSpl0Tl-K_6d_Qg/');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/AVvXsEhSJ8YGUS_MJOM_snQkO2ObjEoushhJF_FpRGo3Ffkngem0LXbS8EzNqPkLICYombsQaraFs13elRD9dSqLBn4st2wHqqC-MPFkfYxYYIXAx4sCq6b01u_7E0y0efXUSPLRecYal1f0ubcZ/');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/AVvXsEgurf6i3LO5Ir2__f6qe0VXTF6AajDY5FK1zFLhBpHoYzzcw5VFjDpQq7ahwRR5DjslPAFPcMdIoN9dB5UIIwfgEWMzNHaT3VG1X-ZRMg_zsjjeEKtbNC90r8Y7x4ghcLEOGrMRWpiS96Be/');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/AVvXsEiQg0aed9laLlSQTbeBvXAHDqlHNuMoFdFCHjDcg1eb2qty2xatwnG98BcmCwyMX1Egr0Kvwg1nHxcVQ-yLIK2GCFXPZsUl698BvbXm27kTTEVS3nKwiRvmRumMfwg8YRiXAnE4dzpHoexS/');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">
Disini Letakkan Kode Follower Blog
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Disini Letakkan Kode Twitter
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Disini Letakkan Kode Facebook
</div>
</div>

Keterangan : Ganti yang berwarna Merah dengan kode Follower, Twitter, dan Facebook Fan page.,