saya ucapkan terimakasih kepada saudara-saudara semua karena meluangkan waktu untuk berkunjung,saran dan komentar dari saudara sangat bermanfaat untuk perbaikan blog ini

Thursday, 23 October 2014

membuat like box fb melayang

Trik cara membuat Tombol Like FB tampil melayang pada Blog anda. Tampilan tombol Like FB mungkin bermacam-macam, dan jika anda ingin membuat tombol Like FB yang berbeda tampil melayang pada Blog, caranya sangat mudah. Ini adalah tombol Like Box FB melayang + tombol Close disisi kanan-atas. Sahabat, salah satu cara promosi blog kita adalah dengan cara menambahkan link atau membuat tautan ke berbagai sosial media, seperti halnya FB. Menjalin komunikasi dengan pembaca secara baik, memberi fasilitas yang mudah tentu akan membuat blog anda akan semakin dicintai. Nah, sekarang mari kita coba membuat Tombol Like FB tampil melayang pada Blog seperti cara berikut ini. 





Cara membuat Tombol Like FB tampil melayang pada Blog:

1. Masuk ke Dasbor Blog anda
2  Klik > Template > Edit HTML > Lanjutkan
3. Cari Kode </body>  
4. Copy paste kode berikut dibawah 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rcItFYGx4i0-I5hGM3nbIdUvV1nPy8CSdgMdo4ESpKhZUJKTDWgnmCcnPKZXVUm3vCaU6iISeUgepoKK4XqSZpn7AoSKJ9d3TvSq7waJgg9-lPc6KN1UCkyoiLjjcmXPbHIUBjMggcU/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOU3eUFPQFMW_vTQK7WrfmSZXDcsI9C8yEUcAhjpBNoFaudl0yedTXteaOjqeQfRS56T2GZU-Bw8UtXw3i_9hIjgFMYDSRPWpD3DZwimv8gRWRwAT6y6oLg0j5HZDC6WSghxB-Rvsid4/);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(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<center>
Code Like Box
</center></div>



keterangan:

Code Like Box: isi dengan CODE LIKE BOX anda 
bisa dicari di : http://developers.facebook.com/docs/plugins/ 

5. Klik > Simpan 

0 comments:

Post a Comment