» » Transformer Popup Window For Adsense Blogger

Transformer Popup Window For Adsense Blogger

    Label: Blogspot




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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8uKEgDvtwrsBmKfUPlrRGRcJzKVS3pVDdS6z56koQWrZg74yQ9TFPZ5zkpgF91UdIh5dXRbtZ1n8MSEdzw-LGnOEOEA4dbECH1CEGqGfC4qfwVoVyI1eRWl7suAFQlHgMk97_4TZL4Q/s800/monozcore_bumblebee_car.png&#39;);

    background-repeat:no-repeat;

    }



    .bumblebee:hover {

    display: block;

    height:269px;

    width:200px;

    background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0PD5tlBjCtkiuEJMzfoO8_P-dGQMZxH_9VQSwomleyaSTWnSblS0qwr8FK_s4DOaUfcsFdfxrX6Dd94xlaFpNhekSdz8JdQZ-QVDLIg4tuCKVTG5t_rVmF_Cs3vqJniQAKO_FriOo07E/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3qWHjmh7BxwITAaOZEXoeXZvHWSwW1Ot7JNZ0b06KuZj2YZ8HbIiY19CZP7OHAe9WufRaaPkbzgd7M_yai66l3FNIxWibPenbL0llQ9R8HgDxUfA5UC93Ztfpun0LPv_t7WchnnvcZc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8uKEgDvtwrsBmKfUPlrRGRcJzKVS3pVDdS6z56koQWrZg74yQ9TFPZ5zkpgF91UdIh5dXRbtZ1n8MSEdzw-LGnOEOEA4dbECH1CEGqGfC4qfwVoVyI1eRWl7suAFQlHgMk97_4TZL4Q/s800/monozcore_bumblebee_car.png');

    background-repeat:no-repeat;

    background-position:50%;

    }



    .bumblebee:hover {

    display: block;

    height:200px;

    width:auto;

    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0PD5tlBjCtkiuEJMzfoO8_P-dGQMZxH_9VQSwomleyaSTWnSblS0qwr8FK_s4DOaUfcsFdfxrX6Dd94xlaFpNhekSdz8JdQZ-QVDLIg4tuCKVTG5t_rVmF_Cs3vqJniQAKO_FriOo07E/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3qWHjmh7BxwITAaOZEXoeXZvHWSwW1Ot7JNZ0b06KuZj2YZ8HbIiY19CZP7OHAe9WufRaaPkbzgd7M_yai66l3FNIxWibPenbL0llQ9R8HgDxUfA5UC93Ztfpun0LPv_t7WchnnvcZc/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....


    Transformer Popup Window For Adsense Blogger 4.5 5 Unknown Buat para blogger mengikuti program adsense dari google merupakan suatu hal yang wajib untuk diikuti karena dengan program ini anda bisa ...


    Label:

    Tidak ada komentar:

    Posting Komentar