Cara Membuat Facebook PopUp Like Box Responsive

Cara Membuat 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 saya akan berbagi sebuah widget followers/ like fanspage facebook melayang / pop up ketika blog kita di load...

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

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



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

facebook popup like box html code

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

Cara Membuat Popup Like Facebook di Blog


  • Terus ke Template, Edit HTML, Cari Kode </body>
  • Lalu masukan kode berikut diatasnya..
  • 
    <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') {
        $('#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://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
          </div>
          <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/facebook/&amp;width=290&amp;height=275&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
        </div>
      </div>
    </div>
    </div>
    
    Silahkan ganti url ini https://www.facebook.com/facebook/ dengan url Fanspage facebook kalian...

    Jika kalian ingin agar widget pop up facebooknya muncul di setiap kali buka blog /post di hari yang sama, silahkan ganti nilai pada kode ini expires: 5 menjadi 0 (Angka Nol) expires: 0

    Jika pop upnya tidak muncul / tidak bisa di klos, tutup. silahkan masukan kode berikut di atas </head>
    
    <script type='text/javascript'>
           //<![CDATA[
           if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
           //]]>
    </script>
    
  • Lanjut, masih di edit HTML, sekarang kalian cari kode </head>. Lalu masukan css berikut di atasnya...
  • 
    <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>
    
  • Tinggal Save template.. done
Jika kalian ingin memasangnya di widget blogger, silahkan gunakan kode berikut saya, biar ga rumit dan ga ribet / bingung karena penjelasannya kurang komplit..
  • Silahkan ke tataletak, tambahkan widget, terus pilih html javascript dan masukan kode 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 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') {
        $('#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://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
          </div>
          <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/facebook/&amp;width=290&amp;height=275&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
        </div>
      </div>
    </div>
    </div>
    
    Untuk pengaturannya sama seperti di atas...
  • Save n done

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger ini bermangaat.
Apabila ada yang mau di tanyakan silahkan bertanya di kolom komentar :)
31 komentar
  1. bagus neh, di lain pada gak resvonsif

    ReplyDelete
    Replies
    1. Silahkan d coba gan :)
      Thank atas kunjungan dan komentarnya :-d

      Delete
  2. Sebelumnya thank you ya gan, udah share nih,,, saya mengalami sdikit masalah di close pop upnya untuk versi mobile,,, kalau dari destop bisa dan lancar,,,


    Padahal 3 langkah di atas udah saya lakukan,,,

    ReplyDelete
  3. Sebelumnya thank you ya gan, udah share nih,,, saya mengalami sdikit masalah di close pop upnya untuk versi mobile,,, kalau dari destop bisa dan lancar,,,


    Padahal 3 langkah di atas udah saya lakukan,,,

    ReplyDelete
    Replies
    1. Ok gan. Thank atas pemberitahuannya.
      Sekarang udah bisa d (update), coba di ganti cssnya... :)

      Delete
    2. Oke gan udah work dan sangat memuaskan :-) bintak 5 deh

      Delete
    3. Ok gan, semoga bermanfaat.
      Thank juga atas bintangnya :-db

      Delete
  4. mantap gan ijin coba, mampir juga disini rulnove.blogspot.com

    ReplyDelete
  5. mas kalo kotaknya sedikit diperbesar lagi tapi tetap responsive bisa gak mas?

    ReplyDelete
    Replies
    1. Bisa gan, coba aja ganti iframe facebooknya dengan kode plugin dari facebook developers terus atur width sama heightnya..

      Delete
    2. Bisa juga mengatur dari bagian ini gan..
      &amp;width=290&amp;height=275&amp;
      width: 290px; height: 270px;
      terus edit lagi cssnya

      Delete
  6. sukses mas broo, untuk dektop.
    tapi ane coba di handphone, engga nongol...

    ReplyDelete
  7. mas kalo menambahkan tombol twitter gimana ya? mohon bantuanya

    ReplyDelete
    Replies
    1. Tinggal Tambahkan di dalam pembungkus faspagenya gan, terus atur ukurannya..

      Delete
    2. diupdate dong mas nambah twitter atau g+. yang awam seperti saya kan gak paham kalau gak ada contohnya hehehe

      Delete
    3. Siap gan, pengennya di bagian mana?
      atas / bawah?

      Delete
    4. dibagian bawah aja biar bagus mas :)

      Delete
  8. alhamdulillah nemu yang responsive.. bentuknya juga imut! thanks gan! padahal punya mbak arlina keren juga :v tapi sayang nya gak responsive :D

    ReplyDelete
    Replies
    1. Wkwkwk iya gan, sengaja di bikin imut :v
      Mugkin bisa yg punya arlina juga di bikin responsive (y)

      Delete
  9. Gan, topupnya bs muncul lg jika pengunjung kembali lagi dalam waktu 24 jam ya? Kalau seperti itu bisa dipercepat kah gan, misalnya 1 jam.

    ReplyDelete
  10. min kalau nambahin twitter dan g+ gimana caranya?

    ReplyDelete
  11. kok ane pake cara yang widget gak mau muncul kenapa ya om?

    ReplyDelete
  12. thengkyu bosqu tutorialnya keren banget, aku udah instal di blogku. visit balik ya bos http://www.pengentau.web.id

    Salam blogger

    ReplyDelete
  13. Thank you admin,,, Tutorial yang sangat lengkap plus mudah dipahami...
    Semoga ilmunya semakin berkah admin...

    ReplyDelete