Cara Memasang Pop Up Like Box Facebook Melayang di Blog

Cara Memasang Pop Up Like Box Facebook Melayang di Blog
Memiliki fanspage Facebook dengan jumlah follower banyak tentu menjadi idaman setiap blogger karna dapat meningkatkan jumlah pengunjung blog. Fanpage berfungsi untuk memberitahukan kepada pengikut tentang adanya artikel menarik atau terbaru yang baru di bagikan oleh adminnya. Sehingga nantinya pengikut tersebut akan mengunjungi artikel kita. Kendati begitu meningkatkan jumlah pengikut tidaklah mudah terkadang para admin menggunakan FB-Ads untuk meningkatkan jumlah like halaman Facebook atau memasang fanpage Facebooknya di blog atau situs yang dimilikinya.

Nah kali ini saya 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

Like Box Widget

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 dapat mengubah warna sisi widget sesuai dengan keinginan 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

Like Box Widget

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>
 &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=562901580420523&amp;version=v2.0&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt; 

7. Simpan dan lihat hasilnya

Bagaimana menarik bukan tampilan widgetnya, dengan begini Anda akan mendapatkan banyak like facebook sehingga visitor Anda bisa bertambah. Jika ada masalah dalam pemasangan atau error silahkan komentar dibawah ini terima kasih.

COMMENTS

Nama

AoV,4,BitCoin,5,Blogspot,55,Games,14,internet,35,komputer,59,Kontes Blog,1,lain-lain,130,linux,1,multimedia,1,Overwatch,3,Plugin,1,sejarah,13,Smartphone,35,Tips & Trik,22,tkj,55,Widget,33,windows,4,Wordpress,15,
ltr
item
Layar Komputer 21: Cara Memasang Pop Up Like Box Facebook Melayang di Blog
Cara Memasang Pop Up Like Box Facebook Melayang di Blog
Cara membuat & memasang Popup Facebook Like Box yang melayang di Blogger dengan tampilan responsive, valid HTML 5, dan CSS3
https://4.bp.blogspot.com/-MdWqJ6a1YEc/Wjiuo1lnBYI/AAAAAAAAAb0/Lf294BHV0e4MVxklaS0nVkR_7ehFRvokQCEwYBhgL/s640/ezgif.com-video-to-gif%2B%25281%2529.gif
https://4.bp.blogspot.com/-MdWqJ6a1YEc/Wjiuo1lnBYI/AAAAAAAAAb0/Lf294BHV0e4MVxklaS0nVkR_7ehFRvokQCEwYBhgL/s72-c/ezgif.com-video-to-gif%2B%25281%2529.gif
Layar Komputer 21
https://www.lk21.news/2017/12/cara-memasang-pop-up-like-box-facebook.html
https://www.lk21.news/
https://www.lk21.news/
https://www.lk21.news/2017/12/cara-memasang-pop-up-like-box-facebook.html
true
2757422719814358249
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All Artikel Terkait LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy