FACEBOOK LIKE BOX MENGAMBANG DI BLOGGER

 Banyak sekali tutorial tentang bagaimana memvariasikan peletakan Facebook Like Box di blog terutama blogger. Sekarang saya mencoba kembali mengkreasikan peletakan Facebook Like Box dengan cara mengambang yakni menempel pada bagian kanan monitor dan kalau disorot dengan mouse maka akan muncul tapi apabila tidak disorot maka hanya akan terlihat logo Facebooknya saja.

Contohnya sebelum disorot mouse :

Setelah disorot mouse maka akan muncul seperti ini :

Langsung saja ikuti langkah dibawah ini :

1. Masuk ke Blogger
2. Template ---> Edit HTML
3. Cari kode </head> lalu letakkan kode dibawah ini tepat diatas kode </head> tadi



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>



4. Simpan template anda

Selanjutnya lakukan langkah berikut :

1. Masuk ke Layout --> Add a Gadged --> HTML/JavaScript
2. Masukkan kode dibawah ini kedalam gadged tersebut

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAzh8DZ_l1KHVLY-6l7ie_81_KY66gKlrSWfgdn5Ss_Qbkdps7pLdfvZ9gG_Dtec6Pj6QcQ8ITPvfhj5SrFYZ985u3okDl67LypEJQtECBX7qouNZVyVb5tBvr7G3lmn07CRRGEPydV0/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCATATAN-HARIANKU%2F202832269775676&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://suriyadi.blogspot.com" target="_blank">+Get This!</a></span></div></div>



3. Perhatikan http%3A%2F%2Fwww.facebook.com%2Fpages%2FCATATAN-HARIANKU%2F202832269775676 itu diganti dengan alamat halaman Fans Box kepunyaan anda dengan catatan bahwa untuk tanda (:) diganti dengan (%3A) dan untuk tanda (/) diganti dengan (%2F)
4. Setelah selesai simpan gadged anda.

Contoh penulisan kode halaman Facebook Fans

Sebelum :

http://facebook.com/pages/CATATAN-HARIANKU/202832269775676

Sesudah :

http%3A%2F%2Ffacebook.com%2Fpages%2FCATATAN-HARIANKU%2F202832269775676

Copyright by SURIYADI