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.

Kotak iklan teks
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>

<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 & Ads by Aikon Media</div>

</div>

Untuk demonya bisa lihat ini

Iklan Teks Murah

Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!

Iklan Teks Murah

Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!

Iklan Teks Murah

Hanya Rp10.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!

Iklan Teks Murah

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 & 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