Cara membuat kotak like facebook melayang versi modern di blog

Diposting oleh Wisma Saputra | Selasa, 11 Juni 2013 | |
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:
  • Masuk ke akun blogger
  • Klik Tata Letak-> Tambahkan Gadget-> HTML/Javascript
  • Pastekan kode berikut 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("http://1.bp.blogspot.com/-LT7tKG6dbGY/URCN1vOtwEI/AAAAAAAAHbE/hCo93X6OM2E/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%2Fjalu-pangna&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>


  • Ganti jalu-pangna dengan ID Facebook Fans Page anda
  • Simpan Template dan lihat hasilnya...

0 komentar:

Posting Komentar

Rss: Top