Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat Widget Iklan Melayang Responsive

Keberadaan sebuah iklan dalam suatu blog adalah selain sebagai "pemanis buatan" juga sebagai fasilitas menangkap rupiah atau dollar. Kali ini akan dibahas cara pembuatan iklan melayang pada template responsive yang terinspirasi dari sobat Arlina sebagai owner dari www.arlinadzgn.com

Iklan ini memiliki ukuran yang fleksibel, sobat bisa tentukan sendiri ukuran iklannya. Bisa 728x90 pixel, 300x250pixel, atau ukuran billboard (970x90 pixel) yang terpenting tidak mengganggu pengunjung yang akan mencari artikel diblog sobat.

Letak iklan ini di bagian footer atau bawah dan tetap, akan terlihat melayang jika sobat menggulung layar ke atas. Ada tombol x(close) untuk menghilangkan iklan tersebut. Kurang lebih seperti itu iklan yang dimaksud kali ini.

Widget Iklan Melayang Responsive

Mari kita langsung saja pada tutorialnya

  1. Login ke Blogger lalu pilih blog sobat yang akan dipakai untuk percobaan memasang widget iklan melayang pada template responsive
  2. Sudah dipilih blognya, lalu pilih "TEMPLATE" dan "EDIT HTML" kemudian cari kode </body>, gunakan fungsi CTRL+F agar memudahkan dalam pencarian
  3. Lalu copy kode dibawah ini dan letakkan persis di atas kode </body>

    <script type='text/javascript'>
    $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
    </script>
    <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
    <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9fVkSoA5laTe2nSE7ayQQhzeCtMYq5-iZ_Ey_p8qJF1Jkzu5PgrJx_Z7-ArQahBAvHQpIbhlXnxWitVsHgjZTbAodiBp4nvuxbVRj8Fg5R4-356p0DeR30CZwXa95D86NIx6f60vRxnz/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
    <a href='#' title='Banner iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
    </div>
    </div>
  4. Simpan pekerjaan sobat, dan lihat hasilnya.
Ayo Like Facebooknya
Tag : Blogging

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat Widget Iklan Melayang Responsive
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 komentar

#OOT cara membuat quote keren seperti postingan di atas gimana caranya gan ?

Balas

Back To Top