Flying Messege merupakan suatu teknik yang ada pada JQuery, biasanya teknik ini digunakan untuk menampilkan atau memasang iklan pada website. Sebagai contoh, misalnya anda bekerja sebagai programmer disuatu perusahaan, dan anda disuruh memasang banyak sekali iklan pada website perusahaan tersebut. Mungkin anda bingung meletakkan iklan tersebut dimana, karena website tersebut sudah penuh dengan kontent yang lain. Sekarang anda tidak perlu bingung lagi, karena dengan menggunakan teknik ini, tentunya tidak akan mengganggu kontent yang lain.
Untuk lebih jelasnya,
Perhatikan contoh berikut.
sebelumnya siapkan gambar untuk tombol close, jika anda belum memiliki,
bisa anda save gambar dibawah ini:
setelah itu,
Buatlah program untuk menampilkan teks, misalnya isi dari website tersebut.
sebelumnya siapkan gambar untuk tombol close, jika anda belum memiliki,
bisa anda save gambar dibawah ini:
setelah itu,
Buatlah program untuk menampilkan teks, misalnya isi dari website tersebut.
<html>
<head>
<title> Algortima-cyber.blogspot.com - Flying Message </title>
</head>
<body bgcolor="black">
<div id="message_box">
<img id="close_message" style="float:right ;cursor:pointer" src="gambar/silang.png">
DAPATKAN BERBAGAI TUTORIAL DIMULAI DARI PEMROGRAMAN, HACKING, NETWORKING, DESAIN GRAFIS
<br>DAN MASIH BANYAK LAGI <br> <font color="760122">HANYA DI ALGORITMA-CYBER.BLOGSPOT.COM</font>
</div>
<br><br><br><br><br> <center>
<h1><font color="white">BLOG TUTORIAL</h1>
<h3>http://www.algoritma-cyber.blogspot.com<h3>
</body>
</html>
Jika anda jalankan program tersebut.
akan menghasilkan output seperti gambar dibawah ini:
Tampilan tersebut masih berantakn bukan,
untuk itu tambahkan css berikut ini pada program anda tepat diatas kode </head>
<style type="text/css">
#message_box {
position: absolute;
top: 10; left:250;
z-index: 10;
background:#c1c1c1;
padding:5px;
border:5px solid red;
text-align:center;
font-weight:bold;
width:59%;
}
</style>
jika anda jalankan program anda lagi,
hasil outputnya akan tampil seperti gambar dibawah ini
terlihat lebih rapih kan,
perhatkan iklan yang sudah muncul pada website anda,
setiap kali anda membuka website anda, iklan tersebut akan muncul.
jika ingin menutup iklan tersebut, anda cukup menekan tombol close yang ada dipojok kanan.
tetapi jika anda klik sekarang tentunya masih belum bisa,
karena kita perlu menambahkan skript lagi.
sebelum itu anda harus memiliki library dari jquery, yaitu jquery.js,
yang bisa anda download melalui link dibawah ini.
Jika sudah anda download,
tambahkan skrip berikut untuk memanggil library tersebut, tepat dibawah kode <head>
lalu tambahkan javascript tepat dibawah kode tersebut.
sekarang coba anda jalankan program anda lagi.
akan menghasilkan output seperti ini
dan ketika anda klik tombol close yang ada dipojok kanan atas.
maka iklan tersebut akan tertutup, seperti gambar dibawah ini
tambahkan skrip berikut untuk memanggil library tersebut, tepat dibawah kode <head>
<script type="text/javascript" src="jquery/jquery.js"></script>
lalu tambahkan javascript tepat dibawah kode tersebut.
<script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); }); $('#close_message').click(function(){ $('#message_box').animate({ top:"+=15px",opacity:0 }, "medium"); }); }); </script>
sekarang coba anda jalankan program anda lagi.
akan menghasilkan output seperti ini
dan ketika anda klik tombol close yang ada dipojok kanan atas.
maka iklan tersebut akan tertutup, seperti gambar dibawah ini
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia