Membuat Like Box Melayang Dengan Tombol Close

Setelah mencari cari.. akhirnya dapet juga yang cocok nih widget Like Box FB nya. Sebelumnya banyak coba coba pake Like Box model macem macem, tapi kurang suka... Nah berikut contoh Like Box punya saya. Aku dapet dari mbah Google n mampir di salah satu blog raxterbloom . Sebelumnya sempat rusak juga kode Like Boxku. Gara gara nambahin itu Twitter yang ada diatas Like Box. hehehe.... Dari pada ilang ilang lagi mendingan aku posting aja nih kodenya. Barangkali eror lagi kan tinggal copy lagi. Wkkwkkwkwk.... Yang mau pasang seperti punya ane juga boleh.

Sebelumnya jangan lupa siapin kode Like Box FBnya ya :D, kalo mau kasih Tombol Follow Twitter juga jangan lupa siapin itu kodenya.

1. Login Blogger >> Layout

2. Add a gadget trus pilih HTML/Javascript

3. Jangan kasih judul ya biar ngga muncul tulisan aneh di pagenya.hehehhe :)

4. Paste kode di bawah ini ke HTML/Javascript tadi 

 <!-- FB melayang tombol close --!> <style type='text/css'> #kotak-facebook { position:fixed !important; position:absolute; /* IE6 */ bottom:-1000px; right:10%; margin:0px 0px 0px -182px; width:auto; height:auto; padding:16px; -webkit-box-shadow: 0px 0px 7px #222; -moz-box-shadow: 0px 0px 7px #222; box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px;} #kotak-facebook a.close { position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; cursor:pointer; } </style> <script src='http://raxterblog.googlecode.com/files/tombolclosemenu.js'/></script> <div id='kotak-facebook'> Klik Like Ya! Thanks ^_^ <br/> <a href="https://twitter.com/USERNAME TWITTERMU" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @USERNAME TWITTERMU</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <br/> <!-- Mulai --!> MASUKKAN KODE WIDGET FACEBOOK DISINI ! <!-- Selesai--!> <a class='close' href='#'>×</a></div> <!-- FB melayang tombol close --!>

5. Simpan dan lihat hasilnya :)

Ket :
1. background-color:#FFFFFF (ganti kodenya dengan warna background yang anda sukai)
2. Ganti USERNAME TWITTER dengan nick Twitter anda