Caea Membuat Widget 3 in 1 Melayang Disamping Blog

Salam persahabatan buat sobat pecinta blog,kita bertemu lagi dengan artikel ini,kali ini saya akan berbagi tentang bagaimana Caea Membuat Widget 3 in 1 Melayang Disamping Blog seperti yang sudah saya share beberapa waktu yang lalu tapi kali ini tampilannya sedikit berbeda karena widget yang ini muncul disaping blog dengan tiga widget. widget ini adalah salah satu widget unik yang paling saya sukai karena terlihat cantik pada blog dan menarik pengunjung untuk melike facebook fanpage dan twitter sobat, dan juga ini merupakan salah satu trik untuk menggaet pengunjung blog dengan tidak menyiayiakan pengunjung pertama untuk melike facebook likebox sobat, seperti yang saya sudah jelaskan pada postingan saya sebelumnnya widget ini berguna untuk menampung para facebook liker pengunjung dan memberikan pemberitahuan artikel.
untuk lebih jelasnya lihat gambar dan cara pemasangannya dibawah ini;




Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda
5. Klik simpan



<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}
.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}
.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}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
Simpan kode friend connect atau kode CBox anda di sini
<div style="text-align: right;">
<a href="http://yukamraya.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Yukam Raya Blog ]</span></a></div>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Simpan kode Fan Page Facebook anda disini
<div style="text-align: right;">
<a href="http://yukamraya.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Yukam Raya Blog ]</span></a></div>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Simpan kode twitter anda disini
<div style="text-align: right;">
<a href="http://yukamraya.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Yukam Raya Blog ]</span></a></div>
</div>
</div>


Keterangan : Ganti tulisan yang berwarna merah sesuai dengan keinginan sobat.
setelah selesai silahkan lihat hasilnya.........
semoga bermanfaat sekian dan terimakasih

1 ulasan:

  1. bagus tutorialnya....
    http://www.masrud.web.id/

    BalasPadam