Cara Membuat POPUP Notifikasi Keren Pada Halaman Blog

POPUP notifikasi pada halaman blog biasa digunakan untuk menampilkan pengumuman penting yang bisa berupa berita terbaru tentang artikel blog, facebook timeline, facebook like dan subscribe, produk unggulan, iklan, promosi dan lain sebagainya. Popup dalam pembahasan artikel ini merupakan popup yang menggunakan internal elemen HTML jadi akan berjalan mulus dan lancar tanpa diblokir oleh browser.

Popup menggunakan internal HTML lebih aman digunakan daripada menggunakan script new window, karena apabila menggunakan script new window kebanyakan browser akan menganggap sebagai SPAM dan akan diblokir untuk tampilannya sehingga popup tidak bisa ditampilkan. Cara aman agar popup notifikasi tidak diblokir maka digunakan cara internal HTML dengan sedikit modifikasi kode javascript.

Popup notifikasi yang admin formulasikan memiliki 2 opsi pilihan bisa dengan timer bisa juga tanpa timer, tinggal disetting aja pada variabel scriptnya. Tampilan popup notifikasi menggunakan tampilan metroUI mirip dengan box aplikasi yang ada di windows 10 dengan warna solid dan animasi keren, pastinya super premium deh. Soal pembuatan kodenya ga perlu pusing, karena admin sudah buatkan formulanya, jadi ga perlu pusing tinggal setting sebentar dan pasang deh. Yuk simak cara pemasangannya.

Informasi Singkat

---

Iklan pop-up atau pop-up adalah bentuk iklan online di World Wide Web. Munculan adalah area tampilan antarmuka pengguna grafis (GUI), biasanya jendela kecil, yang tiba-tiba muncul ("muncul") di latar depan antarmuka visual. Jendela pop-up yang berisi iklan biasanya dihasilkan oleh JavaScript yang menggunakan skrip lintas situs (XSS), terkadang dengan muatan sekunder yang menggunakan Adobe Flash. Mereka juga dapat dihasilkan oleh celah keamanan / kerentanan lain di keamanan browser.

Variasi pada jendela pop-up, iklan pop-under, membuka jendela browser baru di bawah jendela aktif. Pop-under tidak langsung mengganggu pengguna, tetapi muncul saat pengguna menutup jendela penutup, sehingga lebih sulit untuk menentukan situs web mana yang membuatnya.

Iklan pop-under mirip dengan iklan pop-up, tetapi jendela iklan tampak tersembunyi di balik jendela browser utama, bukan ditumpangkan di depannya. Karena iklan pop-up menjadi lebih tersebar luas dan lebih mengganggu, seringkali memenuhi seluruh layar komputer, banyak pengguna akan segera menutup iklan pop-up yang muncul di sebuah situs tanpa melihatnya. Iklan pop-under tidak langsung menghalangi tampilan konten, tetapi tetap tidak diperhatikan hingga pengguna menutup atau meminimalkan jendela browser utama.

---

Sumber : Wikipedia

Cara Pembuatan Popup Notifikasi

Cara Membuat POPUP Notifikasi Keren Pada Halaman Blog cukup mudah karena hanya terdiri dari beberapa baris kode HTML, CSS dan Javascript, oh ya tak lupa juga popup notifikasi ini menggunakan library jQuery, jadi pastikan anda sudah memasangnya di dalam template blog anda.

Pemasangan kode popup notifikasi bisa ditaruh pada kode template HTML blog bisa juga ditaruh pada kotak widget blog. Apabila ditaruh pada kotak widget blog maka anda bisa menggunakan tombol Add to Blogger di bawah untuk mempercepat proses pembuatan dan memudahkan proses pemasangan pada blog anda. Pastikan anda juga sudah menyesuaikan beberapa parameter agar bisa sesuai dengan apa yang ingin anda tampilkan. Berikut cara membuat popup notifikasi pada halaman blog.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <!--Popup Notif CodeFlare -->
  <div class="boxPromo" id="boxPromo" style="display:none;">
  <div class="headerBoxPromo">
  <div class="titleHeaderBoxPromo">...</div>
  <div class="closeBtnBoxPromo" id="closeBtnBoxPromo" onclick="closeBoxPromo()" title="Close"><i aria-hidden="true" class="fa fa-times"></i></div>
  </div>
  <div id="contentBoxPromo">
  
  Taruh kode HTML atau Script disini...
  
  </div>
  <div class="btnGOToPromo"><div id="bgGOToPromo"></div><div id="btnGOToPromo">Please wait...</div></div>
  </div>
  <style>
  :root {
  --elmWidth:300px;
  --elmHeight:380px;
  --elmAlign:center;
  }
  /*-----------------------*/
  .boxPromo{width:var(--elmWidth);left:calc(50% - (var(--elmWidth)/2));top:calc(50% - (var(--elmHeight)/2));z-index:+99;border:1px solid #0083da;margin:0;padding:0;position:fixed;}.headerBoxPromo{display:block;font-size:16px;font-weight:600;height:30px;position:relative;padding:0;color:#fff;}.closeBtnBoxPromo{width:5%;transition:color .3s,background-color .3s linear .3s;}.titleHeaderBoxPromo,.closeBtnBoxPromo{float:left;box-sizing:border-box;padding-top:5px;text-align:center;background:#0083da;}.titleHeaderBoxPromo,.closeBtnBoxPromo{height:30px;}.closeBtnBoxPromo{color:#0083da;width:10%;cursor:pointer;}.titleHeaderBoxPromo{width:90%;cursor:move;}#contentBoxPromo{text-align:var(--elmAlign);width:100%;height:auto;box-sizing:border-box;margin:0;padding:0;}.closeBtnBoxPromo:hover{background:red;color:#fff;}.closeBtnBoxPromo:hover>i{-webkit-animation:scaleDir .7s linear infinite;animation:scaleDir .7s linear infinite;}@keyframes fontSizeAnim{0%{font-size:20px;}50%{font-size:24px;}100%{font-size:20px;}}@-webkit-keyframes zoomin{100%{-webkit-transform:scale(1,1);}}@keyframes zoomin{100%{transform:scale(1,1);}}.aktifPromo{-webkit-animation:zoomin 2s;animation:zoomin 2s;-webkit-transform:scale(0,0);transform:scale(0,0);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}#bgGOToPromo,.btnGOToPromo,#btnGOToPromo{height:24px;width:100%;}.btnGOToPromo{margin:0px;}#bgGOToPromo{background:#9dd53a;background:-moz-linear-gradient(top,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);background:-webkit-linear-gradient(top,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);background:linear-gradient(to bottom,#9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',endColorstr='#7cbc0a',GradientType=0 );box-sizing:border-box;transition:width .2s ease;}.btnGOToPromo{background-color:#0083da;position:relative;}#btnGOToPromo{position:absolute;top:0;text-align:center;padding:0 5px 2px 5px;font-size:20px;font-weight:800;color:#000;}#btnGOToPromo:hover{animation:fontSizeAnim 1s linear infinite;}
  </style>
  <script>
  //<![CDATA[
  var useTimer='21';
  var titleBox='Notifikasi';
  /*----------------*/
  var promoBoxshow,promoBoxshow,bgGTPrWidth;
  var promoBoxstart=useTimer;
  function closeBoxPromo(){clearInterval(promoBoxshow);promoBoxstart=0;$('#boxPromo').slideUp();}
  var promoSession = sessionStorage.getItem('promoSession');
  if(promoSession === null){
  $(window).bind('load',function(){
  setTimeout(function(){
  $('.titleHeaderBoxPromo').html(titleBox);
  $('.boxPromo').css({'display':'inline-block'});
  $('.boxPromo').addClass('aktifPromo');
  $("#boxPromo").draggable();
  bgGTPrWidth=parseInt($('#btnGOToPromo').css('width'));
  promoSession = sessionStorage.setItem('promoSession',true);
  if(useTimer>0||useTimer!=''){promoBoxshow=setInterval(promoBoxtimer,1000);
  }else{$('.btnGOToPromo').hide();$('.closeBtnBoxPromo').css({'color':'#fff'});}
  }, 1000);});}
  function promoBoxtimer(){
  promoBoxstart -= 1;
  $('#btnGOToPromo').html(promoBoxstart);
  $('#bgGOToPromo').css({'width':bgGTPrWidth-((promoBoxstart/useTimer)*bgGTPrWidth)+'px'});
  if(promoBoxstart==0){clearInterval(promoBoxshow);$('#boxPromo').slideUp();}
  }
  //]]>
  </script>
  <!--Popup Notif CodeFlare -->
  script code here...
  
  
  KETERANGAN
  Pada kode :
  
  <div id="contentBoxPromo">
  
  Taruh kode HTML atau Script disini...
  
  </div>
  
  Silakan anda taruh kode yang akan digunakan untuk notifikasi, bisa kode HTML atau kode Javascript. Sebagai contoh apabila ingin menggunakan gambar sebagai notifikasi maka anda menaruh kode HTML elemen gambar pada lokasi tersebut.
  
  Contoh :
  
  <div id="contentBoxPromo">
  
  <img src="contoh_source_image.jpg" border="0" />
  
  </div>
  
  Pada kode :
  
  --elmWidth:300px;
  --elmHeight:380px;
  --elmAlign:center;
  
  Merupakan konfigurasi untuk lebar elemen, tinggi elemen dan posisi elemen. Silakan anda sesuaikan konfigurasi tersebut sesuai dengan kebutuhan dari dimensi popup notifikasi yang ingin anda tampilkan.
  
  Pada kode :
  
  var useTimer='21';
  var titleBox='Notifikasi';
  
  Merupakan kode untuk mengatur waktu hitungan mundur dan judul box popup notifikasi. Apabila tidak ingin menggunakan waktu penghitung mundur maka silakan variabel kode useTimer dikosongkan saja.
  
  var useTimer='';
  Contoh apabila tidak ingin menggunakan waktu penghitung mundur.

Demikian artikel blog tentang Cara Membuat POPUP Notifikasi Keren Pada Halaman Blog terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, popup, alert, promosi, iklan, kotak, sembul, tampilan, peringatan, warning, box, html, javascript, jquery, css, notify, notifikasi, visual, window, cara, pembuatan, membuat, pemasangan, pasang, copy, download, gratis, bebas, free, timer

Incoming Search Term

Cara menampilkan kotak popup menggunakan elemen div, kotak popup notifikasi buat sendiri, cara memasang popup alert notifikasi pada halaman blogger, cara bikin popup iklan menggunakan timer, popup notifikasi kode css keren unik dan menarik super premium, update cara baru membuat popup tanpa javascript, kotak layar muncul ditengah halaman blog, bikin pengumuman artikel blog tampil pertama kali, cara gampang bikin iklan dengan timer waktu, kotak promosi tampil ditengah layar dengan timer, menutupi layar untuk like facebook, kotak subscribe facebook youtube blog pada halaman blog, kotak like facebook ditengah monitor, kotak alert untuk subscribe facebook