Membuat Kotak Pesan Muncul dari Atas dengan jQuery
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:
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='#'>×</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
menjadi50px
. 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:Setelah itu ubah perintahnya menjadi seperti ini:
begitu saja.
Putra
@Taufik Nurrohman Kok gak bisa yooh?? :(
Taufik Nurrohman
@Alam Perwira Ah, masaaaaaa... <:)
Demo: http://jsfiddle.net/tovic/awq4Y/
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:
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
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:
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
danleft
saja ko.azewBz
mas`klau demo yg di atas code Jquery nya kya gimna?
sempet saya untak atik sperti ini.
mlah`overlay nya yg menetupi kotak melayangnya,,!!
jdi ga bisa close
Taufik Nurrohman
Sejak awal masalahmu cuma di
z-index
. Titik. Tidak perlu mengutak-atik kode JQuery.http://www.google.com/search?q=css+z-index
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