Di postingan saya sebelum ini, sobat saya Wiellyam menanyakan bagaimana caranya saya menampilkan iklan di bawah postingan yang ada backgroundnya (kemarin saya masih pakai Bidvertiser, tapi karena mengecewakan, dan AdSense lagi ngambek sampe nampilin PSA terus, saya nyobain pake KlikSaya).

Tampilannya seperti ini:
screenshot

Eitt!!! Jangan di-klik ya, itu cuma gambar screenshot lho :grin3: Katanya, dengan memakai background untuk iklan seperti ini akan membuat pengunjung website kita lebih tertarik untuk melihatnya, dan kemungkinan besar mereka meng-klik iklan akan semakin besar pula.

Nah, sekarang saya mau bagikan background itu di sini, beserta codingnya. Saya dapat ini beli seharga lima dolar, isinya ada banyak background, tapi saya paling suka yang gambar kertas ini, jadi ini yang saya tampilkan.

Klik di sini untuk mendownload file background-nya (file .zip, 45.1 KB, isinya terdiri dari 12 ukuran background kertas seperti screenshot di atas).

Background ini bisa dipakai di semua website, tidak cuma WordPress saja, karena murni hanya menggunakan css saja. Tapi di sini saya kasih contoh untuk WordPress saja ya. Cara memasukkan kode-nya, anda tinggal edit file style.css (letaknya di folder theme anda), lalu copaslah kode untuk file style.css di bawah ini (bisa di bagian mana saja di file style.css itu, kalau mau gampang taro saja di paling akhir / bawah).

Ukuran iklan (ada 12 ukuran):

  • Banner (468 x 60)
    Kode untuk file style.css :

    #latar_iklan {
      width:488px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:8px 11px 16px 10px;
    }
    
  • Button (125×125)
    Kode untuk file style.css :

    #latar_iklan {
      width:153px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:13px 16px 15px 12px;
      }
    
  • Half Banner (234×60)
    Kode untuk file style.css :

    #latar_iklan {
      width:254px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:11px 13px 15px 8px;
      }
    

  • Large Rectangle (336×280)
    Kode untuk file style.css :

    #latar_iklan {
      width:366px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:16px 17px 18px 13px;
      }
    
  • Leaderboard (728×90)
    Kode untuk file style.css :

    #latar_iklan {
      width:751px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:12px 17px 20px 6px;
      }
    
  • Medium Rectangle (300×250)
    Kode untuk file style.css :

    #latar_iklan {
      width:334px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:14px 22px 22px 12px;
      }
    
  • Skycraper (120×600)
    Kode untuk file style.css :

    #latar_iklan {
      width:156px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:7px 19px 18px 17px;
      }
    
  • Small Rectangle (180×150)
    Kode untuk file style.css :

    #latar_iklan {
      width:204px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:11px 15px 14px 9px;
      }
    
  • Small Square (200×200)
    Kode untuk file style.css :

    #latar_iklan {
      width:226px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:9px 16px 17px 10px;
      }
    
  • Square (250×250)
    Kode untuk file style.css :

    #latar_iklan {
      width:280px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:12px 18px 18px 12px;
      }
    
  • Vertical Banner (120×240)
    Kode untuk file style.css :

    #latar_iklan {
      width:144px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:6px 14px 16px 8px;
      }
    
  • Wide Skycrapper (160×600)
    Kode untuk file style.css :

    #latar_iklan {
      width:196px;
      text-align:center;
      background:#FFFFFF url(kertas.png) center center no-repeat;
      padding:10px 22px 22px 14px;
      }
    

Kemudian, (penting!):

  • Ganti #latar_iklan dengan nama apa saja sesuka anda, namun ingat kalau anda menggunakan lebih dari satu background, tidak boleh menggunakan nama yang sama. Kalau anda menggunakan background untuk ukuran banner dan square, gunakanlah misalnya #latar_iklan_banner dan #latar_iklan_square untuk masing-masing kode.
  • Ganti kertas.png dengan URL file background dimana anda meng-upload-nya.
  • Wrap (bungkus) kode iklan anda, misalnya seperti contoh di atas, kalau anda menggunakan background untuk iklan adsense anda dengan ukuran banner dan square:
    • untuk yang banner:

      <div id="latar_iklan_banner">
        kode adsense anda
      </div>
      
    • untuk yang square:
      <div id="latar_iklan_square">
        kode adsense anda
      </div>
      

Selesai :thumb3: Background kertas dengan kode di atas sudah saya coba untuk AdSense, AdBrite dan Bidvertiser, ketiganya berhasil dan tampilannya pas sekali.

Silakan mencoba..

Category: Online Money | Tags: