Selasa, 03 April 2012

Menambahkan widget Facebook Melayang di Blog

By mrlutvie   Posted at  23.56   tutorial blog 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...

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

5 komentar:

  1. Bismillahirrahmanirrahiim...

    Namanya "melayang"?

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

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

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

    BalasHapus

Back to top ↑
Connect with Us

What they says

© 2013 Blog mrlutvie. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.