Cara Membuat Popup Box Keren Untuk Blogger

Halo rekan blogger, jumpa lagi nih dengan admin, sesuai judul, kali ini admin akan membagikan kepada kalian, cara membuat popup box keren pada blogger.

Popup box itu adalah, sebuah pesan seperti notifikasi yang nantinya akan muncul pada halaman beranda blog kalian.

Popup ini bisa kalian isi dengan pesan yang ingin kalian sampaikan untuk pengunjung blog, entah itu pesan selamat datang, ataupun yang lainnya, itu bisa kalian isi sesuai keinginan kalian saja.

Untuk caranya sangat mudah, silahkan kalian ikuti langkah-langkahnya dibawah ini.

Membuat Popup Box Keren Pada Blogger

1. Masuk ke dashboard blogger.

2. Kemudian klik tab tema dan pilih Edit HTML 

3. Selanjutnya kalian cari kode ]]></b:skin> 

4. Kemudian copy kode css dibawah ini dan paste sebelum kode yang saya sebutkan diatas.

  #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. Salin kode dibawah ini dan pastekan sebelum 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. Silahkan kalian pasang kode dibawah ini pada widget blogger kamu.

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

8. Selesai kemudian buka blog kalian, dan lihat hasilnya.

Penjelasan kode html diatas : 

-

• Untuk Link tujuan kalian ganti dengan link yang ingin kalian tuju, bebas.

• Dan Link gambar ganti dengan link gambar milik kalian.

:: :: ::

Nah itulah sobat caranya, sangat mudah kan, semoga artikel ini bermanfaat. Terimakasih

Klik Tombol Dibawah Untuk Menuju Link Anda

CONTINUE