Berikut Beberapa Langkah Untuk Pemasangan Banner Atau Iklan Pada Blog
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.
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.
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.
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.
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.
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;}
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=""></a><img alt="advertising" src="url "/>
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.
About the Author
0 komentar: