Sabtu, 24 Agustus 2013

Membuat kotak like facebook Terbang di Blog

Facebook adalah salah satu pioneer (pelopor) jejaring sosial. Mempromosikan blog anda di Facebook sangat diperlukan dan dibutuhkan.Widget ini jauh lebih baik dan efisien untuk mempromosikan blog. Widget jejaring sosial yang satu ini terusan (terbaru) dari widget-widget facebook sebelumnya. Oleh karena itu saya sebut kotak facebook like melayang versi modern ( Modern Floating Facebook Like Box)
Cara menambahkan widget ini cukup mudah, berikut langkah-langkahnya:
  • Login  ke akun blogger Anda
  • Klik Tata Letak-> Tambahkan Gadget-> HTML/Javascript
  • Copy pastekan kode dibawah ini di dalamnya : 
<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/AVvXsEi_5UDGqfQnzMrZWXpMYcnWbmSBZ4QFxP52csdk2F77XIUGJ6-TBK__wHM7qCrPiYUEJnbpc2p5TCwxXbsA2YWY7yOl0DY0wvw5KJ-3GpmLU5JSPDC_85l3YbVv1xFTE_1TlQw9vbV1DM4/s1600/facebook+floating+box.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%2f21selection&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.jalu-pangna.blogspot.com/"> Wawasan spiritual dan blogging</a></span>
     </div>
 </div>
  • Rubah 21selection dengan Id Facebook Fans Page anda
  • Simpan Template dan lihat hasilnya...


Posting Komentar