Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Pop Up Like Box Facebook Melayang Di Blog

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 sanggup meningkatkan jumlah pengunjung blog. Fanpage berfungsi untuk memberitahukan kepada pengikut wacana adanya artikel menarik atau terbaru yang gres di bagikan oleh adminnya. Sehingga nantinya pengikut tersebut akan mengunjungi artikel kita. Kendati begitu meningkatkan jumlah pengikut tidaklah gampang terkadang para admin memakai FB-Ads untuk meningkatkan jumlah like halaman Facebook atau memasang fanpage Facebooknya di blog atau situs yang dimilikinya.

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

Cara Memasang Pop Up Like Box Facebook Melayang di Blog Cara Memasang Pop Up Like Box Facebook Melayang di Blog

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

Cara Memasang Pop Up Like Box Facebook Melayang di Blog Cara Memasang Pop Up Like Box Facebook Melayang di Blog

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 mendapat banyak like facebook sehingga visitor Anda sanggup bertambah. Jika ada dilema dalam pemasangan atau error silahkan komentar dibawah ini terima kasih.