Pasang Widget Fans Page Facebook Melayang

Cara Membuat dan Pasang Widget Fans Page Facebook Melayang

Tentu Anda sudah mempunyai fans page Facebook - halaman  khusus Faceebook yang dibuat bagi penggemar atau fans sebuah blog atau website. Untuk membuat dan pasang widget fans page facebook di blog, sebelumnya Anda harus sudah mempunyai halaman page fans di Akun Facebook atau membuatnya dahulu di akun facebook Anda dan catat alamat url fans page facebook tersebut.

Ada banyak cara memasang widget sosial media ini di blog, ada yang statis (diam), melayang (float), hiding (tersembunyi) atau yang lainnya. Secra default bila Anda membuat widget fans page Facebook di blog akan terpasang secara statis baik itu berada di sidebar atau footer.

Tutorial Blogger proBlogiz kali ini akan sharing tip dan trik desain blog Cara Pasang Widget Fans Page Facebook Melayang atau Floating Keuntungan Widget melayang (float) akan memberi tampilan blog menjadi lebih profesional dan menghemat ruang halaman page pastinya.

Pada kali ini adalah widget float right (melayang di sebelah kanan)- cukup mudah, Anda cukup ikuti panduan  tip dan trik berikut ini.

Langkah Pertama

Tambahkan kode script jquery dibawah ini tepat diatas </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/>

• caranya masuk ke dasbor Blogger >>> Edit Template >>> edit HTML
• tekan F3 untuk pencarian >>> cari kode </head>
• letakkan kode script jquery tepat diatas </head>
• Save Template

Langkah Kedua

Buka halaman Tata Letak
Klik tambah gadget >>> pilih tambah HTML/Javascript
copy dan pastekan kode script dibawah ini :
<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css" scoped > .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVqiG0KkPwjhu1D5qQHnVL4Rbbs5fVFtcpMpoiLlIW5pIgvpPtLeMEYKHu2mbZx0Xwa80qiZI2A0IHxf8S8L6MNb7Fw7vOGBp2iCb2IBW53MxF-9zUj5elWG4hK4jJy5kMLPhvGOZ-LE/s1600/fb1.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style> <div class="w2bslikebox"> <div> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FProBlogiz%2F146818852122783&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" style="border:none;overflow:hidden; width:250px; height:258px;" ></iframe><span><a href="http://problogiz.blogspot.com/2012/09/pasang-widget-fans-page-facebook.html"><b>Get Widget</b></a></span> </div> </div>

*Update 16 Januari 2013 : gantilah kode yang berwarna biru diatas dengan kode iFrame Facebook Fans Page Anda.

Cara mendapatkan kode iFrame Facebook Fans Page :
1. Buka http://developers.facebook.com/docs/plugins/
2. Pilih Like Box.
3. Masukan url facebook page .
4. Atur width="250" height="258"
5. Jangan di check Show Stream dan Show Header.
6. Klik pada Get code.
7. Ada pilihan berikut: HTML5,XFBML,IFRAME and URL.
8. Pilih IFRAME.
9. Copy kode dan ganti kode yang berwarna biru dengan kode iFrame Anda tersebut.

Contoh url fans page facebook blog ini : http://www.facebook.com/pages/ProBlogiz/146818852122783 

Sedangkan untuk gambar logo facebooknya seperti "https://sites.google.com/site/problogiz/home/fb6.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri atau kalau berminat saya berikan contoh  logo facebook yang bisa Anda gunakan :

Klik DEMO

logo fb 1	logo fb 2	logo fb 3

logo fb 4	logo fb 5	logo fb 6 (transparant)

Alamat url untuk cotoh gambar logo facebook diatas :

• url logo fb 1 = https://sites.google.com/site/problogiz/home/fb.png
• url logo fb 2 = https://sites.google.com/site/problogiz/home/facebook.png
• url logo fb 3 = https://sites.google.com/site/problogiz/home/fb3.png
• url logo fb 4 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwa9UHv99IhgUFmNN1ctpfbaOjJOVs20mydJu5nZzMB1klxXNLUQs0EGVlyWcRPiFMptiXRUskaMgZTryoKvyOk8SHt7igHDtQ7JobE7haVK1KvIf5EncXmMqgnmGUBomuPsrRYtOVBrH/s1600/facebook-icon.png

*tip : usahakan upload sendiri gambarnya, untuk lebih aman

Anda bisa pilih salah satu contoh logo diatas dan letakkan pada kode script diatas kecuali Anda ingin memakai koleksi  logo facebook sendiri.

Setelah langkah diatas selesai maka simpan dan Anda bisa melihat  Widget Fans Page Facebook Melayang kreasi Anda sendiri...

Bagaiman tertarik untuk membuatnya di blog Anda?

Semoga tip dan trik Pasang Widget Fans Page Facebook Melayang ini bisa membantu dan bermanfaat bagi sobat....

Have nice day....

Catatan :

Jika Anda mengalami masalah pada Widget Fans Page Facebook, umumnya seperti message "Login to see this content" saat Anda log out, solusi untuk mengatasinya >>>

• Mengatasi Masalah "Login to see this content" Facebook Like widget