Membuat Kotak Pesan Muncul dari Atas dengan jQuery

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
jQuery Kotak Pesan Muncul dari Atas

Kali ini Saya akan memberikan satu lagi tip sederhana, dan masih menggunakan potongan kode yang sama seperti saat Anda menciptakan efek animasi loading dengan jQuery. Pada intinya di sini Saya akan menganimasikan nilai top untuk menciptakan efek kotak pesan yang muncul dari atas perlahan-lahan. Saya menggunakan dua bahan utama, yaitu potongan kode ini dan sedikit pemanfaatan efek .animate() (pelajari di sini) untuk menciptakan efek animasi kotak pesan mucul dari atas menuju ke bawah:

Lihat Demo

HTML 

Pertama-tama kita bangun kerangka kotak pesan seperti ini. Sangat sederhana, hanya terdiri dari sebuah area dan sebuah tautan yang akan kita jadikan sebagai tombol penutup kotak pesan:

<div id='kotak-pesan'>

    <!-- KONTEN DI SINI -->

    <a class='close' href='#'>&times;</a>
</div>

CSS 

Setelah itu berikan beberapa sentuhan, terutama mengenai posisi, karena di sini kita akan membuat kotak pesan melayang, jadi aturlah posisinya agar melayang. Perhatikan bahwa Saya menuliskan nilai top sebesar -1000px. Hal ini akan membuat kotak tidak terlihat karena posisinya terletak -1000 piksel jauh di atas layar peramban:

#kotak-pesan {
  position:fixed !important;
  position:absolute; /* IE6 */
  top:-1000px;
  left:50%;
  width:300px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#E9CF5F;
  border:2px solid white;
  font:normal normal 1em/normal Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

#kotak-pesan a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#333;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:white;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}

jQuery 

Terakhir, kita tuliskan kode jQuery dengan peraturan seperti ini:

“Saat halaman telah sepenuhnya dimuat, animasikan nilai top dari -1000px menjadi 50px. Kemudian, saat tombol close diklik, hilangkan kotak pesan dengan efek .fadeOut()”.

<script>
$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"50px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>

Tidak ada hal lain lagi yang bisa dituliskan setelah ini. Pada intinya, sisanya tergantung kreativitas Anda. Terutama mengenai konten apa yang akan Anda masukkan di dalam kotak pesan tersebut. Namun di sini akan muncul sebuah masalah yang sangat umum dan seringkali diremehkan. Jika kita menciptakan kotak pesan melayang dalam sebuah situs, tentunya akan sangat mengganggu jika kotak pesan tersebut muncul setiap saat. Untuk mengatasi masalah itu, Anda bisa memanfaatkan tag kondisional untuk mengatur kemunculan kotak pesan agar hanya muncul pada halaman depan saja misalnya » Pelajari di sini

43 Komentar

  • Unknown

    ini dia bang yang aku maksud, thanks yah udah di post

  • Taufik Nurrohman

    @system of blog: Samah samah...

  • Unknown

    mantap sob... hadir kembali di blog anda... hadir dengan membawa perdamaian... maaf baru hadir... :)

  • Aldi

    waduhh .. bang kayanya bakalan jadi pengunjung setia blog ini nihh .. heheheh

    jangan lupa mampir yaa sob ..
    www.zengbogel.blogspot.com ..
    klo bisa pengen temenan di fb nih sob boleh gaa ??

    add yaa
    https://www.facebook.com/zenx.bhogel

  • ICHINK.WEB.ID

    Tutorialnya mantep mas, aku terheran-heran kalo ke sini. Ada tutorial yang buat WP gak mas, penasaran kalo wordpress diutak atik ala hompimpahalaihumgambreng jadi kaya apa, hehe...
    salut lah mas :)
    Dumatika.com

  • Taufik Nurrohman

    @Manusia BiasaPengennya sih begitu tapi sayangnya kalo mau belajar WP musti modal dulu haha..

    • Unknown

      cari-cari free-nya aja mas...
      saya selalu berkunjung ke blog ini tiap hari... haha
      banyak belajar dari blog ini dan selalu terheran-heran dengan ide-ide mas yang diimplementasikan di blognya mas, apa lagi kalo klik klik templatenya hompimpa... (berdecak kagum):-D

  • Anonim

    mas, klo pengen boxnya munculnya pada saat di klik kaya gmana scriptnya??? :D

  • Taufik Nurrohman

    @miretahutempe Karena di sini pemicu animasinya adalah perintah $(window).bind("load"), maka untuk mengubah kotak pesan agar tampil saat diklik adalah dengan membuat elemen pemicu tersendiri. Misalnya sebuah tombol seperti ini:

    <button class='open'>Buka Kotak Pesan!</button>

    Setelah itu ubah perintahnya menjadi seperti ini:

    $(function() {
    $('button.open').click(function() {
    $('#kotak-pesan').animate({top:"50px"}, 1000);
    return false;
    });
    $('a.close').click(function() {
    $(this).parent().animate({top:"-1000px"}, 1000);
    return false;
    });
    });

    begitu saja.

  • Putra

    @Taufik Nurrohman Kok gak bisa yooh?? :(

  • Taufik Nurrohman

  • Putra

    @Taufik Nurrohman dibuat 2 gtu maksud saya maas, satu buat like box yg otomatis keluar satunya buat custom search yg harus dipencet tombolnya :D

  • Unknown

    Mas, kalau munculnya cukup satu kali pada awal saat pengunjung datang, bisa nggak ya? :). Soalnya kalau di tag kondisional agak susah juga. Hehe. trimakasih

  • Taufik Nurrohman

    @Mivt elRahman Bisa. Itu memakai Cookie. Cara kerjanya persis seperti saat kita login ke Blogger, kemudian kita mengeklik pilihan "ingat saya?"
    Setelah pilihan tersebut diklik, maka meskipun peramban telah ditutup, kemudian kita membuka peramban lagi lalu mengunjungi Blogger maka kita tidak perlu melakukan login untuk yang ke dua kalinya karena cookie login sudah tersimpan di peramban yang kita pakai.
    Anggapan bahwa tag kondisional lebih sulit dibandingkan JavaScript Cookie http://techpatterns.com/downloads/javascript_cookies.php sebenarnya salah besar. Lebih baik mulai ke tag kondisional dulu :-bd

  • Unknown

    Mas saya mau buat kotak pesan ini dengan konten facebook like box.

    Saya pasang CSS dan HTML pada widget seperti ini dia bentuknya :
    < style >
    CSS
    < /style >
    HTML

    Lalu saya pasang jQuery diatas

    Tapi kenapa tidak muncul kotak pesannya, Mas?

    • Taufik Nurrohman

      Tunggu sampai loadingnya berhenti.

      • Unknown

        Mas Taufik, saya lihat source blog ini, kemana semua CSS blognya? Saya benar-benar aneh melihat source blog ini. Seperti tataan PHP pdalan HTML. Gimana ceritanya Mas?

        Tolong balasannya yahh.. :)

        • Taufik Nurrohman

          Klak... klik... klak... klik... nanti nemu ini:

          http://hompimpa.googlecode.com/svn/trunk/personal/css/main.css
          • Unknown

            Tolong Mas langkah-langkah (rangkuman)-nya saja Mas.
            Seharusnya ini yang banyak dilakukan bloggers untuk melindungi blognya dari ancaman pelagiat. Tapi saya lihat baru Mas Taufik yang melakukan ini.

            Tolong Mas pencerahannya, saya benar2 banyak belajar dari Mas Taufik. Makasih sekali lagi Mas. :D

          • Putra

            malah keenakan pengcloninglah. CSS udah terangkum di satu link exsternal, tinggal nyari kerangka sama jquery haha =D

            • Unknown

              Gag juga lahh sob.
              Perhatikan blog ini : copytemplatembt.blogspot.com
              dengan blog ni : moreblogtools.com

              Blog 1 meniru blog 2, perhatikan sourcenya.
              Gampang bgt nirunya, aku mala gag tw sebelumnya trick Mas Taufic nyimpen CSS menggunakan google code.

          • Unknown

            emh.... jadi CSS blog ini di-host di tempat lain?? tolong dong mas cara konekin ke template blog kitanya kaya gimana????
            saya pengen nih mas buat mempercepat loading blog juga bisa kan mas??? :-)

  • MUX SPARROW

    Mas. yang ini bisa diatur pake timer gak munculnya, misalnya muncul 10 detik setelah loding?

    • Taufik Nurrohman

      $(document).ready(function() {
      setTimeout(function() {
      // animasikan nilai `top` 10 detik kemudian
      $('#kotak-pesan').animate({top:"50px"}, 1000);
      }, 10000); // satuan milidetik
      // hilangkan kotak pesan saat tombol (x) diklik
      $('a.close').click(function() {
      $(this).parent().fadeOut();
      return false;
      });
      });
      • Unknown

        Mas Taufik tolong lah diberitahu caranya...

      • MUX SPARROW

        Sip..! makasih banyak, Mas Taufik.. :D

  • Unknown

    mas kalo membuat kotak pesan ini isinya diganti dengan artikel pada blog kita bisa ga mas?? kaya yang di template blog versi dinamis gitu, jadi artikel kan tampil dalam bentuk snippet, kemudian ketika readmore diklik, ga perlu loading lagi, karena artikel muncuk dalam bentuk pop out kotak pesan... saya pengen mengimplementasikan hal itu ke template blog yang biasa... mohon bantuannya ya mas saya ga terlalu mengerti koding, baru belajar, selama ini masih Copas ^_^

    • Taufik Nurrohman

      Bisa. Pakai Blogger API. Tapi nggak mungkin bisa dibuat tutorialnya. Panjang!

  • Unknown

    mas saya pengen bikin kotak pesan ini isinya contact form, tapi boton-nya ada pada menu, dan menyatu dengan menu, layaknya menu-menu yang lainnya, gimana ya mas cranya??

    • Taufik Nurrohman

      Tambahkan atribut class="close" pada item menu.

      • Unknown

        maksudnya memasukan class close di tag a gitu atau gimana mas??

  • Anonim

    jujur saya tidak bisa memasangnya -_- haduh bodoh diriku...

    bingung kode css dipasang dibagian mana, dan jquerynya juga musti dipasang dimana! heu

    kaze kate
    masih baru mengenal yang seperti ini :D

  • Anonim

    tadi tuh saya baca ada postingan

    kode HTML pasang di widget (tambah gadget)
    kode CSS letakkan diatas kode ]]><
    kode jQuery letakkan dibawah kode ]]><

    tapi yang mana ya? ah yang penting praktekin ajalah! hihi

  • azewBz

    mas kalu di button open bikin jdi kaya link bisa ga?

    Contoh :

    Jadi yang Menu nya di samain kaya Home, About,
    ( tidak ada kotak putih pada contoh yang di lingkari di atas )

    Tapi pungsinya sama bisa open widget yang tampil..!!

    • Taufik Nurrohman

      Pakai tautan saja:

      <a class="open-widget" href="#">Menu</a>
      $('.open-widget').click(function() {
      return false;
      // buka widget...
      });
      • azewBz

        kalau munculnya di bawah atau di pinggir itu gmna mas ?
        saat di klik

        • Taufik Nurrohman

          Dimodifikasi saja propertinya. Cuma di dalam lingkup properti top, right, bottom dan left saja ko.

  • azewBz

    mas`klau demo yg di atas code Jquery nya kya gimna?

    sempet saya untak atik sperti ini.

    $(window).bind("load", function() {
    $('#kotak-pesan').animate({top:"50px"}, 1000);
    $('#kotak-overlay').fadeTo("normal", 0.4).show();
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });

    mlah`overlay nya yg menetupi kotak melayangnya,,!!
    jdi ga bisa close

  • Jarilangit

    Mas saya sudah praktekan kode diatas dan hasilnya ok banget apik !, yang saya tanyakan adalah bagaimana jika ingin kotak tersebut bisa menutup secara otomatis jika pengunjung tidak meng klik tanda "X", (tentu dengan timer sekian detik) hal ini sering saya liat di yahoo, dan saya juga sudah coba di blog saya (kenyoot.blogspot.com) tapi saya tidak bisa mengubah Cssnya agar seperti punya mas taufik. terimaksih mas saya tunggu jawaban sampean dengan segera (pake pos kilat :Q )

  • Jarilangit

    oh ya, saya dapat koding yang saya pasang dan coba di kenyoot blogspot dari situs luar, cssnya audhubillah minzalik, panjang banget, mumet saya bacanya

  • Ariana

    mas klo yang model seperti blog ini gmna ya, jadi untuk membantu visitor menjelaskan deteil navigasi yang ada di blog kita. ini referensinya : http://urang-kurai.blogspot.com/2013/07/75-blogazine.html

  • Unknown

    Terimakasih. Semoga menjadi ilmu bermanfaat fidunya wal akhiroh. Amin

Komentar telah ditutup.