Cara Memasang Pop Up Like Box Facebook Melayang Di Blog
Nah kali ini aku akan membagi sebuah widget fanpage Facebook yang pas untuk Anda pasang di blog atau website Anda, dengan begini akan meningkat jumlah like / follow. Tapi terkadang ada beberapa pengunjung yang tidak suka dengan adanya pop-up ini jadi sebelum Anda memasangnya pikir-pikir dulu.
A. Cara Menambahkan Pop Like Box Facebook di Blog Style 1
1. Pertama silahkan Anda login dulu ke Akun Blogger
2. Lalu pilih menu Tata Letak → tambahkan Gadget terserah dimana saja → pilih HTML / JavaScript
3. Kemudian Copy kode script dibawah ini, lalu Paste didalamnya tanpa di beri judul nama
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css"> #fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%} #fbox-display { border: 5px solid #1194f2; width: 348px; height: 223px; position: absolute; top: 30%; left: 37%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #fbox-button { float: right; cursor: pointer; position: absolute; right: 5px; top: 1px; } #fbox-button:before { content: "x"; padding: 1px 7px 4px 7px; background: #ff4e4e; color: #fff; font-weight: 700; font-size: 10px; border-radius: 10px; } #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:0px} </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null}; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(5000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fbox-background'> <div id='fbox-close'> </div> <div id='fbox-display'> <div id='fbox-button'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/TutorialUmumBlog/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 212px;'></iframe> </div> </div> Perhatian!!!
- Ganti URL " https://web.facebook.com/gatlingkom/ " dengan URL halaman fanpage Anda
- Andapun sanggup mengubah warna sisi widget sesuai dengan cita-cita dengan menganti kode #1194f2 Sesuai keinginan
- Jika Ingin memunculkan widget setiap halaman fanspage di buka, silahkan hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); dan pada kode if($.cookie('popup_facebook_box') != 'yes'){ silahkan ganti yes menjadi no
4. Simpan dan lihat hasilnya
B. Cara Memasang Pop Like Box Fanspage Facebook di Blog Style 2
1. Pertama silahkan Anda login dulu ke Akun Blogger
2. Lalu pilih menu Tata Letak → tambahkan Gadget terserah dimana saja → pilih HTML / JavaScript
3. Kemudian Copy kode script dibawah ini, lalu Paste didalamnya tanpa di beri judul nama
<style scoped='' type='text/css'> #fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);} #fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);} #fb-boxview {background:#fff;border:8px solid #03a9f4;width:360px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;} #fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;} #fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;} #fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;} </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // Pengaturan 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('')); } // Dapatkan 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_box') != 'yes'){ $('#fb-fanbox').delay(3000).fadeIn('fast'); $('#fb-closebox, #fb-boxclose').click(function(){ $('#fb-fanbox').stop().fadeOut('fast'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fb-fanbox'> <div id='fb-boxclose'> </div> <div id='fb-boxview'> <div id='fb-closebox'> </div> <div class='fb-like-box' data-href='https://web.facebook.com/gatlingkom/' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div> </div> </div>Perhatian!!!
- Ganti URL "https://web.facebook.com/gatlingkom/ " dengan URL halaman fanpage Anda
- Jika Ingin memunculkan widget setiap halaman fanspage di buka, silahkan hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); dan pada kode if($.cookie('popup_facebook_box') != 'yes'){ silahkan ganti yes menjadi no
4. Setelah itu pilih menu Template → Edit HTML
5. Cari kode </body>
6. Kemudian Copy kode JavaScript dibawah ini, lalu Paste diatas kode </body>
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=562901580420523&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 7. Simpan dan lihat hasilnya
Bagaimana menarik bukan tampilan widgetnya, dengan begini Anda akan mendapat banyak like facebook sehingga visitor Anda sanggup bertambah. Jika ada dilema dalam pemasangan atau error silahkan komentar dibawah ini terima kasih.
