Widget 3 In 1 untuk Twitter,Blogger Dan Facebook Disembunyikan

Cara Membuat Widget 3 In 1 untuk Twitter,Blogger Dan Facebook Disembunyikan adalah untuk memperhemat ruang dari tampilan blog.disini dengan menampilkan 3 Sekaligus widget namun disisipkan di sisi kanan daripada halaman blog Anda.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1.Masuk Ke Akun blogger

2.Klik Rancangan

3.Klik Tambah Gadget

4.Klik HTML/JavaScript 

5.Masukan kode dibawah ini :

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPJndoYpbH24vlfiRyLY_lPv0VgATepXF1aam57qVnjshjgj_aCR-7acAc83HDNNIsJnVr0N4oM4Kp2vqcNmFZ2WE3VR7zY8D9Ob0O02ycximfzEHOWTU1i_lJCU0Eetz06267vCaDYJO/');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/AVvXsEinZiYJJvwD2RUNml3mQAZU18DVxuGnkKYZRS0hy0wNJDDg6v2lZbg7I-fmd4DhMmmGExd5x_sIu6utaetAmb-_BNes58jTthnkLVa8idH7HhEeZQhMIbIHOBFUkr4CneKPUm7wQR4HbRW2/');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/AVvXsEgrrZpSPfL8AqDtrt-UqFmstejmIJVoGGTiG-CrVXUc1onD9MU7dJa6YhiYfTqDUYDmTU9ZnMPNynNimFEs7V8RSl9lbLFQZSIIFeAXy3HhU8xs59Fv8Vq8A6Gde0nGqWklNrOe9wHPyqt_/');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/AVvXsEgoz5mHax7Vb5mygfcW-GbxL93SyIRVEK-3JRDgrqHZiYgKzvHNzgAYRq0wUx8TWyW7fYcYFUotEeMwpkF8DYywH2TJRbO9klOF9tDkoAf_wk9e1ls0qR5bPrHN_0FD1NQqfaFFFUZHgAyg/');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/AVvXsEixoQ6RtWFp_PtgCkDk7qTKXhe3R-UehRCy11qnDnpvkEYjWC-zqjDRiApV5Hu0wB0-LVc2CSZe4S21UVFMQeQ_sQeDEgf3DCAbRTH3JMonb-5L-wrzz39WhHe8wqvcZbjt5OGEKBdLRnBm/');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/AVvXsEjut5hJsIPPHzWxmk9FnWIy6zCes8eJCYymzpESnI7Qb-7Xi3qTRrqbLHJ9wwGCsoTCWu_mBYt8K61hJcyxl0gr6_BcHKgffnEBBsz6duxiV4Sx69bCNcv15DuAcbYKJWXo-wlQqNFX4zYm/');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">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

6.       Keterangan widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

 Demo
Sumber :   http://kertas-kecilkita.blogspot.com