Menyediakan free blogger templates.

Cari Artikel

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/AVvXsEgoOwXK-SzwtBMwSuc3VwQshugthQFDMTDJMAFz9pyx_BoIrstqSS4-I4wcOGNpYaUyedN05IIeVcl_n8Brs8gzp7sTaxIN_rpmQS-Wetvi9QsfFcZA-htcoySZtX7EhkjXXn3h2HWmaoE/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://maz-template.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 merah 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

7 komentar:

  1. mohon maaf yang sebesar2nya.. link telah terpasang pada blogroll di halaman home.. :)

    BalasHapus
  2. awa mantap tha praktekin ah,...

    hatur nuhun infonya ya...!!!

    BalasHapus
  3. Met berakhir pekan mas...

    BalasHapus
  4. tutornya bermanfaat...

    Kunjungi blog saya juga yah http://blogzeng.blogspot.com/

    BalasHapus

Related Posts Plugin for WordPress, Blogger...