Membuat Iklan Mirip Adsense: Link Units Ads

    Sebelumnya, saya juga pernah membuat widget mirip iklan Google Adsense seperti ini juga. Tetapi, kali ini dengan tampilan yang berbeda.

    Bila sebelumnya saya membuat iklan berjenis Richer Text Ads dengan ukuran medium rectangle (300x250), sekarang saya membuat iklan berjenis Link Units Ads dengan bentuk horizontal dan vertical. Untuk lebih jelasnya silahkan anda lihat gambar diatas atau tekan demo dibawah ini.


    Widget ini sama persis seperti Google Adsense, hanya berupa link berderet kesamping kanan (horizontal). Sangat simpel. Oleh karenanya, widget ini sangat-sangat ringan, 100% tidak akan membuat blog anda menjadi berat. Juga, anda dapat mengeditnya secara penuh, 100%, karena tidak ada satu script pun yang dihosting.

    Bagaimana? Anda tertarik untuk membuatnya? Silahkan ikuti beberapa langkah berikut ini untuk membuatnya.

    Untuk yang horizontal:

    • Seperti biasa, silahkan anda login terlebih dahulu di blogger.com > Tata Letak > Tambahkan Widget > HTML/Javascript
    • Lalu, masukan kode dibawah ini kedalamnya.

    <style>
    .gakodejarwo { display:block; background:#fff; margin:20px; }
    .gakodejarwo .info-jarwo-lengkap { height:15px; float:left }

    /* Slot */

    .gakodejarwo .linku-jarwo { display:block; height:34px; width:100% }

    .gakodejarwo .slot-jarwo { display:block }
    .gakodejarwo .unit-jarwo { display:block; padding:1px 20px; color:blue !important; background:#fff; float:left; height:30px; border-radius:20px; border:1px solid blue; font-family:arial; font-size:15px; margin:2px 5px }
    .gakodejarwo .unit-jarwo:hover { background:blue; color:#fff !important }

    </style>

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

    <div class='linku-jarwo'>

    <div class='info-jarwo'>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank'>
    <img class='info-jarwo-lengkap' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXjQhDfXyFKb5Lza4STs4QQF5HI6GGJSnBkqcEiiPZ7cZyrwPvlqFyuCVmM-T5CyWV39Lk6A1fho-hAKEHDWUpaZn7ac9wfII6DeNvlRUflGIXrdhXxbYdxQhy68eNH1LkIwN2hNQfJZF/s1600/infoga2.PNG' title='Iklan ini disediakan oleh Blog Kode Jarwo'/></a>
    </div>

    <div class='slot-jarwo'>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>Kode Jarwo</a>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>Blog Bang Jarwo</a>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>kodejarwo.blogspot.com</a>
    </div>

    </div></div>
    • Ganti tulisan dengan warna hijau (   ) pertama dengan link tombol pertama, tulisan hijau kedua dengan link tombol kedua, dan seterusnya.
    • Ganti pula tulisan yang berwarna biru (   ) pertama dengan judul tombol pertama, tulisan biru kedua dengan judul tombol kedua, dan seterusnya.

    Lalu simpan widget anda.

    Untuk yang vertical:

    • Masih sama caranya seperti yang horizontal, yang berbeda hanyalah scriptnya. Berikut script yang harus anda masukkan.

    <style>
    .gakodejarwo { display:block; background:#fff; margin:20px; }
    .gakodejarwo .info-jarwo-lengkap { height:15px; float:left }

    /* Slot */

    .gakodejarwo .linku-jarwo { display:block; height:34px; width:100% }

    .gakodejarwo .slot-jarwo { display:block }
    .gakodejarwo .unit-jarwo { display:block; padding:1px 20px; color:blue !important; background:#fff; float:left; height:30px; border-radius:20px; border:1px solid blue; font-family:arial; font-size:15px; margin:2px 5px; width:100%; text-align:center }
    .gakodejarwo .unit-jarwo:hover { background:blue; color:#fff !important }

    </style>

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

    <div class='linku-jarwo'>

    <div class='info-jarwo'>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank'>
    <img class='info-jarwo-lengkap' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXjQhDfXyFKb5Lza4STs4QQF5HI6GGJSnBkqcEiiPZ7cZyrwPvlqFyuCVmM-T5CyWV39Lk6A1fho-hAKEHDWUpaZn7ac9wfII6DeNvlRUflGIXrdhXxbYdxQhy68eNH1LkIwN2hNQfJZF/s1600/infoga2.PNG' title='Iklan ini disediakan oleh Blog Kode Jarwo'/></a>
    </div>

    <div class='slot-jarwo'>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>Kode Jarwo</a>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>Blog Bang Jarwo</a>
    <a href='http://kodejarwo.blogspot.co.id' target='_blank' class='unit-jarwo'>kodejarwo.blogspot.com</a>
    </div>

    </div></div>
    • Ganti tulisan dengan warna hijau (   ) pertama dengan link tombol pertama, tulisan hijau kedua dengan link tombol kedua, dan seterusnya.
    • Ganti pula tulisan yang berwarna biru (   ) pertama dengan judul tombol pertama, tulisan biru kedua dengan judul tombol kedua, dan seterusnya.

    • Simpan widget anda dan lihat hasilnya!

    Sedangkan bagi anda yang ingin menempatkan widget ini di akhir postingan, cukup tempatkan script diatas tepat setelah kode <data:post.body> atau sebelum kode </article>.

    Juga, bagi yang mengalami error/widget tidak sesuai dengan demo, silahkan beri tahu saya lewat komentar dibawah beserta link dimana widget tadi ditempatkan. Selamat mencoba dan semoga berhasil!