Catatan Hadi : Membuat Flying Messege Pada Website

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.

<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.

DOWNLOAD DISINI

Jika sudah anda download,
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

Catatan Hadi

Pages

Sabtu, 09 Maret 2013

Membuat Flying Messege Pada Website

Tidak ada komentar:

Posting Komentar