Membuat Pop Up Melayang Pada Blogger

Pada sebuah website tentu anda pernah melihat pop up iklan ataupun lainnya yang tiba-tiba muncul hadir pada saat anda mengunjungin website tersebut. Itulah yang akan kita bahas bagaimana membuat nya pada blogger. 

Banyak sekali tujuannya membuat pop up tersebut pada blogger, ada yang bertujuan untuk iklan, informasi ataupun lainnya. Jika anda ingin mencobanya bisa simak artikel tersebut. Namun sebelum anda menerapkan pada template anda ada baiknya anda backup/cadangkan template anda apabila pada saat penerapan script gagal anda bisa memulihkannya kembali. Kira-kira seperti ini hasilnya :

Jika anda belum tahu bagaimana cara mencadangkan template anda bisa baca Cara Mencadangkan & Memulihkan Template Pada Blogger terlebih dahulu. Jika sudah paham anda bisa langsung ke langkah-langkah bagaimana pemasangan script untuk membuat pop up pada blogger.

CARA ISNTALASI PEMASANGAN POP UP

1. Anda masuk ke 'Tema'. Lihat gambar berikut :
   
2. Lalu pilih 'Sesuaikan' Klik lagi 'Edit HTML' (Untuk berjaga-jaga dari masalah yang timbul pada saat pemasangan sebaiknya anda backup terlebih dahulu template anda). Lihat gambar berikut :
   
3. Lalu cari kode ></b:skin> (Cara alternatif dengan menekan tombol Ctrl+F) dan masukkan script CSS dibawah ini tepat diatas kode tersebut :
   

   /*Widget Pop Up Card*/
   #marwanzaen {
       z-index: 1000;
       position: fixed !important;
       top: 100px;
       left: 365px;
       width: 700px;
       margin-left: -350px;
   }
   #belakang {
       left: 0px;
       background: #000 none repeat scroll 0% 0%;
       opacity: 0.6;
       position: fixed;
       z-index: -1;
       top: 0px;
       height: 100%;
       width: 100%;
   }
   .tulisan {
   font-size: 20px;
   background: #FFF none repeat scroll 0% 0%;
   border-radius: 10%;
   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: initial;
   top: -15px;
   right: -20px;
     collor:#344;
     return:false;
   }
   .isinya {
         border-radius: 3px;
       box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
       width: 700px;
       height: 400px;
       border: 4px solid #FFF;
   }

   Lihat gambar berikut :
   
4. Jika sudah cari lagi kode </body> lalu masukkan kode Javascript dibawah ini tepat diatas kode tersebut :
   

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

   Lihat gambar berikut :
   
5. Setelah kedua script tersebut dipasang. klik 'Save'
6. Kemudian pilih tab 'Tata Letak' . Lihat gambar berikut :
   
7. Buat widget baru dengan pilih 'HTML/Javascript'.  Lihat gambar berikut :
   
8. Lalu masukkan kode HTML dibawah ini pada bagian kolom 'Konten' saja biarkan 'Judul'nya dikosongkan saja.
   

   <div id='marwanzaen'>
   <div id='belakang'></div>
   <div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
   <div class="kotak_iklan">
   <a href="https://bit.ly/3fxlKRi" target='_blank' title="Pasang Iklan"><img style="border: none;" src="https://scontent.fbdo9-1.fna.fbcdn.net/v/t1.6435-9/206255476_906341289946213_9218428961293926384_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeGBL8fjx48wg-C3eFXoUtz369q4pXmBy5fr2rileYHLl-WTfGQH71GsWgegsLQepjqhyGr_MUX52NHcFaNB3gkR&_nc_ohc=dlUjYCpWubsAX8NkJr4&_nc_ht=scontent.fbdo9-1.fna&oh=7a94c89aba5c5a7e1900b54b22f0aaff&oe=613066CB"disney+ hotstar" title='Streaming Online' width="125" height="125" /></a>
   </div>

   
   Lihat gambar berikut :
   
9. Setelah itu 'Save'.
   https://bit.ly/3fxlKRi : ganti dengan link tujuan anda 
   https://scontent.fbdo9-1.fna.fbcdn.net/v/t1.6435-9/206255476_906341289946213_9218428961293926384_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeGBL8fjx48wg-C3eFXoUtz369q4pXmBy5fr2rileYHLl-WTfGQH71GsWgegsLQepjqhyGr_MUX52NHcFaNB3gkR&_nc_ohc=dlUjYCpWubsAX8NkJr4&_nc_ht=scontent.fbdo9-1.fna&oh=7a94c89aba5c5a7e1900b54b22f0aaff&oe=613066CB : ganti dengan gambar anda yang akan ditampilkan 
   Streaming Online : ganti dengan judul iklan anda.
10. Sampai disini sudah selesai proses pemasangan pop up pada blogger.

Terima kasih anda telah membaca artikel Membuat Pop Up Melayang Pada Blogger. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: