Cara Membuat Widget Banner
Iklan Melayang di Halaman Kanan Kiri Blog
Pada tutorial kali ini saya akan memberikan
tutorial cara membuat widget Banner iklan melayang di sebelah kanan dan kiri
halaman blog. Lumayankan buat tambah tambah pemasukan dari banner iklan atau
bisa juga yang lainnya tetapi dalam bentuk banner.
Pertama
kita buka editor template dengan cara mengeklik menu Template > Edit
HTML.
Kedua, silahkan sobat cari kode ]]></b:skin> dan selanjutnya
sisipkan kode yang ada di bawah ini tepat di atasnya.
.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: fixed;
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:1;
width: 120px; height: 600px;}
.ad-left a:link, .ad-right a:link {
width: 120px; height: 600px;
display:block;
position:fixed;}
.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;}
Ketiga,
cari kode </body> dan kemudian sisipkanlah kode di bawah ini tepat
berada 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>
Setelah
itu simpan template, tutup editor template dan kemudian buka halaman menu
Tata letak/Layout. Sobat akan melihat dua widget baru di bagian paling
bawah, yang mana bagian ini nantinya akan digunakan untuk memasang banner yaitu
dengan cara menambahkan widget baru didalamnya.
Perhatikan angka yang tertera di atas yang
telah saya tandai. Widget di atas di gunakan untuk ukuran banner dengan ukuran
lebar 120px dan tinggi 600px. Sobat dapat menggantinya dengan
angka 160px atau jika bilah samping masih luas dapat digunakan untuk
banner 300x600px. Sesuaikan dengan kondisi blog sobat saja.
Selain itu, saran dari saya yaitu
tambahkanlah Tag Conditional agar banner hanya tampil dalam versi desktop. Karena
banner tersebut akan merusak versi tampilan mobile device.
Semoga tutorial ini bermanfaat untuk sobat
semua sekian dari saya dan terima kasih.