Cara Mudah Membuat Widget Pop up Facebook Like Box Responsive di Blogger

Cara Mudah Membuat Widget Pop up Facebook Like Box Responsive di Blogger

Cara Mudah Membuat Widget Pop up Facebook Like Box Responsive di Blogger | Cara membuat widget pop up facebook like box responsive di blogger, merupakan topik artikel yang akan kita bahas.

Sebelumnya, Saya pernah mencari tentang artikel ini ke beberapa situs web di google, namun hasilnya tidak responsive.

Tak begitu lama, akhirnya Saya menemukan tutorial membuat popup facebook like box ini di sebuah blog luar negeri dan ketika Saya coba, hasilnya baik dan responsive untuk berbagai template.

Untuk cara pembuatannya, kalian simak saja artikel berikut.

Baca juga:
- Membuat bottom floating facebook like box widget di blogger
- Membuat widget facebook like box sederhana di blogger

Widget Pop Up Facebook Like Box Responsive Blogger

  • Login ke akun blogger kalian.
  • Kemudian, masuk ke opsi Tata Letak => Tambahkan Gadget => HTML/Javascript
  • Pastekan script dibawah ini di bagian Konten dan Simpan perubahan.
<!-- Pop up Facebook Like Box-->
<style type="text/css">
#fb-back { display: none; background: rgba(0,0,0,0.8);   width: 100%; height: 100%; position: fixed; top: 0;   left: 0; z-index: 99999;}
#fb-exit { width: 100%; height: 100%; }
.fb-box-inner {position: relative; display:block; padding: 20px 0px 0px; margin:0 auto; text-align:center; }
#fb-close { cursor: pointer; position: absolute; top: 5px; right: 5px; font-size: 18px; font-weight:700; color: #000; z-index: 99999; display:inline-block; line-height: 18px; height:18px;width: 18px; }
#fb-close:hover { color:#06c; }
#fb-box { min-width: 340px; min-height: 360px; position: absolute; top: 50%; left: 50%; margin: -220px 0 0 -170px; -webkit-box-shadow: 0px 0px 16px #000; -moz-box-shadow: 0px 0px 16px #000; box-shadow: 0px 0px 16px #000; -webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px;
background: #fff; /* pop up box bg color */
border-bottom: 40px solid #f0f0f0;  /* pop up bottom border color/size */
}
.fb-box-inner h3 { line-height: 1; margin:0 auto; text-transform:none;letter-spacing:none;
font-size: 23px!important;  /* header size */
color:#06c!important; /* header color */
}
.fb-box-inner p { line-height: 1; margin:0 auto 20px;text-transform:none;letter-spacing:none;
font-size: 13px!important; /* header size  */
color:#333!important; /* text color */
}
a.fb-link { position:relative;margin: 0 auto; display: block; text-align:center; color: #333; /* link color */
bottom: -30px;
}
#fb-box h3,#fb-box p, a.fb-link { max-width:290px; padding:0; }
</style>

<!-- facebook plugin -->
<div id='fb-back'>
<div id="fb-exit"> </div>
  <div id='fb-box'>
   <div class="fb-box-inner">
   <div id="fb-close">X</div>
<!-- edit your popup header text here -->

<!-- edit your supporting text here  -->

<!-- edit your fb name below -->
     <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/FansHijabers&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false'style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'></iframe>
<!-- edit your supporting link here  -->
<a class="fb-link" href="//www.gilailmu.com/kontak"> Kontak Saya</a>  
</div>
 </div>
</div>
<!-- popup plug-in snippet  -->
<script type='text/javascript'>
//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { 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() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
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; };
// the pop up actions
$(function ($) {
  if ($.cookie('popup_fb') != 'yes') {
    $('#fb-back').delay(400).fadeIn("slow"); // options slow or fast
    $('#fb-close, #fb-exit').click(function () {
      $('#fb-back').stop().fadeOut("slow"); // options slow or fast
    });
 }
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 0 });
});
//]]>
</script>
<!-- facebook like box ends -->

Konfigurasi:
  1. Ganti kata FansHijabers dengan ID fanspage kalian.
  2. Ganti url www.gilailmu.com/kontak dengan url kontak blog kalian.

Kalian juga dapat menuliskan kalimat sponsor atau apapun itu di bawah kalimat <!-- edit your popup header text here --> dan <!-- edit your supporting text here  -->

Keuntungan dan kerugian menggunakan widget pop up facebook like box


Memasang widget ini pada blog, bisa menghasilkan beberapa keuntungan. Seperti, blog kalian akan mudah terkenal (karena mereka mengikuti fp blog kalian) dan tentunya kalian akan mendapatkan traffic yang besar dari facebook.

Disisi lain, memasang widget ini di blog, juga bisa berdampak buruk bagi blog kalian. Salah satunya adalah membuat loading blog kalian akan sedikit lambat/lemot.

Baca juga: 5 Cara Terbaru dan Efektif Mempercepat Loading Blog Blogger 2019

Kesimpulan ...

Widget pop up facebook like box ini, sudah dirancang dengan responsive. Jadi, kalian tidak perlu khawatir akan tampilannya nanti jika dibuka di gadget apapun.

Sekian artikel tentang cara mudah membuat widget popup facebook like box responsive di blogger. Jika kalian menyukai artikel ini, mohon untuk share kembali ke akun media sosial kalian. Terimakasih sudah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel