Cara Membuat POPUP Responsif/Responsive Pada Blog

Baca Juga

Mere Nyaho Cara - Cara Membuat POPUP Responsif/Responsive Pada Blog - Hello sahabat Mere Nyaho Cara pada tutorial atau pembahasan kali ini saya akan berbagi sebuah cara pembuatan POPUP, untuk cara ini saya rasa setiap tahunnya tentu sudah banyak para blogger senior / master maupun pemula / newbie ( seperti saya ) sudah banyak yang share, namun tak ada salahnya disini saya ulas kembali, dan cara yang saya sampaikan ini bisa sobat jadikan apa saja, semisal dibuatkan untuk popup like box facebook / follow facebook / follow twitter / follow G+ maupun sebagai kata - kata sambutan, contoh nya pada blog ini, bisa sobat lihat pada gambar dibawah ini ..

Nah, itulah yang saya maksud pada tutorial kali ini, dan saya rasa tidak perlu lagi banyak penjelasan apa yang di maksud saya responsif / responsive, karena saya yakin sobatpun mengerti, jika tidak mengerti silahkan sobat buka pada gadget yang berukuran / resolusi layar yang berbeda, misal pada laptop dan pada smartphone, dan coba sobat bandingkan, apakah popup tersebut terlihat rapi tanpa tertutup / terpotong ?? jika iya, itulah yang saya maksud responsif / resvonsive .. yang intinya responsif / resvonsive itu, bisa menyesuaikan berbagai macam jenis device ( berbagai macam resolusi layar ) !!!

Ok Baiklah, langsung saja admin kasih tau untuk cara pembuatannya, pertama - tama tentu sobat semuanya harus membuka dulu blog kalian masing - masing hehe, dan tentunya buka blog di www.blogger.com ya, bukan di www.WordPress.com dsb, dan berikut ini untuk pembuatan Cara Membuat POPUP Responsif/Responsive Pada 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>
      Isikan kode atau text apa aja disini, sebagai isi dari popup yang mau sobat tampilkan
    </div>
  </div>
</div>
</div>

Silahkan sobat ganti tulisan yang saya kasih warna merah ( Isikan kode atau text apa aja disini, sebagai isi dari popup yang mau sobat tampilkan ) dengan isi yang mau sobat masukan di dalam popup tersebut

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

Jika pop upnya tidak muncul atau 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>

Terakhir jangan lupa untuk klik Save template.. dan lihat hasilnya, apakah popupnya sudah muncul ?? jika belum mungkin ada sebagian kode yang tertinggal atau terhapus, silahkan sobat cek kembali

Tapi Jika kalian ingin memasangnya di widget blogger, silahkan gunakan kode berikut ini, biar ga rumit dan ga ribet / bingung ngedit template, cara dibawah ini cukup dengan klik tata letak / layout => tambah gadget => HTML/Javascript => masukan kode dibawah ini..

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>
      Isikan kode atau text apa aja disini, sebagai isi dari popup yang mau sobat tampilkan
    </div>
  </div>
</div>
</div>

Untuk pengaturannya sama seperti di atas...

Terakhir klik save, dan lihat hasilnya, pop up nya pasti muncul, tapi sebelum di save ada yang mesti sobat ganti, seperti yang sudah saya katakan pada cara pertama diatas, yaitu sobat hanya perlu mengganti tulisan yang saya kasih warna merah nya saja ( Isikan kode atau text apa aja disini, sebagai isi dari popup yang mau sobat tampilkan ) sesuai dengan yang ingin sobat tampilkan pada pop up tersebut..

Gimana sangat mudah bukan ?? nah itu lah yang dapat admin blog Mere Nyaho Cara sampaikan pada kesempatan kali ini mengenai Cara Membuat POPUP Responsif/Responsive Pada Blog