Cara Membuat Pop Up Like Halaman Facebook (FB) Di Blog
Memasang widget like facebook di blog memang cara paling ampuh mempermudah mendapatkan like pada halaman facebook kalian. Untuk itu banyak sekali blogger blogger yang mencari tempat sempurna untuk memasang widget like facebook pada blog nya, ada pun mereka memasang widget tersebut dengan cara menempelkan disuatu tempat ada juga menempel di atas atau bawah artikel, dan banyak lainnya. Pemasang widget tersebut pasti mengganggu para pengunjung blog nya dikarenakan mengganggu tampilan artikel yang ingin mereka baca. Nah untuk itu saya akan memberi solusi masalah yang muncul seperti di atas, yaitu dengan cara membuat pop up like facebook. Pop Up ya pasti kalian sudah tidak asing dengan Pop Up, meskipun Pop Up ini cukup mengganggu namun sebenarnya Pop Up ini akan muncul dalam waktu yang telah ditentukan, misalnya 1 hari sekali, 7 hari sekali, maupun 30 hari sekali.
Widget ini sangat menarik karena jika muncul widget pop up ini bagian selain dari pop up akan terlihat gelap dan juga dalam widget ini para pengunjung akan di beri dua pilihan yaitu Close/Menutup widget itu atau menyukai halaman facebook. Menarik Bukan?, ya langsung saja kita ke tutorial pemasangan widget pop up like Facebook.
Cara Membuat Pop Up Like Halaman Facebook Di Blog
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> <style> #fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #fanbox { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #fanclose { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwv9zkHO8e1h9fOJv33ofQWRXajcXDRHjvTe5x1vOoUh4XmfetdQr6utwJW_hfnoNQBd9iBoj8jV74jcNHXzmbhguhiQtIQiBv8j5wjK4Y4_IrO-2frOm6xKx8qRIQkB9N2lQtU1xMtego/s1600/fanclose.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_like') != 'yes'){ $('#fanback').delay(5000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'> <div id='fan-exit'></div> \ <div id='fanbox'> \ <div id='fanclose'></div> <div class='remove-borda'></div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/mastahcyber&width=412&height=257&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe> </div> </div>