Cara Membuat Widget Like Box Facebook Melayang Di Blog

Fanspage Facebook di blog biasanya digunakan oleh pemilik blog untuk menambah Like pada Fanspagenya. Dan pada kesempatan kali ini yang akan saya bagikan adalah Like Box yang melayang di tengah-tengah blog, like box yang ini juga disertai dengan tombol "Close" jadi tidak memaksa pengunjung untuk meng-like Fanspage kita (visitor-friendly). Dan tentunya sebelum memasang widget anda sudah pasti harus memiliki Fanspage di facebook.

Like Box Facebook Melayang Di Blog

Berikut ini tutorial Cara Membuat Widget Like Box Facebook Melayang pada Blog :

• Login Akun Blogger seperti Biasa
• Pada Dashboard sebelah kiri Klick Menu "Layout / Tata Letak"
• Tambahkan Gadget dan Pilih "HTML/JavaScript"
• Kemudian Copy dan Paste kode dibawah ini.

1. <!-- Script by: http://www.online-plus.net/ -->
   <style type='text/css'>
   /* Message Box */
   #box-message {
   position:fixed !important;
   position:absolute;
   top:-1000px;
   left:50%;
   margin:0px 0px 0px -182px;
   width:300px;
   height:auto;
   padding:16px;
   background:#fff;
   font:normal Dosis, Georgia, Serif;
   color:#111;
   border:2px solid #333;
   -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;
   }
   #box-message a.close {
   position:absolute;
   top:-10px;
   right:-10px;
   background:#fff;
   font:bold 16px Arial, Sans-Serif;
   text-decoration:none;
   line-height:22px;
   width:22px;
   text-align:center;
   color:#111;
   border:2px solid #333;
   -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:22px;
   -moz-border-radius:22px;
   border-radius:22px;
   cursor:pointer;
   }
   #twitterx {
   background: #EEF9FD;
   padding: 10px;
   text-align:center;
   border: 1px solid #C7DBE2;
   border-top: 0;
   }
   </style>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type='text/javascript'>
   $(window).bind("load", function() {
   // Animate Top Value When Page Loaded Completed
   $('#box-message').animate({top:"50px"}, 1000);
   // Remove Mailbox When Close Button On Click
   $('a.close').click(function() {
   $(this).parent().fadeOut();
   return false;
   });
   });
   </script>
   <div id='box-message'>
   <!-- HTML Start -->
   <center>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Info.Onliner?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
   </center>
   <!-- HTML End -->
   <a class='close' href='#'>&times;</a>
   <p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.online-plus.net">Facebook</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.online-plus.net/2015/10/cara-membuat-widget-like-box-facebook-melayang-di-blog.html">+ Get This Widget</a></p>
   </div>
   <!-- Script by: http://www.online-plus.net -->

• Ganti yang berwarna Merah dengan URL Fanspage Facebook anda.
• Kemudian Klik "Simpan"

Demikianlah tutorial singkat mengenai Cara Membuat Widget Like Facebook Melayang pada Blog. Jika ada pertanyaan silahkan tinggalkan komentar anda dibawah artikal ini.