Cara membuat popup box keren pada blogspot

Faronesia.com - Hay sahabat faronesia, pada posting kali ini kita akan membahas mengenai tutorial membuat popup box. Nah, seperti yang sudah kita ketahui bersama, popup digunakan pada sebuah website untuk mendorong pengguna melakukan sesuatu yang kita inginkan, seperti berlangganan, klik like facebook, follow twitter maupun periklanan dan sebagainya. Tapi sayangnya, resiko penggunaan popup ini biasanya tidak user-friendly. Artinya adalah, kebanyakan pengunjung tidak suka dengan popup, terutama autopopup.

Maka dari itu pada tutorial ini saya telah menyiapkan bahan dengan desain yang sesimple dan senyaman mungkin untuk pengunjung, agar meminimalisir bounce rate yang disebabkan oleh popup yang digunakan. Berikut ini adalah popup yang bisa anda gunakan pada blog atau website anda.

Agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara membuat popup box hanya menggunakan HTML dan CSS

  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode ]]></b:skin> lalu tambahkan kode CSS dibawah ini tepat diatas kode tadi
#faropop {
    z-index: 1000;
    position: fixed !important;
    top: 100px;
    left: 50%;
    width: 300px;
    margin-left: -160px;
}
#farobackpop {
    left: 0px;
    background: #000 none repeat scroll 0% 0%;
    opacity: 0.6;
    position: fixed;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
}
.tutuppop {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
  collor:#344;
  return:false;
}
.isipop {
      border-radius: 3px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 300px;
    height: 200px;
    left: 50%;
    border: 4px solid #FFF;
}
  • Cari kode </body> lalu tambahkan kode javascript dibawah ini tepat diatas kode tadi
<script type='text/javascript'>
$(document).ready(function() {
  $(&#39;#faropop&#39;).click(function() {
 $(&#39;#faropop&#39;).fadeOut(&#39;500&#39;);
  });
});
</script>
  • Setelah itu simpan template
  • Selanjutnya, pasang kode HTML berikut ini pada widget blog
<div id='faropop'>
<div id='farobackpop'></div>
<div class='tutuppop' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
<div class='isipop'><a href='https://www.faronesia.com/p/yamaha-mataram-sakti.html' target='_blank'><img style="width: 300px; height: 200px;" alt='Give Away!' src='https://1.bp.blogspot.com/-ZXHMwzlX6D4/XarE2B9NpJI/AAAAAAAAAGM/ZrH_tHelftcStxvbWQceVPjxCHexwFblACLcBGAsYHQ/s1600/1571468912-picsay.png'/></a>
  </div>
</div>
  • Link yang berwarna merah adalah link tujuan, silahkan ganti
  • Link yang berwarna kuning adalah gambar, silahkan ganti
  • Selesai, lalu terapkan/simpan
Demikianlah mengenai Cara membuat popup box hanya menggunakan HTML dan CSS semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel