Thursday, July 4, 2013

Cara Memasang Widget Kotak Iklan Teks Update versi 2

Semakin lama kebutuhan widget untuk blogger semakin banyak digunakan, bahkan banyak developer yang menyediakan berbagai widget yang atraktif, seperti widget hitstats, kotak iklan, dan masih banyak lagi. Dan kali ini yang akan saya bahas adalah widget kotak iklan teks versi 2, widget ini sendiri ada 2 jenis.
  1. Kotak iklan teks
  2. kotak iklan gambar
Yang akan saya bahas adalah widget yang pertama, saya sebut kotak iklan teks update versi 2 karena sebelumnya saya telah membuta yang versi pertama. Yang berbeda dari versi 2 ini adalah
  • Kode CSS lebih sederhana
  • Auto Height (tinggi otomatis)
  • Bisa memasukkan konten kedalam kotak sebanyak mungkin
  • Mudah dalam pengeditan
Jika sobat belum tahu widget yang versi pertama, sobat bisa mengunjungi link ini Cara Memasang Widget Kotak Iklan Teks.

Cara Memasang Kotak Iklan versi 2:

1. Mauk ke blogger.com
2. Masuk ke Tata Letak >> tambah widget atau add widget
3. Pilih HTML/JavaScript
4. Copy kode di bawah
<style type="text/css">
#teks {
height: auto;
width: 300px;
border: 1px solid #D70005;
}
#teks #teks1 {
height: auto;
width: auto;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
margin-top: 8px;
}
#buka {
height: auto;
width: auto;
margin-right: 6px;
margin-left: 6px;
font-size: 16px;
color: #06F;
padding-right: 2px;
padding-left: 2px;
}
#teks #ads-by {
height: auto;
width: auto;
margin-top: 6px;
color: #666;
font-size: 12px;
margin-bottom: 2px;
padding-top: 2px;
padding-bottom: 1px;
margin-right: 6px;
margin-left: 6px;
font-style: normal;
line-height: normal;
text-decoration: none;
}
.isi-iklan {
color: #333;
line-height: normal;
font-style: normal;
font-size: 13px;
}
.link-ads a{ color: #D70005;text-decoration:none; }
.link-ads a:hover { color: #333;text-decoration:underline;}
</style>
<!-- Start Iklan -->
<div id="teks">
  <div id="buka">
    <div id="teks1" class="link-ads"><a href="http://aikonmedia.blogspot.com/" rel="nofollow" target="_blank">Judul Iklan</a></div>
    <div class="isi-iklan">di isi dengan deskripsi iklan</div>
    <div id="teks1" class="link-ads"><a href="http://aikonmedia.blogspot.com" rel="nofollow" target="_blank">Judul Iklan</a></div>
    <div class="isi-iklan">di isi dengan deskripsi iklan</div>
    <div id="teks1" class="link-ads"><a href="http://aikonmedia.blogspot.com/" rel="nofollow">Judul Iklan</a></div>
    <div class="isi-iklan">di isi dengan deskripsi iklan</div>
    <div id="teks1" class="link-ads"><a href="http://aikonmedia.blogspot.com/" rel="nofollow">Judul Iklan</a></div>
    <div class="isi-iklan">di isi dengan deskripsi iklan</div>
  </div>
  <div id="ads-by">Affiliate &amp; Ads by Aikon Media</div>
</div>
<!-- End Iklan -->
Untuk demonya bisa lihat ini

Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!
Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!
Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!
Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!
Affiliate & Ads by Aikon Media

Keterangan:

  • Warna biru kode warna border, bisa diganti sesuai warna yang sobat inginkan. Bisa lihat disini.
  • Warna hijau adalah kode warna untuk hover, ketika mouse diarahkan ke link maka link akan berubah warna.
  • Warna orange adalah alamat link,
  • Warna merah adalah nama penerbit iklan
  • Pada <div class="isi-iklan"> di isi dengan desskripsi iklan </div>
  • Untuk menambahkan iklan lagi dibawah atau diatasnya, tambahkan kode ini sebelum kode:
 </div>
  <div id="ads-by">Affiliate &amp; Ads by Aikon Media</div>
Copy kode ini diatasnya:
<div id="teks1" class="link-ads"><a href="alamat URL" rel="nofollow" target="_blank">Judul Iklan</a></div>
    <div class="isi-iklan">di isi dengan deskripsi iklan</div>
Jika bingung tanyakan saja di kolom komentar.

Cara Memasang Widget Kotak Iklan Teks Update versi 2 ini semoga bermanfaat untuk sobat semua dan menambah wawasan kita semua. Jangan ketinggalan tutorial dan artikel saya selanjutnya dengan memasukkan e-mail di kotak follow by email. Terima kasih

Related Posts

Cara Memasang Widget Kotak Iklan Teks Update versi 2
4/ 5
Oleh