BONEK RUWET COMUNITY

terima kasih buat teman" yang sudah mampir di blog saya

Sabtu, 15 Desember 2012

Source: http://bonekruwetcomunity.blogspot.com/2012/02/cara-membuat-navigasi-breadcrumb-di.html#ixzz2CbHChNOG

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/AVvXsEin48Lxwcm-GjOHrlRHN-ZHo3vksRkB5vHut4nkb0p_qGAHzeOnCR1Btwpt5qbl8jB5EL94_OqFDUsPt8Mp4wgsP2Uvp7UVJpdK78kcprXhrThG_XfnYkmcyWW6lgylcz4URBA3DIGEab8/) 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/AVvXsEg0VRJC8xbEoSIErY1clehUjkucZr-0w41DKJu2Sag1B8nmkHJyEVuJYRwxtSqgeWiK2gvO3mPOOETbW9OHFSUzU4C1tj8cuusW2KeWhJOm2g9nVvEeCf4tqdal7skugx7yqLuy7bjx5CM/);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

Untuk Download Artikel Klik Gambar

Tidak ada komentar:

Posting Komentar