Cara Menciptakan Facebook Popup Like Box Responsive

Cara menambahkan Popup Facebook Fanspage Like Box Responsive di Blog

Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger. Pada tutorial blog kali ini aku akan membuatkan sebuah widget followers/ like fanspage facebook melayang / pop up saat blog kita di load...

Mungkin sudah banyak yang share widget pop up like box fanspage facebook responsive d blog lain, tapi apa salahnya aku juga share daripada resah mau share apa :v

Mungkin widget dari blog lain tampilanya keren-keren, terus ada yang menurut timer, tapi tidak untuk widget dari aku ini... di sini aku menciptakan tampilannya yang simple mini pop up facebook like box lah :v
Baca juga artikel wacana widget pop up card di bloger

Tutorial Blogger Lainnya :

• Cara Membuat Widget Pop Up Card Di Blogger

• Cara Membuat Widget Pop Up dengan waktu yang sudah di tentukan

• Membuat Widget About Me Dengan Tombol Pop Up

Berikut ini tampilan dari widget sosial media facebook pop up like box.



Untuk tutorial cara pemasangannya cukup mudah, silahkan simak tutorial berikut ini.......

Cara Membuat Popup Like Facebook di Blog

• Login Ke blogger.com

• Terus ke Template, Edit HTML, Cari Kode </body>

• Lalu masukan instruksi berikut diatasnya..

 <script type='text/javascript'> //<![CDATA[ //grab user's browser gosip 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') {     $('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast     $('#tamvan-close, #tamvan-exit').click(function () {       $('#tamvan-back').stop().fadeOut("fast"); // options slow or fast     });  } //initiate popup function by setting up the cookie expiring time $.cookie('popup_fb', 'yes', { path: '/', expires: 5 }); }); //]]> </script> <div class='mas_tamvan'> <div id='tamvan-back'>   <div id='tamvan-exit'> </div>   <div id='tamvan-box'>     <div class='tamvan-box-inner'>       <div id='tamvan-close'>         <img src='https://tutorialcarapintar.blogspot.com//search?q=facebook-popup-like-box-responsive javascript dan masukan instruksi di bawah ini ke dalamnya 
 <!--Kode CSS--> <style type='text/css'> #tamvan-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999} #tamvan-exit{width:100%;height:100%} .tamvan-box-inner{width:266px;position:relative;mas_tamvan:block;padding:20px 0 0;margin:0 auto;text-align:center} #tamvan-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;mas_tamvan:inline-block;line-height:18px;height:18px;width:18px} #tamvan-close:hover{color:#06c} #tamvan-box{min-width:310px;min-height:240px;position:absolute;top:50%;left:50%;margin:-220px 0 0 -170px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;max-height:253px} @media (max-width:380px){.mas_tamvan{position:fixed;top:50%;left:50%}#tamvan-box{min-width:310px;min-height:240px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.tamvan-box-inner{width:266px}#tamvan-close{right:-17px}} #tamvan-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style> <!--Kode Javascript--> <script type='text/javascript'> //<![CDATA[ //grab user's browser gosip 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') {     $('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast     $('#tamvan-close, #tamvan-exit').click(function () {       $('#tamvan-back').stop().fadeOut("fast"); // options slow or fast     });  } //initiate popup function by setting up the cookie expiring time $.cookie('popup_fb', 'yes', { path: '/', expires: 5 }); }); //]]> </script> <!--Kode HTML--> <div class='mas_tamvan'> <div id='tamvan-back'>   <div id='tamvan-exit'> </div>   <div id='tamvan-box'>     <div class='tamvan-box-inner'>       <div id='tamvan-close'>         <img src='https://tutorialcarapintar.blogspot.com//search?q=facebook-popup-like-box-responsive' target='_blank'title='Cara Menambahkan Pop Up Like Box Facebook di Blogger'>Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger ini bermangaat. 
 Apabila ada yang mau di tanyakan silahkan bertanya di kolom komentar :)