Membuat Like Box Melayang Dengan Effect Jquery

Mari kita simak tip kali ini. Yang berhubungan dengan kotak iklan atau tempat iklan, bahasa kerennya Ads Popup Dengan Efek Jquery.

Nggak usah banyak-banyak keterangannya soalnya keburu mau Sholat Maghrib. Maka dari itu kami menyempatkan diri untuk berbagi ke sahabat blogger.

Langkah 1

1. Log in ke blog anda
2. Klik Rancangan
3. Klik Edit HTML




4. Cari Kode </body>
5. Setelah ketemu masukan kode di bawah ini di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> <script type='text/javascript'> $(window).bind("load", function() { // animasikan nilai top saat halaman telah selesai dimuat $('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce"); // hilangkan kotak pesan saat tombol (x) diklik $('a.close').click(function() { $(this).parent().slideUp(800, "easeOutBounce"); return false; }); }); </script> <style> #kotak-pesan{ position:fixed !important; position:absolute; /* IE6 */ top:-900px; left:50%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:10px; background:#E9CF5F; border:2px solid #fff; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); } #kotak-pesan a.close{ position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } </style>

Langkah 2

Setelah itu Masuk di Elemen Laman,

• Klik Tambah Gadget 
• Pilih HTML/Javascript 
• Lalu masukan kode di bawah ini 

<div id='kotak-pesan'> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FAnonymousIndonesiaOfficialPage&width=The+pixel+width+of+the+plugin&height=290&colorscheme=dark&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:The pixel width of the pluginpx; height:290px;" allowTransparency="true"></iframe> <a class='close' href='#'>×</a> </div>

Perhatikan kode diatas :
AnonymousIndonesiaOfficialPage diganti dengan link fanspage sobat masing-masing .. :>)
Sekian tutorial unik dari saya, jika kurang mengerti silahkan komen di kotak komentar di bawah ini.


Key Word :

[-] Cara membuat like box melayang
[-] Cara membuat like box facebook
[-] Cara membuat like box facebook di blog
[-] Cara membuat like box facebook melayang di blog
[-] Cara membuat like box keren di blog
[-] Cara membuat like box facebook pada blog
[-] Cara membuat like box facebook melayang pada blog
[-] Cara membuat like box keren pada blog

Share this post