Cara Menambahkan Widget Baru Di Sebelah Kiri Dan Kanan Halaman Blog Untuk Keperluan Pemasangan Banner Atau Iklan

Sobat, bila saat ini Anda sedang membuka halaman blog ini dengan memakai monitor yang memiliki resolusi layar 1280 x 600 dan atau yang lebih tinggi, maka Sobat akan mendapati adanya 2 (dua) buah banner yang terpasang di sebelah kanan dan kiri halaman utama blog (seperti tampak pada gambar di atas). Namun apabila kebetulan monitor yang Anda gunakan memiliki resolusi layar lebih rendah dari 1280 x 600 (sebagai contoh misalnya adalah monitor dengan resolusi layar 1024 x 768), maka banner baru akan terlihat sepenuhnya ketika posisi mouse pointer diletakkan di sisi bagian kiri atau kanan halaman browser.

Berbicara tentang banner, dalam hal ini adalah banner iklan yang ditayangkan dalam sebuah blog, bisa jadi penempatan atau pemasangan banner seperti yang tampak pada gambar di atas cukuplah jarang kita jumpai. Hal ini disebabkan karena pada umumnya banner akan ditempatkan di dalam area halaman utama blog, sebagai contoh misalnya diletakkan di atas bidang posting, di area sidebar, dan atau bahkan ditempatkan dalam area header. Sehingga apabila Anda mendapati adanya 2 (dua) buah banner yang terpasang di sebelah kiri dan kanan halaman blog seperti yang tampak pada gambar di atas, maka bisa jadi Anda akan bertanya-tanya dalam hati tentang cara pembuatan atau pemasangannya.

Oke, bila benar demikian maka bisa jadi uraian dalam artikel ini dapat dijadikan sebagai jawaban atas pertanyaan tersebut, karena langkah-langkah di bawah ini merupakan salah satu cara yang digunakan untuk pemasangan banner atau iklan di sisi luar halaman utama blog. Dimana prinsip utama dari pembuatannya adalah dengan cara menambahkan 2 (dua) buah widget baru yang nantinya dimanfaatkan sebagai tempat pemasangan banner atau iklan. Dan selanjutnya untuk keperluan tersebut, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template degan cara mengeklik menu ‘Template’ > ‘Edit HTML’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode 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: 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;}

Keterangan:
Bahwasanya rangkaian CSS di atas digunakan untuk gambar dengan ukuran lebar 120px. Sehingga apabila Anda ingin memasang banner dengan ukuran yang lebih lebar (misalnya 160px), maka ubahlah semua angka 120 pada CSS di atas dengan angka 160.

Ketiga, cari </body> dan kemudian sisipkan kode di bawah 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>

Keempat, simpan template.

Setelah template disimpan, tutuplah editor template dan kemudian buka menu ‘Tata letak / Layout’. Dan apabila halaman tata letak widget telah ditampilkan maka Anda akan mendapati adanya 2 (dua) buah bidang gadget baru di bagian paling bawah, yang mana bagian inilah yang nantinya digunakan untuk memasang banner yaitu dengan cara menambahkan gadget baru didalamnya. Sehingga dengan demikian langkah selanjutnya adalah klik ‘Tambah Gadget’ dan kemudian tambahkan widget dalam bentuk ‘HTML/JavaScript’. Sementara itu, sebagai contoh dari script yang dipasang untuk menampilkan banner misalnya adalah seperti script berikut ini.

<a title="Ingin pasang banner di sini? Silakan klik untuk mengetahui detail selengkapnya." href="http://eltelu.blogspot.com/2013/01/pasang-iklan-anda-dalam-bentuk-banner.html"></a><img alt="advertising" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiub4UYkcOwM3c-Phg_fljW5VkhbjnuA7ymmujGnE8GJI3We4arJEI1mC98_etczMof3n9BeyO-jG36-iTXkZJDxOZl9EQSb9pvCyhNUa7Z_IAjLvla2pW4vXzpkvSpdLkT-3xPRv7MB5U/s800/Banner%2520ELTELU.png"/>

Namun demikian ada 1 (satu) hal yang perlu diperhatikan bahwasanya rangkaian CSS yang digunakan di atas, khusus dipakai untuk pemasangan iklan dalam bentuk banner atau gambar. Sehingga apabila yang ingin Anda pasang bukanlah banner atau gambar (dalam hal ini misalnya iklan yang berbentuk tautan teks),  maka silakan menggunakan rangkaian CSS di bawah ini sebagai pengganti CSS di atas.

.content{z-index:1;}
.ad-left {left:0px}
.ad-right {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;
  top:32px; position:fixed;
  z-index:-1; opacity:0.7;
  width:120px; height:600px;}
.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;}

Dan perlu diketahui pula bahwa penerapan teknik tersebut dengan berasumsikan bahwa pada blog yang Anda kelola masih memiliki bilah navbar standar Blogger atau telah memiliki bilah menu seperti yang tampak pada gambar di atas. Sehingga apabila blog yang Anda kelola belum memiliki bilah menu seperti yang tampak pada gambar di atas, maka tidak ada salahnya bila Anda buka artikel ini untuk mengetahui langkah-langkah pembuatannya.

Semoga berguna, bermanfaat, dan apabila Anda mengalami kesulitan atau kendala ketika mengimplementasikan teknik tersebut, maka silakan ajukan pertanyaan terkait degan kesulitan atau kendala yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.
Salam.