Membuat Iklan Mirip Adsense: 300x250 - Richer Text Ads

    Google Adsense, salah satu penyedia iklan untuk blog terbesar nomor 1 di dunia, dengan milyaran tayangan iklan perbulannya. Tak bisa dipungkiri, salah satu penyedia iklan hebat ini menjadi 'buronan' bagi para blogger pencari dollar karena berani membayar para pengiklannya dengan rate yang cukup tinggi.

    Iklan yang tersedia di Google Adsense pun bermacam-macam bentuknya. Dari yang 300x250, 728x90, sampai yang responsif.

    Tetapi ada 1 hal yang membuat blogger tidak menghiraukan Google Adsense ini dan malahan mencari alternatif lainnya, dikarenakan persyaratan untuk menjadi Publishernya yang sangat ketat. Disamping itu, para blogger juga sering kecewa karena blognya sudah memenuhi semua syaratnya, tetapi tetap mendapat tolakan dari penyedia iklan ini.

    Nah, bagi sobat yang merasa sedih dan merasa sedikit kesal dengan perlakuan Google Adsense ini, saya sudah memberikan obat penawarnya, yaitu saya membuat widget yang sangat-sangat mirip dengan Google Adsense yang berukuran 300 x 250 pixel.

    Berikut beberapa kelebihan yang saya tawarkan pada widget kali ini:
    1. Berbeda dengan iklan Adsense, iklan Kode Jarwo ini responsive
    2. Dapat diubah kata-kata dan gambarnya sesuka hati
    3. Sangat-sangat ringan, tanpa JS/CSS Eksternal
    4. Support tombol keluar, dengan struktur tombol:
      • Tombol untuk menyembunyikan iklan
      • Tombol untuk menghilangkan iklan/widget

    Untuk Live Demonya silahkan klik tombol ini
    DEMO


    Ya, walaupun widget ini tidak dapat menghasilkan uang... hehehe...
    Dan, widget ini 100% buatan saya,...

    Siapa bilang gak bisa? Bisa kok menghasilkan, yaitu dengan menyediakan space iklan yang menggunakan widget ini.

    Langsung saja, berikut cara membuatnya, disimak baik-baik ya supaya tidak terjadi error...

    Caranya...


    Pertama, silahkan sobat login ke blogger.com > Tata Letak > Tambahkan widget. Silahkan sobat masukkan kode dibawah ini kedalamnya.

    <style>
    .gakodejarwo { display:block; background:#eee; margin:20px; }

    .gakodejarwo .keluar-jarwo, .gakodejarwo .keluar-jarwo-lengkap { float:right; width:16px; height:15px; cursor:pointer }
    .gakodejarwo .keluar-jarwo-lengkap { display:none; margin-top:-15px }
    .keluar-jarwo:hover .keluar-jarwo-lengkap,
    .info-jarwo:hover .info-jarwo-lengkap
    { display:block!important }

    .gakodejarwo .info-jarwo { float:right; width:16px; height:15px }
    .gakodejarwo .info-jarwo-lengkap { float:right; width:96px; height:15px; display:none; margin-top:-15px; max-width:100px!important }

    .gakodejarwo .buka-jarwo { background:#19abea; color:#fff!important; margin-top:20px!important }
    .gakodejarwo .buka-jarwo:hover { background:#1794cb }
    .gakodejarwo .hilangkan-jarwo { background:#fff; color:#9E9EA6!important }
    .gakodejarwo .hilangkan-jarwo:hover { background:#eee }
    .gakodejarwo #tutup-jarwo { display:none; text-align:center; padding:15px 10px; font-size:16px; font-family:arial; margin:30px 0 }
    .gakodejarwo .blog { font-family:lusitana,serif; font-weight:bold; color:#222!important }

    .gakodejarwo .buka-jarwo, .gakodejarwo .hilangkan-jarwo { display:block; padding:3px; box-shadow:0px 0px 2px rgba(0,0,0,0.12), 0px 1px 3px rgba(0,0,0,0.26) !important; cursor:pointer; margin:0 20px 5px; border-radius:5px; }


    /* Slot */

    .kotaksedang-jarwo { max-width:300px; height:250px; border:1px solid #eee }

    .kotaksedang-jarwo .slot1-jarwo { height:100px; background:#fff; }
    .kotaksedang-jarwo .slot1-jarwo .logo1-jarwo { margin:18px 0 0 18px; width:64px; height:64px }

    .kotaksedang-jarwo .slot2-jarwo { height:65px; background:rgba(165,39,20,1); }
    .kotaksedang-jarwo .slot2-jarwo .judul-jarwo { font-size:16px; font-weight:bold; margin:8px 0 0 15px }
    .kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo { margin: 35px 0 0 15px; line-height:1.2 }

    .kotaksedang-jarwo .slot3-jarwo { background:rgb(219, 68, 55); height:83px }
    .kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo { margin:10px 0 0 15px; color:#e3e3e3!important }
    .kotaksedang-jarwo .slot3-jarwo .link-jarwo { margin:60px 0 0 15px; color:#f0b4af!important }
    .kotaksedang-jarwo .slot3-jarwo .tombol-jarwo { background:rgba(165,39,20,1); width:52px; height:52px; border-radius:50%; box-shadow:1px 2px 3px 0px rgba(0,0,0,.4); margin:15px 15px 0 0; float:right; position:sticky }

    /* Campuran */

    .kotaksedang-jarwo .slot2-jarwo .judul-jarwo,
    .kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo,
    .kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
    .kotaksedang-jarwo .slot3-jarwo .link-jarwo
     { color:#fff; font-family:Roboto, Arial, sans-serif; letter-spacing:-0.1px; position:absolute; }

    .kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo,
    .kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
    .kotaksedang-jarwo .slot3-jarwo .link-jarwo
     { position:absolute; font-size:12px; }

    .kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
    .kotaksedang-jarwo .slot3-jarwo .link-jarwo
     { max-width:200px; }

    </style>

    <div class='gakodejarwo kotaksedang-jarwo' id='gakodejarwo'>
    <div id="buka-jarwo">

    <div class='keluar-jarwo'>
    <a onclick="show('tutup-jarwo')">
    <img class='keluar-jarwo' src='https://tpc.googlesyndication.com/pagead/images/x_button_blue2.svg'/>
    <img class='keluar-jarwo-lengkap' src='https://tpc.googlesyndication.com/pagead/images/x_button_dark.svg' title='Sembunyikan Iklan'/>
    </a></div>

    <div class='info-jarwo'>
    <img class='info-jarwo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBOsKbEirZm8gyO11ri6Y0v1lzxebdT0qw85V16pMQrRR_XzNgCQ-xqQvHvo2BSHsLXaEDBFfcyyDvi0vKKDFlaZhDXVDYlTF-kWmXYe-IupcBCJD4pv1USH2EIWp_9XTKuq51QHsLOaf/s1600/info.PNG'/>
    <a href='http://www.kodejarwo.com' target='_blank'>
    <img class='info-jarwo-lengkap' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCPhRzxzRnt9yWAfoQpW51vjyzZQK0oUyJgeiTNT9ak2lVtdozJAObqAxtAD2vbD86LK3-mXKeY-GN6wkoinKDBxrGsyBZ6B3J89OxQQA1M_EiI5u4daBvBPR3u6_aRLn5JzGzPytqyiMh/s1600/info2-kodejarwo.PNG' title='Iklan ini disediakan oleh Blog Kode Jarwo'/></a>
    </div>

    <div onclick="window.open('http://www.kodejarwo.com','mywindow');" style="cursor: pointer;">
    <div class='slot1-jarwo'>
     <img class='logo1-jarwo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZaRhdV5d0O-W3038pdkBkLj4BtlHjsAd7CrV66mp4VHXxhsd6qN9iRQpur_A57z0iSWsC4SqfmGctaWsnI8SKBuIvn60iVYrUBATGEhzx5TZDuvH-lTns_M7cOj0jDPQkM1Qen-B-Sugz/s1600/KJ-min.png'/>
    </div>
    <div class='slot2-jarwo'>
     <a class='judul-jarwo'>Blog Kode Jarwo</a>
     <a class='subjudul-jarwo'>Blognya milik Bang Jarwo</a>
    </div>
    <div class='slot3-jarwo'>
     <a class='deskripsi-jarwo'>Blog Kode Jarwo, Blog yang membahas dunia Web Desain</a>
     <a class='link-jarwo'>kodejarwo.blogspot.com</a>
     <div class='tombol-jarwo'>
      <svg width="100%" style="width:15px; margin-left:19px" height="100%" viewbox="0 0 26 42">
       <polyline stroke-miterlimit="10" stroke-width="5" stroke="rgba(255,255,255,1)" fill="none" points="6,3 24,21 6,39"></polyline>
      </svg>
     </div>
    </div>
    </div>

    </div>
    <div id="tutup-jarwo">Ads hidden by <a class='blog'>Kode Jarwo</a> <a class='buka-jarwo' onclick="show('buka-jarwo')">Display Ads Again</a>
    <a class='hilangkan-jarwo' onclick="hide('gakodejarwo')">Close Ads</a></div>
    </div>

    <script>
    function show(e){var t=document.getElementById(e);currentDiv.style.display="none",t.style.display="block",currentDiv=t}var currentDiv=document.getElementById("buka-jarwo");
    function hide(target) {
        document.getElementById(target).style.display = 'none';
    }
    </script>

    Eitsss... Belum selesai gan. Berikut penjelasan dari kode-kode yang berwarna dan harus diganti dengan apa.

    Warna (A) Hitam dengan URL Iklan/Blog sobat
    Warna (A) Biru Tua dengan Judul Iklan/Blog
    Warna (A) Ungu dengan SubJudul Iklan/Blog
    Warna (A) Pink dengan Deskripsi Iklan/Blog
    Warna (   ) Biru Muda dengan Gambar Logo Iklan/Blog
    Selesai. Bagaimana? Mirip tidak dengan gambar dibawah ini (iklan aslinya dari Adsense)...

    Membuat Iklan Mirip Adsense: 300x250 - Richer Text Ads

    Oh ya, saya beri tambahan, widget iklan ini sudah benar-benar 99% mirip, karena bisa kita tekan info iklannya (ikon i di ujung kanan atas) dan tombol keluarnya.

    Bagaimana? Semoga widget diatas dapat membantu blog anda untuk dimonetisasi, hehehe...