Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal - Hallo sahabat Download Aplikasi Gratis, Pada Artikel yang anda baca kali ini dengan judul Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal
link : Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal

Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal

Mungkin kamu sedang mencari cara membuat popup 100% responsive, dan saya pikir banyak sekali bertebaran tutorial tutorial cara membuat popup box fanspage Facebook kamu. Namun kamu belum menemukan yang cocok untuk diterapkan di blog kamu. Dan kamu putuskan sendiri, menurut saya pribadi bahwa penggunaan popup ini sangat mengganggu para pembaca blog kamu. Tapi jika kamu ingin meningkatkan like Facebook ini cocok dipakai.

Popup box responsive

Pada postingan ini saya akan share bagaimana cara membuat popup box untuk fanspage Facebook sukses 100% responsive di segala ukuran devices. Anda akan melihat demontrasinya yang sudah saya terapkan pada blog-blog saya. Tapi saya kasih contoh satu saja ya ... heeeee...

Sudah lihat demo nya... Nah sekarang ikuti step by step tutorial buat popup responsive nya.
Pertama silahkan kamu buka blog kamu blogger.com
Kemudian pilih "TEMA" atau dalam bahasa inggris "THEME"
Pilih "HTML"

Catatatan: Sebelum anda membuka tema editor ada baiknya kamu backup dahulu tema kamu sebelumnya.

Cari dan simpan code CSS dibawah ini diatas  </head>

#aink-back{display:none;background:rgba(0,0,0,.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#aink-exit{width:100%;height:100%}.aink-box-inner{width:266px;position:relative;aink_gandaria:block;padding:20px 0 0;margin:0 auto;text-align:center}#aink-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;aink_gandaria:inline-block;line-height:18px;height:18px;width:18px}#aink-close:hover{color:#06c}#aink-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){.aink_gandaria{position:fixed;top:50%;left:50%}#aink-box{min-width:310px;min-height:240px;transform:scale(.67);-webkit-transform:scale(.67);-o-transform:scale(.67);-ms-transform:scale(.67);-moz-transform:scale(.67)}.aink-box-inner{width:266px}#aink-close{right:-17px}}#aink-back iframe{transform:scale(.92);-webkit-transform:scale(.92);-o-transform:scale(.92);-ms-transform:scale(.92);-moz-transform:scale(.92);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}

Tambahkan tag <style>.........code css........</style>

Kemudian simpan code dibawah ini diatas tag </head> juga

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

Cari dan simpan code dibawah ini letakan diatas </body>

<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') {
    $('#aink-back').delay(400).fadeIn("fast"); // options slow or fast
    $('#aink-close, #aink-exit').click(function () {
      $('#aink-back').stop().fadeOut("fast"); // options slow or fast
    });
 }
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 0 });
});
//]]>
</script>
<div class='aink_gandaria'>
<div id='aink-back'>
  <div id='aink-exit'> </div>
  <div id='aink-box'>
    <div class='aink-box-inner'>
      <div id='aink-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/NamaFanspageAnda/&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>

Kemudian ganti huruf NamaFanspageAnda dengan Fanspage kamu.

Klik Simpan.

Dan coba lihat hasilnya.

Cukup mudah kan membuat popup box responsive di blogger. Jika ada pertanyaan silahkan tinggalkan di kolom komentar. Salam.....
Kamu suka cari blog-blog zombie, ini saya berikan cara mencari blog zombie dengan mudah.

Demikianlah Artikel Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal

Sekianlah artikel Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Popup Box Fanspage Facebook Responsive 100% di Blog #Anti Gagal dengan alamat link https://aplikasi212.blogspot.com/2017/12/membuat-popup-box-fanspage-facebook.html

Tweet