Menambahkan widget Facebook Melayang di Blog

11:56 PM 5 Comments



Bismillahirrahmanirrahiim...
     Widget Facebook "like" yang melayang seperti di blog saya ini anda dapat dipergunakan untuk mempercantik blog anda. Tampilannya yang tersembunyi dapat menghemat ruang pada blog, selain itu juga dapat membuat blog anda semakin terlihat beda / gaya.
           Sekarang bagaimana langkah-langkah untuk membuat widget Facebook yang melayang ini ? oke, cekidottt...
1. Masuk ke Blogger dan login dengan akun anda.
2. Buka Rancangan >>Edit HTML
3. Tekan Ctrl+F untuk mencari kode ]]></b:skin> :
4. Letakkan Script berikut di bawah kode ]]></b:skin> :

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
5. Simpan Template
6. Kemudian kembali ke Rancangan >> Tambah Gadget >> HTML / Javascript
7. Masukkan Kode Berikut ini :

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.likebox{background: url("http://1.bp.blogspot.com/-9eRHiE20E4c/TynfIJyt7qI/AAAAAAAACBE/15Q3VtI-PwY/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}
.likebox div{border:none;position:relative;display:block;}
.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.likebox span a{color: gray;text-decoration:none;}
.likebox span a:hover{text-decoration:underline;}
</style>
<div class="likebox" style="">
    <div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blog-mrlutvie/243065805786404?ref=ts&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><b><a target="_blank" href=" http://blogmrlutvie.blogspot.com/2012/04/menambahkan-widget-facebook-melayang-di.html ">Get this widget</a></b></span>
    </div>
</div>


8. Tulisan yang berwarna merah ganti dengan Alamat Facebook Anda.
9. Simpan Template Anda. 


Oke, Sekarang anda dapat melihat tampilan Facebook melayang yang berada di sebelah kanan halaman Blog anda.
Bagaimana, tertarik untuk mencobanya???
Let's keep rock'in


Wassalam...

Seorang Online Entrepreneur. Suka travelling, Online Marketing juga Networking.

5 comments:

  1. Bismillahirrahmanirrahiim...

    Namanya "melayang"?

    ReplyDelete
  2. ya sob, kalau mau dikatakan mengambang juga bisa cos posisinya yang tersembunyi, hehehe

    ReplyDelete
  3. bagus bagus,,,, hehehehehe ^_^ salam kenal gan...

    ReplyDelete
  4. @Stchen Slem : okeee
    @Deary pujita : salam kenal juga :)

    ReplyDelete