Cara Membuat Widget Banner Iklan Melayang di Kanan Kiri Blog

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.