Cara Membuat Pop Up Box Keren Dan Responsive Di Blogspot



Hidayatimur ~ Hallo sobat timur, pada artikel kali ini saya akan membagikan cara membuat popup box notifikasi. 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 lainya yang berkaitan. Tapi resiko penggunaan popup ini biasanya tidak friendly terhadap blog kita. Sama sjaa kebanyakan pengunjung tidak suka dengan popup, terutama auto pop up.

Karna demikian saya membuat artikel ini agar meminimalisir bounce rate yang disebabkan oleh popup yang digunakan. Berikut ini adalah popup yang bisa anda gunakan pada blog atau website anda.

Simak Cara Berikut Dengan seksama Agar Tidak Terjadi kesalahan


  1. Masuk ke dashboard blogger
  2. Pilih Menu Tema 
  3. Tekan Tombol Edit HTML
  4. Tambahkan Kode CSS di bawah ini dan Letakan tepat di atas kode ]]></b:skin> 


#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;
}

5. Langkah Kedua Letakan kode Di bawah ini tepat di Atas kode </body>


<script type='text/javascript'>
$(document).ready(function() {
  $(&#39;#faropop&#39;).click(function() {
 $(&#39;#faropop&#39;).fadeOut(&#39;500&#39;);
  });
});
</script>

6. Simpan Template
7. Setelah Selesai , Pasang kode Dibawah ini Ke Dalam Widget Blog anda

<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='Masukkan link tujuan' target='_blank'><img style="width: 300px; height: 200px;" alt='Give Away!' src='Masukkan link gambar'/></a>
  </div>
</div>


Pesan Kecil :

  • Kode Bewarna Merah Isikan dengan Url Gambar
  • Kode Bewarna Biru Isikan Dengan link tujuan

Semoga dengan artikel ini anda dapat menimalisir bouce rate yang disebabkan oleh pop up yang sangat tidak friendly.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel