Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog - Setelah kemarin saya membahas tentang Cara Memasang Widget Buku Tamu dari ShoutCamp, Dan sekarang saya akan membahas tentang widget blog yaitu Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog . Widget ini merupakan widget yang sangat menarik karena widget ini bisa melayang sekaligus 3 lo ... lihat gambar di bawah ini .
Nah Bagi sobat yang ingin mempunyai widget tersebut, sobat tinggal langkah - langkah Berikut ini:
1. Login ke Blogger sobat .
2. Pilih Rancangan > Tata Letak > Tambah Gadget
3. HTML/JavaScript
4. Letakkan kode berikut didalamnya.
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mRdPdUQr8oJMLVrnFLwcXSTZ4pXtNzUtNhyzh2z_TrmZiPVx1re3GvXEnr0NYq5Rw9QSeMpIKRzK0syIozOGChbJF1puybmnQd7uq3y3SESMbfUqGLh0wCDtTU32ncroqWEO_byTCaob/');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/AVvXsEhY9b9YJ4hxBSUpeCLw58EM70otFfuirM0FOV9mmZnTuwaTxfkVDtMA7yjL7riRQPk405HbxrqAF-5XUL6Tlkl_sGsnZUpjxt2P-UNF6IuP7sFWV9wliUabKJv3JcGtROzjL1j1JZmRJJo0/');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/AVvXsEiTOxguCl4zJA4j45DTeyU4sH3AK9LuXRIRmW0EjfTug-W4uFUjvQkK2nbSyA50nyncR52B6gLU5XnQQRkVy0cHcUWtGcx744aA6i-WHeKhYhcq5rGRnt8hCjQwUuElo8II7WNcPx1OZLIM/');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/AVvXsEjaZaPBu7sgY-Av2Ry-N8F9f9bf214M8XClOTyyHJCcke4TmaBZUhbh_9_LNbWCn7uMSfWQX1dgXIlutaBMAVLsKIGJ8En5x8x0ghyphenhyphene-5pSwns177noJTFOKB-PuhvgmBiSqh2wFYhy3pd4/');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/AVvXsEgmFmx7fNuJ9gshaqfyf5bpVyA4hyphenhyphenEONic5pq0jNeMIAeZFdsFsLUYPjf9JMdZKxspulHi4EuB1SroP5F43uR4LlM-vV2N6jcilHuxAWIsnhtVK9aK7FB0x3_ms81atLYcYHBT8sakytAdJ/');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/AVvXsEjV7ZSnq3h5Z4Ln7DYckt624VKd2GTlPD-M5HRSxCLSoS4KBkzzo-SPdHvdnOAhkhxc7rZNPLR0SMvDrhQS2vfpE6NVKqJVMIdxmWSGb5XeTEROSHLgkb7isE3Z1uVIeMbE1Od6FEvGHMx2/');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">
Disini Letakkan Kode Follower Blog
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Disini Letakkan Kode Twitter
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Disini Letakkan Kode Facebook
</div>
</div>
Keterangan : Ganti yang berwarna merah dengan kode Follower, Twitter, dan Facebook Fan page
5. Terakhir klik Simpan
Untuk Demo nya KLIK DISINI