Cara membuat floating follower blogger, twitter, facebook di blogger

Sekarang saya akan menjelaskan sebuah trik blogger yang cukup menarik dan sangat berguna, trik ini adalah membuat floating follower blogger, twitter, facebook. Dahulu saya juga sudah pernah menjelaskan tentang floating buku tamu, sekarang kita akan membuat yang sama dengan floating, tapi kali ini dengan blogger, twitter, dan facebook. Kita bisa membuat follower blogger, 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 follower blogger, 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://1.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/blogger.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('http://2.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/blogger.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('http://1.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png');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('http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/facebook.png');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 Blogger 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 Blogger tempatnya disini
● Mencari tempat kode HTML Twitter tempatnya disini
Mencari tempat kode HTML Twitter tempatnya disini
● Hasil akhirnya akan seperti di bawah ini


1 Coment :