5 Langkah Mudah Membuat Ads Pop Up

Selamat datang di The Royal Moringa. Ini adalah postingan pertama saya di awal tahun. Setelah postingan ini, saya akan terus memberikan update artikel-artikel terbaru bagi anda. Pada kesempatan kali ini saya akan membagikan informasi kepada anda mengenai cara menampilkan ads pop up di halaman website maupun blog anda. Ads pop up atau pesan iklan akan muncul pada saat pengunjung datang pada halaman blog anda. Dengan ini dapat dipastikan bahwa pengunjung pasti akan melihat iklan tersebut. Hal ini berbeda dengan iklan yang biasanya ditampilkan di sisi kiri maupun kanan sidebar anda. Orang-orang cenderung tidak memperhatikan iklan yang ada disana. Langsung saja kita simak langkah-langkah membuatnya.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > cari ]]></b:skin> kemudian copy dan paste kode CSS berikut diatasnya

#backscreen {
          position: absolute;
          z-index: 999;
          background-color: transparent;
          left: 0;
          top: 0;         
          display: block;
          width:100%;
          height:100%;
}
#popup .window {
   z-index: 9999;
   border-radius: 8px;
   text-align: center;
 }

@media only screen and (max-width:595px){
#popup{width: 315px;left:0.5em;}
}

2. Setelah itu silakan anda cari </head> kemudian copy dan paste kode script berikut diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 var id = '#message';  
 //Get the screen height and width
 var backscreenHeight = $(document).height();
 var backscreenWidth = $(window).width(); 
 //Set heigth and width to mask to fill up the whole screen
 $('#backscreen').css({'width':backscreenWidth,'height':backscreenHeight});  
 //transition effect
 $('#backscreen').fadeIn(500);
 $('#backscreen').fadeTo("slow",0.9); 
 //Get the window height and width
 var winH = $(window).height();
 var winW = $(window).width();                
 //Set the popup window to center
 $(id).css('top',  winH/2-$(id).height()/2);
 $(id).css('left', winW/2-$(id).width()/2);   
 //transition effect
 $(id).fadeIn(2000);      
 //if close button is clicked
 $('.window .close').click(function (e) {
 //Cancel the link behavior
 e.preventDefault();
 $('#backscreen').hide();
 $('.window').hide();
 });
//if mask is clicked
 $('#backscreen').click(function () {
 $(this).hide();
 $('.window').hide();
 });
 });
</script>

3. Setelah itu menuju pada bagian <body> dan ads pop up tersebut akan kita letakkan setelah header dan sebelum featured posts/postingan terbaru anda > Copy dan paste kode HTML berikut diatas <div id="content-wrapper"> atau jika tidak menemukan silakan letakkan sebelum elemen postingan terbaru anda

<!-- popup message start -->
<div id="popup" style="left:19.5em;position:fixed !important;z-index:9999;width:814px;">
<div id="ads" class="window" style="display:block;">
<div id="cross" style="margin-top:-24px" >
<a href="#" class="close agree" style="font:18px/1 FontAwesome;margin-left:43em;color:rgb(179, 179, 179);"><i class="fa fa-times" aria-hidden="true"></i></a></div>
<img src="XXX"/>
</div>
<div id="backscreen">
</div>
</div>
<!-- popup message end -->

4. Silakan anda ganti XXX dengan url gambar atau iklan yang akan anda tampilkan. Anda boleh menampilkan iklan/gambar dengan ukuran berapapun tetapi untuk mendapatkan tampilan yang responsive, saya menyarankan anda tidak menggunakan gambar/iklan dengan ukuran lebar lebih dari 400px.

5. Save theme dan lihat hasilnya

Nah, supaya pembaca tidak risih atau merasa terganggu dengan tampilan iklan yang akan kita tampilkan, saya menambahkan tombol silang (x) atau close yang dapat mempermudah pembaca untuk menutup iklan tersebut. Keistimewaan lainnya adalah pengguna tidak hanya bisa menutup iklan melalui close button tetapi bisa juga klik disembarang tempat. Adanya ads pop up dapat mempermudah anda dalam mengiklankan produk tertentu. Bagaimana? Apakah anda puas dengan hasil yang ditampilkan? Terima kasih telah membaca & jangan lupa terus update dengan artikel terbaru kami.

The Royal Moringa

5 Langkah Mudah Membuat Ads Pop Up

Post a Comment

0 Comments

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Categories

Footer Menu Widget

The Royal Moringa

5 Langkah Mudah Membuat Ads Pop Up

You may like these posts

Post a Comment

0 Comments

Social Plugin

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Categories

Footer Menu Widget