Sabtu, 25 Agustus 2012

Cara Membuat Tombol Like FB Melayang Pada Blog

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/AVvXsEj8eskDKpwPVBNYdGHkmFVtaNAm-o4RsMEBfPh9btcERIEwfdHHOFCOHDMELiSw0aBJK9We7m2ANKfbMcREllQZwM99H5hCeiasUchQ9hMf-Y0lajvsyH96mJvDMjGpdImcpzEcUBdFMqM/) 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/AVvXsEg6hd87-Hx0h-C89d_9kf-Iaf6ehKGZA4iCH68UOwLGv3p-AgYypOZPMgr1zkM5_e2id6gplBMIhOU8EbOk7VVMRTny7pqyQj4lxuouC1wum5N1zBB0HAg6aVKEGMyS0i-nqWi-jPhA1x4/);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

Sekian tips Cara Membuat Tombol Like FB Melayang Pada Blog.

2 komentar:

Unknown mengatakan...

maaff nggak nyambung sama postingan nya,,,
tukeran banner ya kak,,,banner nya sudah saya pasang...
http://benubolu.blogspot.com

Sepatu Murah mengatakan...

keren gan, berhasil