Cara Membuat Pop Up Like Halaman Facebook 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

Silahkan kalian login ke dashboard blog kalian.

Selanjutnya pergilah ke Tata Letak dan silahkan kalian tambahkan Gadget/Widget di posisi dimanapun dan pilihlah, HTML/Javascript.

Salinlah script Pop Up Like Facebook berikut ini dan masukan kedalam Widget baru tersebut.

<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/AVvXsEhpl0V9d0pvhrW1dFnDIv_J5lf1r8ICpuc5vzI_TBuXP1JI97TrTjANKqd2D-N4Bh7hGC_gYvnk_0ne3LY8uvy1gFo7y5qpIcpTxWm2FcyQRRbE66oPoLDZIUNAlGcxUSiPTUDhZej7BFdZ/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>

Edit https://www.facebook.com/braderblog dengan link halaman facebook kalian.

Jika kalian tidak mengedit kode $('#fanback').delay(4000).fadeIn('medium') delay muncul widget pop up like facebook adalah 4 detik, jika kalian ingin mengedit delay nya silahkan edit 4000 dengan yang kalian inginkan misal 3000 berarti 3 detik.

Dan jika sudah selesai silahkan kalian simpan/save.

Nah itulah tutorial bagaimana Cara Memasang Pop Up Like Halaman Facebook Di Blog , sekian sampai jumpa di artikel menarik lainnya.

Nb : jangan lupa Visit MastahCyber.Tech