Showing themes that are Seo, fast loading, light, fresh and professional.



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.


Related Posts

Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel