Membuat Likebox Facebook Tersembunyi dan Menarik Pengunjung

Para blogger sering menggunakan facebook
sebagai media promosi blognya. Sebagian dari mereka menggunakan plugin
likebox facebook. Kali ini saya akan memberikan sedikit info, agar kita
para blogger dapat membuat plugin likebox yang tersembunyi di blog.
Seperti gambar di samping.

1. Login ke blogger

2.Klik rancangan  » add gadget » HTML/Java Script.
 

 3.Masukkan kode di bawah ini pada kolom yang sudah disediakan.

 

<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/AVvXsEgfhIiY-w36V0i-xWE4HD2f1GN0iffix3gU9Mi0kNM670Iq_c0ejwM3AajIOTl5zBvXn6RCfGPMKb4r36no3atyn3vDrKwJlBhL-wVySlZlr7x1beFdiqzr6zIPbfTlwckRXWsNrRapLbo/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://ichaldae.blogspot.com/&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://maz-template.blogspot.com"

target="_blank">Ingin widget seperti ini?? Klik</a></span></div></div>

*Keterangan :

• Ganti kode yang berwarna kuning dengan url fans page anda.

 4.Pergi ke edit HTML dan letakkan kode dibawah ini di atas kode </head>.

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

Semoga bermanfaat

Share this Article now on :

ARTIKEL YANG BERHUBUNGAN :