logo blog

Cara Membuat Facebook PopUp Like Box Responsive

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 :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Cara Membuat Facebook PopUp Like Box Responsive. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Cara Membuat Facebook PopUp Like Box Responsive. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

26 comments

TT

bagus neh, di lain pada gak resvonsif

Mas Tamvan

Silahkan d coba gan :)
Thank atas kunjungan dan komentarnya :-d

Faradila Okatviani

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,,,

Faradila Okatviani

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,,,

Mas Tamvan

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

Faradila Okatviani

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

Mas Tamvan

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

rulnove

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

Abe

nice post gan , it work ..!

rulnove

nice post gan, ijin coba.

admin escendol

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

Mas Tamvan

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

Mas Tamvan

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

isnaini ma'ruf

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

Wahyu AC

mas kalo menambahkan tombol twitter gimana ya? mohon bantuanya

Mas Tamvan

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

Kaka Kiky

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

Mas Tamvan

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

Mas Tamvan

Coba gan di pasang ulang. udah di perbaiki (y)

Anak Dagang

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

Cho Irul

min kalau nambahin twitter dan g+ gimana caranya?

Mas Tamvan

Mau pasang model gimana?
Button?

Cho Irul

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

Mas Tamvan

Siap gan, pengennya di bagian mana?
atas / bawah?

Cho Irul

dibagian bawah aja biar bagus mas :)

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon