Home › Tips n Trick › Web Development › Wordpress

Cara Pasang Banner Melayang tanpa mengganggu

Cara Pasang Banner atau Iklan Melayang di blog pastinya sudah banyak di bahas oleh blogger-blogger di internet. Walaupun cara pemasangannya terkadang berbeda-beda tapi tujuannya sama yaitu untuk menampilkan banner di blog supaya melayang/fixed. Kali ini saya juga ingin berbagi tentang cara membuat iklan/banner melayang di sidebar blog, namun dengan efek yang berbeda dari biasanya. Cara ini saya dedikasikan buat blog WordPress self host soalnya kalo buat engine lain belum nyoba.

Maksud efek “berbeda” itu jadi banner akan melayang/fixed hanya jika sedang kita scroll ke bawah tetapi kalau tidak discroll maka banner tersebut akan tetap ada pada sidebar sesuai dengan urutannya pada widget. Gimana bingung? hehe :P Oke kalau gak ngerti pake kata-kata, langsung lihat contohnya aja deh itu kayak Fans Page yang ada di sidebar sebelah kanan blog ini dan tombol share yang ada di kiri postingan. Coba scroll kebawah, terus scroll lagi keatas. Sekarang tau kan maksudnya? Nah itu maksud saya tadi :D

Oke mau tau caranya? Langsung praktek check it out!

Caranya mudah saja hanya tinggal menambahkan sedikit class di css terus tambahkan sedikit script tambahan pada kode bannernya.

Langkah pertama masuk ke Dashboard wordpress lalu tambahkan class berikut pada style.css theme yang digunakan, lalu simpan.

#sticky.stick { position: fixed; top: 20px; }

Langkah kedua masukan script banner yang ingin ditampilkan dengan format seperti dibawah ini, lalu simpan di widget atau dimana saja yang dinginkan misal sidebar.php atau single.php.

<div id=”sticky-anchor”></div>

<div id=”sticky”>

KODE BANNER

</div>

Selanjutnya coba reload halaman websitenya, apakah scriptnya sudah bekerja? Kalau misalnya belum, coba clear cache browser atau empty cache kalau menggunakan plugin cache dan reload lagi.

Saya menyarankan penggunaan cara ini hanya untuk memasang banner biasa atau fans page, sedangkan untuk memasang iklan ppc seperti misalnya Google Adsense saya sarankan jangan menggunakan metode fixed/melayang karena dari kebanyakan penyedia layanan periklanan (terutama PPC) hal ini  melanggar TOS dan kemungkinan akan kena Banned.

Akhir kata saya ucapkan terimakasih kepada mas leo (majuter.us) yang sudah berbagi script Cara Pasang Banner Melayang tanpa mengganggu ini.

Buat yang kemarin gak work ternyata ada yang  kelupaan, saya lupa nyertain script yang harus ditambahkan di footer.php :D

<script src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“jquery”, “1″);

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $(‘#sticky-anchor’).offset().top;
if (window_top > div_top)
$(‘#sticky’).addClass(‘stick’)
else
$(‘#sticky’).removeClass(‘stick’);
}

google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>

Terimakasih mas Leo dan mas Degagu atas koreksinya :D

  Rate this article:
VN:F [1.9.22_1171]
Rating: 3.9/5 (11 votes cast)
Cara Pasang Banner Melayang tanpa mengganggu 4 out of 10 based on 11 ratings.
   

Ada 29 Komentar untuk tulisan:

Cara Pasang Banner Melayang tanpa mengganggu

  1. Rudy Arra says:
    8 April 2012 at 13:41

    Sepertinya di Blogspot ga bisa ya Kang?

    Reply
    • Atep Saepulloh says:
      8 April 2012 at 13:43

      saya belum coba mas, atau mungkin mas Rudy mau coba mengaplikasikannya di blogspot. Nanti kalau sukses bisa dishare ya :)

      Reply
  2. Edso says:
    19 April 2012 at 00:19

    ijin nyobain dulu mas brooooo

    Reply
  3. Red says:
    21 April 2012 at 20:15

    kok gue gak lihat ada floating image di blog ini masbro?

    Reply
  4. hidayat says:
    23 April 2012 at 09:48

    trims broo atas petunjuknya

    Reply
  5. MASTER SEO says:
    25 April 2012 at 08:41

    mas mau tanya kode ini #sticky.stick {
    position: fixed;
    top: 20px;
    }

    ditambahkan di style css awal pragraf atau akhir paragraf.balas ya .thanks

    aku dah coba tapi ga bisa juga

    Reply
  6. AreL says:
    28 April 2012 at 09:48

    Mas, saya mau nanya neh, bagaimana cara masang tombol share sperti di AtepSaepulloh.com ini, tapi kalau browser na dikecilin, tombol share na menghilang atau pindah ke posisi lain yang tidak menggangu artikel??

    Tujuannya, jika dibuka lewat smartphone yang layarnya kecil dibandingkan komputer, tidak mengganggu artikel…

    Tolong dishare di blog ane y Sob…
    Thanks..

    Reply
    • Atep Saepulloh says:
      28 April 2012 at 17:37

      wah kalau itu saya belum tahu mas, soalnya kalau fixed gitu kan seperti melayang jd kalau layar dikecilin pasti kalau di scroll akan ngalangin posting.
      Tapi saya mau coba cari2 dulu, kalau ada nanti saya share disini :)

      Reply
  7. AreL says:
    28 April 2012 at 21:54

    Ditunggu mas…. :)

    Reply
  8. Degagu says:
    9 June 2012 at 13:10

    rasa nya itu kurang boss. . . .

    klo hnya itu d jamin tak bisa jalan itu code

    // If you have jQuery directly, then skip next line

    google.load(“jquery”, “1″);

    function sticky_relocate() {

    var window_top = $(window).scrollTop();

    var div_top = $(‘#sticky-anchor’).offset().top;

    if (window_top > div_top)

    $(‘#sticky’).addClass(‘stick’)

    else

    $(‘#sticky’).removeClass(‘stick’);

    var window_top = $(window).scrollTop();

    var div_top = $(‘#sticky-anchor2′).offset().top;

    if (window_top > div_top)

    $(‘#sticky2′).addClass(‘stick2′)

    else

    $(‘#sticky2′).removeClass(‘stick2′);

    }

    // If you have jQuery directly, use the following line, instead

    // $(function() {

    // If you have jQuery via Google AJAX Libraries

    google.setOnLoadCallback(function() {

    $(window).scroll(sticky_relocate);

    sticky_relocate();

    });

    Reply
  9. Mas Jamal says:
    23 June 2012 at 23:40

    Kok ane gagal ya mas?

    Reply
  10. Mas Jamal says:
    26 June 2012 at 10:59

    Theme yang saya pake sih pake Genesis Framework. Bisa nggak ya tuh? Sekalian tanya om, itu tombol share yang melayang nama pluginnya apa ya?

    Reply
    • Atep Saepulloh says:
      26 June 2012 at 16:03

      saya tak tau bisa atau tidak mas, coba di trial n error dulu aja :)
      itu tombol share gak pake plugin mas, tapi pake script manual dan digabungkan dengan script yg ada di tulisan ini jadi bisa melayang2.

      Reply
  11. Berita21 says:
    7 July 2012 at 20:48

    Thanks Infonya
    Salam Sukses Dari Berita21.com = Media Online Indonesia

    Reply
  12. Leo Ari Wibowo says:
    2 August 2012 at 12:18

    Benar komentar Degagu. Itu kurang jQuerynya mas.

    <script src=”http://www.google.com/jsapi”></script>
    <script type=”text/javascript”>
    google.load(“jquery”, “1″);

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $(‘#sticky-anchor’).offset().top;
    if (window_top > div_top)
    $(‘#sticky’).addClass(‘stick’)
    else
    $(‘#sticky’).removeClass(‘stick’);
    }

    google.setOnLoadCallback(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
    });
    </script>

    Taruh di footer.php biar tidak memberatkan load blog.

    Reply
    • Atep Saepulloh says:
      7 August 2012 at 19:06

      wah makasih koreksinya mas, kayaknya saya kelupaan nyertain jQuery nya haha :D
      nanti di updatekan :)

      Reply
  13. 3gp Movie says:
    9 August 2012 at 18:31

    mas, kalo mau pasang floating share button kaya punya mas atep gimana caranya ya??

    Reply
    • Atep Saepulloh says:
      10 August 2012 at 07:55

      sama mas menggunakan script ini, kalo yg saya gunakan ini tombol share dan fans page.

      jadi ditambahkan masing2 kode (untuk fans page dan tombol share) :
      misal untuk di css jadi gini:

      #sticky.stick {
      position: fixed;
      top: 20px;
      }

      #sticky2.stick2 {
      position: fixed;
      top: 20px;
      }

      (#sticky.stick untuk fans page dan yg #sticky2.stick2 untuk tombol share)

      terus di footer.php juga ditambahkan jadi gini:

      <script src=”http://www.google.com/jsapi”></script>
      <script type=”text/javascript”>
      google.load(“jquery”, “1″);
      function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $(‘#sticky-anchor’).offset().top;
      if (window_top > div_top)
      $(‘#sticky’).addClass(‘stick’)
      else
      $(‘#sticky’).removeClass(‘stick’);

      var window_top = $(window).scrollTop();

      var div_top = $(‘#sticky-anchor2′).offset().top;
      if (window_top > div_top)
      $(‘#sticky2′).addClass(‘stick2′)
      else
      $(‘#sticky2′).removeClass(‘stick2′);
      }
      google.setOnLoadCallback(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });
      </script>

      selebihnya seperti pada langkah kedua di tutorial diatas saja :)

      Atau sekalian sama script tombol sharenya deh, saya pasang script ini di single.php

      <div id=”sticky-anchor2″></div>
      <div id=”sticky2″>

      <!– Place this tag where you want the +1 button to render –>
      <g:plusone size=”tall”></g:plusone>

      <!– Place this render call where appropriate –>
      <script type=”text/javascript”>
      window.___gcfg = {lang: ‘id’};

      (function() {
      var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
      po.src = ‘https://apis.google.com/js/plusone.js’;
      var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
      })();
      </script>
      <br>
      <br>
      <a href=”https://twitter.com/share” class=”twitter-share-button” data-count=”vertical”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script>
      <br>
      <br>
      <div id=”fb-root”></div>
      <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = “//connect.facebook.net/en_US/all.js#appId=104363586312692&xfbml=1″;
      fjs.parentNode.insertBefore(js, fjs);
      }(document, ‘script’, ‘facebook-jssdk’));</script>

      <div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”50″ data-show-faces=”false” data-font=”verdana”></div>
      </div>
      </div>

      Jika ingin ditambahkan fans page atau banner tinggal masukan script langkah dua di widget, atau dimana saja boleh :D

      <div id=”sticky-anchor”></div>

      <div id=”sticky”>

      KODE BANNER

      </div>

      mohon dikoreksi ya kalau ada yg kelupaan lagi.. hehe

      Reply
  14. agnes26 says:
    29 September 2012 at 11:22

    Adakah ygsudah sukses? minta petunjuknya

    Reply
  15. Andhika Raka says:
    1 October 2012 at 14:31

    Mas, kalau buat widget melayang kayak fanspage yang punya mas, gimana ?

    Reply
  16. Andhika Raka says:
    2 October 2012 at 18:25

    Maksud saya untuk di blogger

    Reply
    • Atep Saepulloh says:
      11 October 2012 at 08:03

      untuk di blogger saya blm coba mas, silahkan dicoba saja. nanti kalau sudah berhasil dishare ya mas :)

      Reply
  17. Mister Complete says:
    26 October 2012 at 02:14

    bos saya cari yang untuk blogger bos ditunggu bos postinggannya.

    Reply
  18. Abdul Gafur says:
    19 November 2012 at 20:09

    Wah, ini sudah lama saya cari-cari sih mas…
    Plugin wordpress-nya sepertinya juga gak ada ya?
    Terima kasih sudah posting, saya izin bookmark dulu. Insya Allah saya praktekin nanti :)

    Reply
  19. serba terbaru says:
    5 December 2012 at 08:21

    kalo buat blogger gimana ya mas bro?

    Reply
Berikan tanggapan Anda:
Warning!
Berkomentarlah dengan menggunakan kata-kata yang sopan dan sesuai dengan topik yang sedang dibahas. Tidak diperkenankan melakukan Junk/Spam dan atau menyertakan link pada isi komentar. Jika begitu, maka sudah dipastikan komentar anda akan dinyatakan sebagai spam.

Apr
7
2012





 

Cara Pasang Banner Melayang tanpa mengganggu

Copyright © 2013 - AtepSaepulloh.com | Berbagi Informasi All Rights Reserved.

Theme by: Tricks-Collections.Com modified by AtepSaepulloh.Com.