×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

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

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial