Cara Membuat Iklan PopUp Melayang di Tengah Artikel/Postingan

Apa itu iklan PopUp?
Iklan popup adalah iklan yang di buat melayang pada blog atau web, tujuan nya adalah agar pengunjung dapat langsung melihat iklan bahkan otomatis meng-klik apabila iklan yang di tampilkan sesuai dengan apa yang sedang di cari pengunjung tersebut dari blog/web kita karena iklan bergerak/melayang di atas halaman atau artikel blog/web.Terkadang ada juga pengunjung yang tidak suka dengan kehadiran iklan popup tersebut,selain mengganggu penampilan blog dan membuat loading blog/web menjadi lama alias lemot jika koneksi pengunjung tersebut juga lemot. Oleh karena itu saya akan membagikan PopUp screen yang user-friendly, di bandingkan iklan yang terlalu banyak di tampilkan pada blog/web,dan yang ujung-ujung nya pengunjung pun kurang memperhatikan apalagi meng-klik iklan tersebut akan tetapi kita bisa menampilkan secara fokus iklan tersebut pada pengunjung.
PopUp Ads Screen menggunakan kode css dan sedikit sentuhan kode HTML. Buat anda yang tertarik dengan PopUp Ads Screen ala MonosBit ini silakan disimak tutorialnya


Cara pemasangan nya:
  1. Lig-in ke Blogger.
  2. Pilih Rancangan lalu klik Edit HTML.
  3. Tekan Ctrl + F untuk mempermudah pencarian dan cari kode berikut </Head> , atau sobat bisa juga meletakan kode script pada tambahkan widget pada rancangan/tata letak, untuk mempermudah pemasangan/penginstalan.

Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head> , namun apabila sudah maka tidak usah di pasang lagi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js' type='text/javascript'></script>

Copy-Paste kode di bawah ini tepat di bawah Kode <Body>.
    <!-- Start : Iklan Atas -->
    <style>
    #adstopbar {
    height:25px;
    cursor:move;
    width:auto;
    background: #005094 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxvUOifxuF3NafCozCyi7wfkjM3S3MhIgo5wUwHAcYMLin3dMQmUIK0VkHDxc0UGrkRIrGoN-O5owjixHNp3TiFa3YKm47Avj4WwfJzfb2SpnBjwxdYLZIDzRf2JV__p3JAS3j0AAy_A/s1600/1.jpg);
    background-repeat:repeat-x;
    text-align:left;
    box-shadow: inset 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius:4px 4px 0 0;
    background-color:#005094;
    }
    #adsplace {
    height:auto;
    margin:0 auto;
    width: auto;
    background:#fff;
    border-bottom:2px #005094 solid;
    border-right:2px #005094 solid;
    border-left:2px #005094 solid;
    text-align:Center;
    padding:2px;
    }
    #adspace {
    opacity:1.0;
    height:auto;
    width:auto;
    position: fixed;
    top: 20%;
    left: 40%;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:+99999;
    font-size:13px;
    }
    </style>
    <script>
    $(document).ready(function() {
    $("#adspace").draggable();
    $("#adspace").show("clip");
    $("#adsClose").click(function(){
    $("#adspace").hide("explode");});
    });
    </script>
    <div id='adspace' style="display:none;">
    <div id='adstopbar'>
    <img align='left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGdDwoYXry4tRn4_bx7jDPTBVCCvwRPENSqJlZeidTzxf0CvjQr3_ae5uePbpQFCY-PtspVXfEVxq1cMj9_NR3MB7ryhzJHCD5n-eQyME6EZcXy03ht4XqoTECWZpz2Dl26UvoY-ealUY/s1600/2.jpg' style='width:24px;height:24px;padding-left:2px;'/><span style='color:#fff;font-size:17px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;margin-left:5px;'>Sponsor</span> <span style='color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:2px'>
    <img id='adsClose' title="Close" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrC_DI2KepFPPdVsNrk_Mkz9sgITmWUEjct8DIsUBmZCGKLToe1Sb3Sfer-VV3rrffSN7NkdTOyz4pM3TdwwlGYJz-01aH6Pq-qKhyphenhyphenINR17HuOPuMvOzfJ0xSHI9GH-Vu44UX2_YqqlYY/s1600/3.gif' width="16px" height="16px" style="cursor:pointer;"/>
    </span>
    </div>
    <div id='adsplace'>
    <!-- Begin Ads -->
    PASANG KODE ANDA DISINI !!!
    <!-- End Ads -->
    </div></div>
    <!-- End : Iklan Atas -->
Note: Ganti tulisan PASANG KODE ANDA DISINI !!! dengan kode iklan anda yang didapatkan dari situs penyedia iklan yang anda pilih atau kode HTML/Javascript jika tidak bisa silahkan parse dulu kode iklan dersebut di sini...
Klik "Save" dan lihat hasilnya.

Taraaa iklan popup anda sudah berhasil di pasang,.Semoga artikel saya kali ini dapat membantu dan bermanfaat untuk sobat blogger, kurang lebih nya mohon di maklumi karena tidak ada manusia yang sempurna,semua pasti punya kesalahan. Silahkan tinggalkan komentar di bawah untuk bertanya atau bisa sharing mengenai tema pada artikel saya ini. Terima kasih atas kunjungan nya. :)

Related Posts

Load comments

Comments