Cara Membuat Banner Iklan (Kanan/Kiri) Dengan Close Icon

Teriaaak.blogspot.com - Pada Posting sebelumnya dijelaskan tentang cara membuat iklan disisi kanan dan kiri secara bersamaan, nah kali ini akan dijelaskan bagaimana cara membuat banner iklan disisi kanan atau kiri saja atau bahkan keduanya dengan tambahan Ikon Close pada iklan sehingga iklan dapat di close, langsung saja perhatikan langkah-langkahnya.

Banner Iklan Biasa

Login pada Blogger
Buka Tata Letak
Kemudian tambahkan gadget "HTML/Java Script"
Selanjutnya masukan script berikut ini dan masukan Url iklan seperti yang ditandai pada script setelah itu Klik "Save/Simpan"

<style type="text/css">
#fixedbanner {
 position: fixed;
 top: 160px; /* Pengaturan jarak dari atas */
 right: 0; /* Merubah Kanan atau Kiri hanya dengan Right atau Left */
}
</style>
<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Keterangan :

Ubah yang ditandai dengan warna merah sesuai dengan kebutuhan anda
edit iklan mau ditaruh sisi kanan/kiri sesuai petunjuk pada script

Banner Iklan dengan Icon Close (dapat di close)

Login pada Blogger
Klik Template, kemudian Edit HTML
Masukan Kode script dibawah ini diatas kode ]]></b:skin>

#fixedbanner {
 position: fixed;
 top: 160px; /* Pengaturan jarak dari atas */
 right: 0; /* Merubah Kanan atau Kiri hanya dengan Right atau Left */
}

4. Kemudian edit dan masukan kode script berikut ini diatas kode </body>

<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Keterangan : Kode diatas merupakan cara membuat banner iklan biasa dengan kode HTML, untuk Menambahkan ICON CLOSE pada Iklan silakan ganti script no.4 diatas dengan kode script berikut ini :

<div id='fixedbanner'>
<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lszd_yEHQ0iYm8bftD6tKMOEHabOOYogORZ1BVUDH1FH0wJldmlkK9WErzQb6Qp3mC3q1JXGgaNavg7sDcKFLZbGsGlmgMGz1HJA5zMggPDnQOkalaRhqkrG5OluwYh65CrVTpFX43s/s1600/delete2.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Selesai dan Simpan Template.

Labels: Blogger Tutorial