Membuat Floating Like Box Facebook diblog

Floating like facebook
Bagi sobat blogger yang ingin membuat like box facebook, berikut ini adalah salah satu cara  untuk membuat floating atau tampilan mengambang like box atau kotak like facebook di blog, sebenarnya banyak bentuk tampilan yang bisa digunakan. tapi kali ini saya mencoba membuat tampilan like box yang mengambang dengan menggunakan script Jquery Plugin. Ini adalah code yang saya peroleh dari hasil browsing, siapa tau sobat blogger berminat untuk membuatnya.

Untuk membuat likebox facebook mengambang silahkan sobat mengikuti langkah-langkah berikut :
  • Langkah Pertama : login ke blog sobat ---> Pilih Tata Letak ---> Klik Tambah Gadget ---> Pilih HTML/JavaScript Lalu masukkan kode berikut :
    <script type="text/javascript"> //<!-- $(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .floatinglikebox{background: url("http://1.bp.blogspot.com/-y3AU60vNlSw/T8EmQ4r6b4I/AAAAAAAAA5c/zsDayDbTvWQ/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 100px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;} .floatinglikebox div{border:none;position:relative;display:block;} .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .floatinglikebox span a{color: #808080;text-decoration:none;} .floatinglikebox span a:hover{text-decoration:underline;} </style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKusnaBlog%2F213945412026752&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://kusna.blogspot.com/2012/05/membuat-floating-like-box-facebook.html" target="_blank">+Get This!</a></span></div></div>
  • Catatan: Ganti code yang berwarna merah dengan Url Halaman facebook sobat. Untuk kode yang berwarna biru adalah untuk letak tampilannya. Perhatikan : Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.  : dengan %3A / dengan %2F Contoh :
    https://www.facebook.com/pages/Kusna-Blog/213945412026752
    ganti dengan :
    https%3A%2F%2Fwww.facebook.com%2Fpages%2FKusnaBlog%2F213945412026752
  • Simpan Gadget Anda
  • Langkah 2 : Pilih Template ---> Klik Edit HTML Lalu Tambahkan code berikut di atas code : </head> catatan: Jika template anda sudah memiliki code ini tidak perlu dimasukkan lagi
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
Selanjutnya
« Sebelumnya
Sebelumnya
Selanjutnya »