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
]]>
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://lh4.googleusercontent.com/-IGHGs-xhdms/URDIFArjkqI/AAAAAAAABKw/UlnxETcxFVY/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.
