Membuat Floating Buku tamu, Twitter, Facebook

Sekarang saya akan menjelaskan sebuah trik blogger yang cukup menarik dan sangat berguna, trik ini adalah membuat floating buku tamu, twitter, facebook. , kali ini dengan buku tamu, twitter, dan facebook. Kita bisa membuat buku tamur, follower twitter, dan like facebook dengan floating ini. Cara ini cukup simple dan tidak memakan banyak tempat untuk menaruhnya. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunanya langsung saja kita belajar membuat floating Buku tamur, twitter, facebook di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat floating follower blogger, twitter, facebook di blogger

1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<style type="text/css">
 .barrightblogger{ background:url('http://4.bp.blogspot.com/-R6jU8DqPSyM/T4JViZIyAxI/AAAAAAAAAWY/Of0OP1zzSm0/s1600/bt-741381.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
 .barrightbloggerc{ background:url('http://4.bp.blogspot.com/-R6jU8DqPSyM/T4JViZIyAxI/AAAAAAAAAWY/Of0OP1zzSm0/s1600/bt-741381.png');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/AVvXsEhS29JrwaDHW5dhNUG0Wy5tG5D1hhLERpVi5_-_dtWFF4JRHwlD6qVBRFRAstTW5nnz7WRKnlQ6Zg2q9bM3cfjj6EbVLygg_BuDgJiDLXedYKEpsKWJP-wtj_AYq42LRSqMB6uyY4qIaHaL/');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/AVvXsEhQriiP0Ud8-AdHlW8DPmLt6MFZ5LdirPMkpQBOf8HLFR8z8veFaO39pD_AEYJjSoe2M-UdeJ86I7SmbZz2_oD8tiZf2ifJzMVDzHMCqUtJKUmHNo6VaAczSvkWZnR-Metp-kC87qMq9nLZ/');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/AVvXsEgzWoZvga3Kgnty6E7QBedpihcxYEf00zmcxbJxtn42fTh_eYe0UQdzzdU9P4R0KHBX1P8tg0IsAczGp9xJu2xo-4740FYea_fgJaIMMTHPkAn9-iF081BVfMyKcM25SvW2MYxc_qyeADMC/');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/AVvXsEiIXTUIQZkMTxOrKmIlw1UeB2QEoH89hXB2G4lRbMeI00_JU_dDb43lrj_baEFDtt9-1Q4Epa_yXDtdAgc_MxaLJ7j5UQjIsLAB6hiedBmckKNKU22fxGUtaKXoMjzDfHoxBg0yCdL3tn5M/');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">
 

Kode Buku tamu disini

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
 

Kode Twitter Disini

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
 

Kode Facebook Disini

</div>
</div>

6. Simpan jika sudah selesai

Catatan :

● Ganti tulisan yang berwarna merah dengan kode HTML

● Mencari tempat kode HTML Twitter tempatnya disini

● Mencari tempat kode HTML Facebook tempatnya disini

● Hasil akhirnya akan seperti di bawah ini