Cara Membuat FB Like Box Melayang Dengan Tombol Close

Bookmark and Share
Farhan Share - Buat sobat sekalian yang ingin memasang fb like box menggunakan plugin facebook farhan punya tips dan cara memasangnya agar terlihat lebih cantik dan elegan. Sebenarnya menurut farhan sendiri cara ini sangat sederhana tapi cara ini dianggap ampuh dan jitu bagi para peblogger untuk meningkatkan fans atau idola di facebook terhadap fan page blog kita, yakni dengan cara memasang fb like box melayang, dengan cara ini pastinya secara otomatis semua visitor atau pengunjung yang berkunjung ke blog kita melihat FB like box ini terlebih dahulu, dikarnakan munculnya pada halaman awal saat kita membuka blog kita.




Dengan cara memasang script facebook float seperti ini juga banyak keunggulanya lho sobat, yaitu menghemat space elemen di blog kita, jadi space yang harusnya di isi dengan FB Like Box tadi, bisa kita pergunakan untuk kebutuhan yang lebih penting lainya seperti Iklan, dll. Ternyata setelah farhan pelajari dan menerapkanya di blog farhan caraya mudah kok dan juga ukuran besar script floatnya bisa disesuaikan dengan besar like Boxnya, jadi jika ingin menambahkan seperti Twitter Like Button tinggal menambah height dan widthnya saja, mudah kan sobat farhan. 

Baik sobat farhan kita langsung saja ke inti pembicaraan kita pada hari ini, ini dia langkah-langkah membuat FB Like  Box melayang, di simak baik-baik ya.

1. Login Ke Blogger.

2. Pilih Template.

3. Pilih Download template Full untuk berjaga-jaga.

4. Pilih Edit HTML.

5. Centang box "Expand Template Widget".

6. Lalu sobat cari kode </body> menggunakan F3 atau CTRL+F, jika sudah ketemu lalu sobat letakkan kode di bawah ini persis di bawah kode </body>.

<style type='text/css'> .notification{width:350px;height:260px;display:block;position:fixed;bottom:100px;left:490px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf} .notification span{background:url(https://lh5.googleusercontent.com/_U0QaeycS3vw/Taqu74WricI/AAAAAAAAAkE/eEcZwcRj0ko/close.png) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px} .notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9} .warning{border-top:1px solid #fefbcd;border-bottom:1px solid #C5D5E6;/*Background Gradients*/background:#C5D5E6;background:-moz-linear-gradient(top,#fff,#C5D5E6);background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#C5D5E6))} .warning:before{content:url(http://2.bp.blogspot.com/_U0QaeycS3vw/TTXudYbX_ZI/AAAAAAAAAE0/b5kV-RL7vwg/haha.gif);float:left;margin:5px 0px 0 5px}.warning strong{color:#e5ac00;margin-right:15px} </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script> <div class='notification warning'><span/> <center> 
Kode Like Box Fan Page Facebook Kamu
</center></div>

Catatan : Kode yang berwarna hijau bisa disesuaikan dengan ukuran Like Box yang sobat miliki.
Catatan : Kode yang berwarna biru bisa diganti dengan kode script FB Like Box kamu.

7. Klik "Save" dan Selesai.

Selamat mencoba sobat farhan, bila ada pertanyaan comment di bawah.

{ 0 komentar... Views All / Send Comment! }

Poskan Komentar