Blog Setting
Tautan Sponsor
Unlock Blog / Website Using Free Proxy
URL : www.
« »
« »
« »
« »
« »

Transformer Popup Window For Adsense Blogger

Buat para blogger mengikuti program adsense dari google merupakan suatu hal yang wajib untuk diikuti karena dengan program ini anda bisa menghasilkan uang dari blog anda. Pada kesempatan kali ini saya akan membahas salah satu trik untuk meningkatkan pendapatan uang anda dari google adsense. Tertarik....??? silakan disimak ulasannya.
 
Tentu anda sudah kenal dengan bumblebee salah satu jagoan transformer yang bisa berubah menjadi mobil sport camaro dengan warna kuningnya yang menawan. Widget blog yang saya olah kali ini akan menggunakan karakter bumblebee untuk memikat pengunjung di blog anda dengan sedikit sentuhan jquery untuk memfokuskan iklan yang ditampilkan. Gimana kerenkan...simak terus tutorialnya biar tambah oke blognya sekalian jika berkenan saya numpang backlink-nya ya..... :-)

Kita lanjutkan tutorialnya....

Penempatan Kode Pada Template Blog
  1. Login ke blog anda kemudian klik tab design setelah itu klik page element.
  2. Klik Edit HTML kemudian centang Expand Widget Templates.
  3. Cari kode </Head> (dibrowser gunakan Ctrl+F untuk membuka kotak pencarian).
  4. Masukan kode berikut ini diatas kode </Head>
    The Code...
    <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>

    <style>
    #bublebeeid {
    position:fixed;
    bottom:30px;
    left:0px;
    z-index:1;
    }

    .bumblebee {
    display: block;
    height:89px;
    width:174px;
    background: url(&#39;https://lh6.googleusercontent.com/-olH2RhPhZ9E/Tkfos20HvJI/AAAAAAAAAec/MCy0VluuEjA/s800/monozcore_bumblebee_car.png&#39;);
    background-repeat:no-repeat;
    }

    .bumblebee:hover {
    display: block;
    height:269px;
    width:200px;
    background: url(&#39;https://lh6.googleusercontent.com/-Nsg6_W56KzQ/TkfdmBpuPlI/AAAAAAAAAeY/kfgRYM_7u_M/s800/monozcore_bumblebee.png&#39;);
    background-repeat:no-repeat;
    background-position: 0 65px;
    }
    </style>

    <style type='text/css'>
    #transBG {
    background-color:#000;
    z-index:100;
    display:none;
    position:fixed;
    opacity: 0.95;
    }
    #popup {
    width:auto;
    height:auto;
    padding:10px;
    z-index:101;
    background-color:#fff;
    display:none;
    position:fixed;
    color:White;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    box-shadow: 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#658da0;
    background: -moz-linear-gradient(center left, rgba(255,249,71,0.55), rgba(191,186,53,0.55) 50%, rgba(255,249,71,0.55));
    }
    </style>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;a[name=mod]&#39;).click(function(e) {
    e.preventDefault();
    var id = $(this).attr(&#39;href&#39;);
    var bgHeight = document.documentElement.clientHeight;
    var bgWidth = document.documentElement.clientWidth;
    $(&#39;#transBG&#39;).css({&#39;width&#39;:bgWidth,&#39;height&#39;:bgHeight});
    $(&#39;#transBG&#39;).fadeIn(&quot;fast&quot;);
    var winH = document.documentElement.clientHeight;
    var winW = document.documentElement.clientWidth;
    $(id).css(&#39;top&#39;, winH/2-$(id).height()/2);
    $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);
    $(id).slideDown();
    });
    $(&#39;#close&#39;).click(function (e) {
    e.preventDefault();
    $(&#39;#transBG, #popup&#39;).fadeOut(&quot;slow&quot;);
    });
    $(&#39;#transBG&#39;).click(function () {
    $(this).fadeOut(&quot;slow&quot;);
    $(&#39;#popup&#39;).slideUp();
    });
    });
    </script>
  5. Cari kode <Body> kemudian masukan kode berikut ini dibawah kode tersebut. 
    The Code...
    <div id='popup'>Kode Adsense Anda. Jangan lupa untuk diparsing dahulu gunakan tool yang ada di menu atas kemudian pilih XML Parser untuk memparser kode adsense anda<br/>
    <img height='20' src='https://lh6.googleusercontent.com/-sv2b7Dk7Jjw/Tkl0cWunTHI/AAAAAAAAAJE/P4fyRcpO2Gk/s800/loadTrans.png' style='vertical-align:middle;' width='20'/>
    <span style='color:#fff;font-size:17px;text-shadow:black 0.1em 0.1em 0.1em'><blink> Recieving transmission ...</blink></span>&lt;/div&gt;
    <div id='transBG'/></div>
    <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'></script>
    <div align='center' id='bublebeeid'>
    <a class='bumblebee' href='#popup' alt='http://monozcore.blogspot.com' name='mod'/>
    </div>
    <br />
    <div align='center'>
    <a style='text-decoration:none;font-size:90%;' href='http://monozcore.blogspot.com/2011/08/transformer-popup-window-for-adsense.html' target='blank'>Add to your blog</a>
    </div>
  6. Silakan di save dan lihat hasilnya...
  7. Jangan lupa untuk memasukan kode google adsense anda ! 
 Penempatan Kode Pada Widget Blog
  1. Login ke blog anda kemudian klik tab design setelah itu klik page element.
  2. Klik Edit HTML kemudian centang Expand Widget Templates.
  3. Cari kode </Head> (dibrowser gunakan Ctrl+F untuk membuka kotak pencarian).
  4. Masukan kode berikut ini diatas kode </Head>
    The Code...
    <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>

    <style>
    #bublebeeid {
    padding-top:5px;
    }

    .bumblebee {
    display: block;
    height:89px;
    width:auto;
    background: url('https://lh6.googleusercontent.com/-olH2RhPhZ9E/Tkfos20HvJI/AAAAAAAAAec/MCy0VluuEjA/s800/monozcore_bumblebee_car.png');
    background-repeat:no-repeat;
    background-position:50%;
    }

    .bumblebee:hover {
    display: block;
    height:200px;
    width:auto;
    background: url('https://lh6.googleusercontent.com/-Nsg6_W56KzQ/TkfdmBpuPlI/AAAAAAAAAeY/kfgRYM_7u_M/s800/monozcore_bumblebee.png');
    background-repeat:no-repeat;
    background-position:50%;
    }
    </style>

    <style type='text/css'>
    #transBG {
    background-color:#000;
    z-index:100;
    display:none;
    position:fixed;
    opacity: 0.95;
    }
    #popup {
    width:auto;
    height:auto;
    padding:10px;
    z-index:101;
    background-color:#fff;
    display:none;
    position:fixed;
    color:White;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    box-shadow: 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#658da0;
    background: -moz-linear-gradient(center left, rgba(255,249,71,0.55), rgba(191,186,53,0.55) 50%, rgba(255,249,71,0.55));
    }
    </style>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;a[name=mod]&#39;).click(function(e) {
    e.preventDefault();
    var id = $(this).attr(&#39;href&#39;);
    var bgHeight = document.documentElement.clientHeight;
    var bgWidth = document.documentElement.clientWidth;
    $(&#39;#transBG&#39;).css({&#39;width&#39;:bgWidth,&#39;height&#39;:bgHeight});
    $(&#39;#transBG&#39;).fadeIn(&quot;fast&quot;);
    var winH = document.documentElement.clientHeight;
    var winW = document.documentElement.clientWidth;
    $(id).css(&#39;top&#39;, winH/2-$(id).height()/2);
    $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);
    $(id).slideDown();
    });
    $(&#39;#close&#39;).click(function (e) {
    e.preventDefault();
    $(&#39;#transBG, #popup&#39;).fadeOut(&quot;slow&quot;);
    });
    $(&#39;#transBG&#39;).click(function () {
    $(this).fadeOut(&quot;slow&quot;);
    $(&#39;#popup&#39;).slideUp();
    });
    });
    </script>
  5. Cari kode <Body> kemudian masukan kode berikut ini dibawah kode tersebut.
    The Code...
    <div id='popup'>Kode Adsense Anda. Jangan lupa untuk diparsing dahulu gunakan tool yang ada di menu atas kemudian pilih XML Parser untuk memparser kode adsense anda<br/>
    <img height='20' src='https://lh6.googleusercontent.com/-sv2b7Dk7Jjw/Tkl0cWunTHI/AAAAAAAAAJE/P4fyRcpO2Gk/s800/loadTrans.png' style='vertical-align:middle;' width='20'/>
    <span style='color:#fff;font-size:17px;text-shadow:black 0.1em 0.1em 0.1em'><blink> Recieving transmission ...</blink></span>&lt;/div&gt;
    <div id='transBG'/></div>
    <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>
  6. Klik tab design.
  7. Klik Add a Gadget kemudian pilih HTML/Javascript.
  8. Masukan kode berikut ini di kotak gadget tersebut.
    The Code...
    <div align="center" id="bublebeeid">
    <a class="bumblebee" href="#popup" alt="http://monozcore.blogspot.com" name="mod"></a>
    </div>
    <br />
    <div align="center">
    <a style="text-decoration:none;font-size:90%;" href="http://monozcore.blogspot.com/2011/08/transformer-popup-window-for-adsense.html" target="blank">Add to your blog</a>
    </div>
  9. Silakan di save dan lihat hasilnya...
  10. Jangan lupa untuk memasukan kode google adsense anda !
Untuk merubah lokasi gambar bumblebee anda tinggal mengganti koordinat gambar pada kode css-nya sehingga widget ini bisa disesuaikan dengan template blog anda.

Silakan anda mem-follow blog ini supaya apabila ada perubahan atau perbaikan artikel ini anda bisa segera mendapat pemberitahuan melalui email. Apabila masih ada kesulitan dalam menerapkan widget ini silakan anda tuliskan permasalahan anda di kotak komentar.
Semoga artikel ini bisa bermanfaat. Terima Kasih....
    FB Users () Comment | Read Users (9) Comment
    Print Print DMCA.comProtected by Copyscape Online Copyright CheckerMyFreeCopyright.com Registered & Protected

    Comments
    9 Comments
    1. aziscs1 says:
      August 24, 2011 at 11:16 PM

      Mantap Sob Toturialnya keren banget

    2. xpentx says:
      February 29, 2012 at 11:59 PM

      gmn cara cari kode gogle adsen'nya om?

    3. Monoz Core says:
      March 1, 2012 at 9:22 AM

      kode adsense didapat setelah sobat mendaftar di salah satu penyedia adsense, coba daftar seperti di google adsense, adsensecamp, kumpulblogger dan sitti.

    4. xpentx says:
      March 2, 2012 at 1:33 PM

      trus habis saya masuk di kumpulblogger.com langkah saya slanjutnya hrus ngapain om?

    5. Monoz Core says:
      March 2, 2012 at 2:27 PM

      Setelah daftar di kumpulblogger lanjutkan masuk ke menu utama akun sobat di kumpulblogger kemudian klik "Script Text Advertising untuk Blog anda" kemudian pilih jenis dan ukuran iklan yang ingin ditampilkan, tinggal ke scroll ke bawah. Setelah itu copy-paste kode scriptnya dan masukan di dalam kode <div id='popup'> oke sob gampang kan....???

    6. xpentx says:
      March 2, 2012 at 3:31 PM

      om, saya kn udah dftar jg di adsense camp, trus caranya agar banner adsense bisa terletak disamping kanan kayak blog ini gmn caranya om?

    7. Monoz Core says:
      March 2, 2012 at 6:49 PM

      Pasang kode css diatas </Head>
      <style>
      #melayang_atas {
      position:fixed;_position:absolute;top:5px; right:5px;
      clip:inherit;
      _top:expression(document.documentElement.scrollTop+
      document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

      ::-moz-selection {
      background: none;
      color: #FF0000;
      }
      </style>

      trus pasang kode html di bawah <Body>
      <div align='right' id='melayang_atas'>
      taruh kode disini
      </div>

    8. xpentx says:
      March 14, 2012 at 5:49 PM

      "body>" gak ketemu om, ketemunya yang ini "/body>

      coba tk pasang dibawah /body> , eh malah iklannya ada di pojok bawah, gak kayak punya om monoz

    9. Monoz Core says:
      March 14, 2012 at 8:00 PM

      Jangan di bawah /body> mending di taruh di atas nya aja...



    :)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

    DoFollow Blog

    Post a Comment | Post an Email | Post an Alexa Review

    Related Posts Plugin for WordPress, Blogger...