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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmeB9bymPN_jTfry-NIMKXPo2LiE7e-_MCIc2IlH6to9GIFM0CxJBo6bgV3pW2k210pvlX-G7FynJDHVRdYu_39S46hEx8f5iqHY73iHXjZ9e5YeYZqfwq3f1xTCiQk9gvkwTwlQzTHTK/');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/AVvXsEj1OKqRF016c-Koa6zRiaGeEHQqdrUSLdgjL5eJd4pmTrwoTWmSUMXpfSWS5RqgnVOFHO6NuOukZDvT_iXa11v_hAcLPNdIYUQt2ikkWn4Ro0unVxt1-MuAsEkBs4vXxlwX4Q2c89aF-qj4/');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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZoELOlB5MPuJSU7bJGk6gh_TgELUb8PvbYWmLxhp-9shbE4jdboJuZNnArvP9FpWETt9mm6Cn7SyGU4Kjc7k0jRVi7nRAIZymm6cw1XiwB3noWhxt9_lGhJtRBispwXmDRKlWubnk2CW/');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/AVvXsEguvx1NXC0zNAhCTNOJrRBBXJYuk-V_AwVya_MTv2-PClixskPaPE2A6OYgaYCucopSmIeU6yrAl_Ph5U_Zq_v4k6jnD1a3B_P8EcOTFJ4frMcfufh5cUsHtK11L7O4d675VPYL2k0wJpNa/');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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRMdih9IEsNHwIIO0j5mi6huJ6o64sTL7FbA-f3441PJCGEe2PXSBT9c4dYn7NnJA4BCN5w1FoEEUvQiQ1IBn-eAUkOKBuahnTfh-f1dQJ7KB3Hq0IzwigYj9lli4AMEtMYxHx3-rkfiQ/');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/AVvXsEgzPQ63twHWDs3CeNQnNkvCAAQFra7lRcDwcGbIXXfGuZnpjoezHykARUm_wJ_2gaerkYjnX51PJ8dygMIkZrvEaOAuxGqwQKuVPO9YIt37S-57VWyfO9i03ak1ySBTnx5dk8IMgvyMuviw/');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

Related Posts:

  • Cara Membuat Tampilan Posting Seperti Koran Kali ini saya akan berbagi gimana Cara Membuat Tampilan Posting Seperti Koran Lihat contohnya seperti gambar diatas Ok sobat langsung saja cara berikut silahkan simak di bawah: <table width=”500″ border=”0″ cellpa… Read More
  • Cara Membuat Gambar bergerak Dibawah Header Blog Cara membuat gambar slide dengan setting html ini mirip dengan gambar Flash yang dibuat dengan software flash...namun disini tak perlu menggunakan software tersebut...hanya sedikit utak-atik html saja sih... untuk pemasang… Read More
  • Cara Memasang Tulisan Copyright Diblog Selamat malam sobat blogger,kali ini saya akan berbagi tentang Memasang Tulisan Copyright diblog sebenarnya cara ini sangat gampang sekali,anda tinggal kopi aja kode scripnya dibawah ini. Tulisan copyright terletak dibagian… Read More
  • Cara daftarkan blog ke Google Search Engine dengan mudah Salah satu upaya untuk meningkatkan pengunjung blog adalah dengan cara daftarkan blog ke google Search Engine. Jika blog sobat sudah sobat daftarkan ke Google Search Engine, maka blog sobat akan mudah di indeks oleh mesin p… Read More
  • Cara Membuat Twitter Box Keren Di Blogspot Twitter box atau juga gadgekotak twitter ini jika sudah terpasang dalam blog sobat maka akan menampilkan tweet serta kicauan sobat secara langsung kedalam halaman blog sobat, selain itu twitter box ini juga akan memberi kel… Read More

1 ulasan:

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

    BalasPadam