Cara menambahkan widget pada di samping
kiri dan kanan blog, inilah yang akan saya bahas pada kesempatan ini, mengingat
masih banyaknya sahabat blogger yang menggunakan iklan melayang (floating)
sementara di lain sisi ada beberapa publisher iklan melarang bahkan tidak
mengizinkan seorang blogger memasang iklannya dengan cara melayang tadi.
Ok, dari pada lama-lama membahas tentang
iklan melayang, ntar agan-agan pada lari. Langsung saja menuju ke TKP....
- Login ke akun blog sobat
- Pilih template
- Edit HTML
- Cari kode ]]></b:skin>
- Tempatkan kode dibawah ini tepat di atassnya ]]></b:skin>
.content{z-index:1;}
.ad-left, .ad-left img {left:0px}
.ad-right, .ad-right img {right:0px}
.ad-left, .ad-right {bottom:0px;
min-width:0px; max-width:120px;
height:100%; text-align:center;
white-space: nowrap; position: absolute;
z-index:0; overflow:hidden;
margin:0px; padding:0px}
.ad-left .widget, .ad-right .widget,
.ad-left .widget-content,
.ad-right .widget-content {
margin:0px;padding:0px;}
.ad-left h2, .ad-right h2 {display:none}
.ad-left .widget-content,
.ad-right .widget-content {line-height:1;}
.ad-left img, .ad-right img {
top:32px; position:fixed;
z-index:-1; opacity:0.7;
width:120px; height:600px;}
.ad-left a:link, .ad-right a:link {
width:120px; height:600px;
display:block; position:relative;}
.ad-left:hover, .ad-right:hover{z-index:2}
.ad-left .widget .widget-item-control img,
.ad-right .widget .widget-item-control img {display:none;}
.ad-left, .ad-left img {left:0px}
.ad-right, .ad-right img {right:0px}
.ad-left, .ad-right {bottom:0px;
min-width:0px; max-width:120px;
height:100%; text-align:center;
white-space: nowrap; position: absolute;
z-index:0; overflow:hidden;
margin:0px; padding:0px}
.ad-left .widget, .ad-right .widget,
.ad-left .widget-content,
.ad-right .widget-content {
margin:0px;padding:0px;}
.ad-left h2, .ad-right h2 {display:none}
.ad-left .widget-content,
.ad-right .widget-content {line-height:1;}
.ad-left img, .ad-right img {
top:32px; position:fixed;
z-index:-1; opacity:0.7;
width:120px; height:600px;}
.ad-left a:link, .ad-right a:link {
width:120px; height:600px;
display:block; position:relative;}
.ad-left:hover, .ad-right:hover{z-index:2}
.ad-left .widget .widget-item-control img,
.ad-right .widget .widget-item-control img {display:none;}
6. Selanjutnya cari kode </body> dan sisipkan
kode dibawah ini tepat di atasnya
<b:section class='ad-right' id='ad-right' showaddelement='yes'></b:section>
<b:section class='ad-left' id='ad-left' showaddelement='yes'></b:section>
<b:section class='ad-left' id='ad-left' showaddelement='yes'></b:section>
7.
Simpan
template
Nah,
sekarang tinggal kembali ke tata letak, perhatikan tambahan gadget di bagian
bawah...
NB :
Ganti 120px jika ingin ukuran iklannya
160px
Tags
Teknologi