Membuat Kotak Iklan Dengan Efek Mantul

Posted in Labels: AdSense, JQuery | Friday, March 16, 2012 [ 7:00 AM ]

Home » AdSense , JQuery » Membuat Kotak Iklan Dengan Efek Mantul

Banyak cara menuju roma... banyak cara pula menampilkan adsense atau iklan dari sponsor blog sobat dengan cara yang unik dan menarik, salah satunya yaitu dengan cara membuat efek pantul pada saat blog ditampilkan. Cara ini bisa membantu meningkatkan jumlah klik adsense sehingga otomatis penghasilan blog dari adsense juga bertambah.

Preview : Demo Postingan

Perhatian : Sebelum mencoba trik ini ada baiknya terlebih dahulu membackup template sobat untuk menghidari hal-hal yang tidak diinginkan !!!...

Cara Pemasangan :

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // animasikan nilai top saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
    $(this).parent().slideUp(800, "easeOutBounce");
    return false;
    });
    });
    </script>
    <style>
    #kotak-pesan{
    position:fixed !important;
    position:absolute; /* IE6 */
    top:-900px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:250px;
    height:250px;
    padding:10px;
    background:#FFB200;
    border:2px solid #fff;
    font:normal 1em Cambria,Georgia,Serif;
    color:#111;
    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
    box-shadow:0px 1px 3px rgba(0,0,0,0.4);
    }
    #kotak-pesan a.close{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#FFB200;
    font:bold 16px Arial,Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#fff;
    border:2px solid #fff;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:22px;
    cursor:pointer;
    }
    </style>

Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <Body> tersebut.

   <div id='kotak-pesan'>
    DISINI KONTEN ADA,

    Bisa Iklan,

    Dan Lain Lain

    Sesuai yang sobat inginkan
    <a class='close' href='#'>×</a>
    </div>

| Blog Tools

- Keterangan :
- Kode yang berwarna merah merupakan kode script jquery jika sobat sudah menggunakan kode script jquery kode ini jangan pasang lagi.
- Kode yang berwarna biru merupakan settingan ukuran lebar, tinggi dan warna background. Silakan sesuaikan dengan keinginan sobat.
- Teks yang berwarna ungu merupakan tempat untuk menaruh kode script iklan.

Klik "Save" dan lihat hasilnya...

.: Semoga Bermanfaat :.

FB Users () Comment | Read Users (5) Comment

Comments

5 Comments

♥VPie◥♀◤MahaDhifa♥ says:
March 16, 2012 at 8:10 AM

. . wach,, sayang sekali. blog aq gak ada iklan nya. he..86x . .
gumanta-info says:
March 16, 2012 at 9:49 PM

WAH TAMBAH KREATIF SAJA POSTINGANNYA,,,
Bangkit says:
May 23, 2012 at 5:54 PM

boleh saya copas ya gan....?
Monoz Core says:
May 23, 2012 at 10:09 PM

boleh...silakan saja tapi jangan lupa sumbernya yaa...
Khairul Abdal says:
July 4, 2012 at 7:30 PM

mantabs....izin copas donk
http://khairulabdal.blogspot.com