Cara Membuat Widget Like Box Facebook Floating di Blog

Cara Membuat Widget Like Box Facebook Floating di Blog

Motivation - Kali ini, saya akan membagikan Tutorial "Cara Membuat Widget Like Box Facebook Floating di Blog". Cara Membuat Widget Like Box Facebook Floating di Blog yang akan saya ajarkan kali ini, tentunya tidak asing lagi di mata anda. Mungkin anda pernah menemukan salah satu blog yang menggunakan widget ini. Nah untuk itulah, pada kesempatan ini, widget like box facebook melayang juga sudah dapat anda gunakan di blog anda.

Nah, apasih fungsi dari widget like box facebook melayang ini di pasang di blog? tentunya untuk memudahkan pengunjung atau visitor untuk "like" Fanspage Blog anda tanpa perlu lagi membuka halamannya. selain itu anda juga perlu tahu pentingnya fanspage untuk mengsosialisasikan blog di media sosial.

Cara Pemasangan

1. Login ke Blogger >> Dashboard >> Tata Letak >> Add Gadget >> HTML/JavaScript
2. Masukkan kode script di bawah ini.
   

   <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/bmotivateblog?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://facebook.com/">Facebook</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://utility-share.blogspot.com/2014/07/cara-membuat-widget-like-box-facebook.html">Get This Widget</a></p>
   </div>

3. Save

Ket :

• Silahkan Ganti Kode Berwarna Biru, dengan Url Fanspage Facebook kalian

Hasilnya akan nampak seperti dibawah ini:

Nah, Sekarang anda bisa menikmati, Widget Like Box Facebook Floating di Blog anda sendiri. Terima kasih semoga bermanfaat.

A Blog Give Motivation