Tips Cara Letak Facebook Like Box Widget Terapung Di Blog

Contoh Facebook Like Box Widget

Assalamualaikum dan Salm Sejahtera.

Admin hari ini nak berkongsi dengan anda semua untuk membuatkan Facebook Like Box Widget dalam keadan terapung di dalam blog.Ini bertujuan untuk meningkatkan lagi jumlah kilk "like" bagi blog anda.Untuk itu, anda kena terlebih dahulu anda daftar dan mendapatkan kod Facebook lLke Box terlebih dahulu. Bagaimana cara untuk memasang Widget Facebook Like dalam keadaan melayang pada blog anda.




Cara Membuat Widget Melayang Facebook Like Box
 
1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select the HTML/Javascript .
4. Paste the following code inside it,


<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhqgmkoxe1BINYThOrM8mjWQczuYqjXYsBDf7gzmQno25qFasMOXzV86NJsBWLjji6RBRZ4gZYN6o1a1WRuGP1zYpp5R4f7oSfCj0VARkEB0LJ26L10BQkNaZ7xWP1eIWoWSB-/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.AllBloggingTips.com"> All Blogging Tips</a></span>
     </div>
 </div>




5. Klik pada Save button dan siap !

Not kaki:-

Gantikan allbloggingtips dengan Facebook URL anda sendiri.