Cara Membuat PopUp Ads Screen

Optimalkan google adsense atau ads (iklan) dari sponsor anda dengan memasang PopUp AdsScreen yang user-freindly. Memang terkadang kita tidak terlalu suka dengan penampilan iklan yang berlebihan pada blog yang kita kunjungi, selain menggangu penampilan blog terkadang juga membuat waktu loading yang bertambah lama. Oleh sebab itu saya mencoba membuat PopUp Ads Screen yang user-friendly, ga terlalu banyak iklan yang menggangu tapi bisa memperlihatkan secara fokus info dari sponsor kepada pengunjung blog... Dengan memasang PopUp Ads Screen ini selain memberikan informasi tambahan dari sponsor blog, pengunjung juga bisa memberikan support kepada blog yang dikunjunginya dengan mengklik dan melihat iklan yang terpasang pada blog tersebut.
PopUp Ads Screen menggunakan kode css dan sedikit sentuhan kode HTML. Buat anda yang tertarik dengan PopUp Ads Screen ala MonozCore ini silakan disimak tutorialnya... Oke jangan lupa untuk memberikan support-nya ya... dengan mengklik iklan yang ada di blog ini. Trims

Langkah 1
  • Login ke blog anda...
  • Klik "Design" kemudian klik "Edit HTML" Setelah itu centang "Expand WidgetTemplates".
  • Cari kode  </Head> kemudian letakan kode berikut ini di atas kode </Head>.
    <style>
    #topbar {
    height:25px;
    width:auto;
    background: #005094 url(&#39;https://lh6.googleusercontent.com/-25yI9RdlTQM/TkWH5CaAh3I/AAAAAAAAAd4/tl00tzlBc80/s800/sidebar-h2.jpg&#39;);
    background-repeat:repeat-x;
    text-align:left;
    }


    #adsground {
    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;
    }


    #headlineatas {
    opacity:1.0;
    height:auto;
    width:auto;
    position:fixed;
    top:30%;
    left:40%;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:9999;
    font-size:13px;}
    </style>
    <script type='text/javascript'>
    function getValue()
    {
    document.getElementById(&#39;headlineatas&#39;).style.display = &#39;none&#39;;
    }
    </script>
  • Cari kode <body> kemudian letakan kode berikut ini setelah kode <body> .

  • <div id='headlineatas'>
    <div id='topbar'>
    &lt;img align=&#39;left&#39; style=&#39;padding-left:2px;&#39; src=&#39;http://icons.iconarchive.com/icons/deleket/folder/24/Mozilla-Thunderbird-icon.png&#39; /&gt;
    &lt;span style=&#39;color:#fff;font-size:17px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em&#39;&gt;Headlines&lt;/span&gt;
    &lt;span style=&#39;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&#39;&gt;
    &lt;target=&#39;_blank&#39; onclick=&#39;getValue()&#39;&gt;&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNlYV-nbaqLpVlp61p2OjWBgOkEYNAVgTyheHsdldHJc5Zi-orfSmaw4FMxUlNTImg3LVMjyRBkmtc0R11hh4swUx_p0XYq7xN08qJ-DV95FRpEVM_znDc0HAzu_qR_6iGnD78_6msSU/s800/closeX.png&#39; /&gt;&lt;/target=&#39;_blank&#39;&gt;&lt;/span&gt;
    </div>
    <div id='adsground'>

    <!-- Begin: http://adsensecamp.com/ -->
    <script src="http://adsensecamp.com/show/?id=a6A3lQzWqO0%3D&cid=TlffQoaJN%2F0%3D&chan=MLedDVKg%2FkU%3D&type=5&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript">
    </script>
    <!-- End: http://adsensecamp.com/ -->

    </div></div>

  • Ganti kode yang berwarna biru dengan kode google adsense atau kode ads (iklan) yang anda peroleh dari penyedia layanan iklan anda. Sebelum anda menaruh kode iklan anda sebaiknya kode tersebut di parsing terlebih dahulu, silakan gunakan tool ini untuk memparsing kode iklan anda : Blog xml parser
  • Klik "Save Template" dan lihat hasilnya.





  • Baca juga artikel terkait di bawah ini...