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
- Kode CSS lebih sederhana
- Auto Height (tinggi otomatis)
- Bisa memasukkan konten kedalam kotak sebanyak mungkin
- Mudah dalam pengeditan
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>
Untuk demonya bisa lihat ini<!-- 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 & Ads by Aikon Media</div></div><!-- End Iklan -->
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>Copy kode ini diatasnya:
<div id="ads-by">Affiliate & Ads by Aikon Media</div>
<div id="teks1" class="link-ads"><a href="alamat URL" rel="nofollow" target="_blank">Judul Iklan</a></div>Jika bingung tanyakan saja di kolom komentar.
<div class="isi-iklan">di isi dengan deskripsi iklan</div>
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
Sponsored by:
0 comments:
Post a Comment