Membuat Kotak Pesan Dengan Jquey Dan Css

B

anyak diantara blogger2 yang menggunakan kotak pesan ini sebagai media untuk pengunjung,para blogger biasa nya memasukkan iklan-iklan pada kotak pesan ini.Sebagai contoh sobat bisa melihatnya pada munculan kotak pesan dari atas.Untuk membuatnya kita hanya menambahkan kode css dan sedikit kode jquery juga.
Untuk membuat kotak pesan dengan jquery dan css sebagai berikut:
1. Sobat login terlebih dahulu
2. Setelah login sobat pilih rancangan
3. Kemudian pada halaman gadget sobat pilih add gadget
4. Pilih Html/javascript
5. Copas semua kode css dan jquery dibawah ini dan masukkan.

<div id="kotak-pesan">
Masukkan kode iklan atau pesan sobat disini
<a class="close" href="#">×</a></div>
<style>
#kotak-pesan {
  position:fixed !important;
  position:absolute;
  top:-1000px;
  left:50%;
  margin:0px 0px 0px -182px;
  width:300px;
  height:auto;
  padding:16px;
  background:rgba(0,0,0,.5);
  border:2px solid #fff;
  font:normal 1em Cambria,Georgia,Serif;
  color:#fb0;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#kotak-pesan a.close {
  position:absolute;
  top:-55px;
  right:-50px;
  background:#333;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:#fff;
  border:2px solid #fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
</style>
<script type="text/javascript">
$(window).bind("load", function() {
     $('#kotak-pesan').animate({top:"200px"}, 1000);
     $('a.close').click(function() {
          $(this).parent().fadeOut();
     return false;
     });
});
</script>

6. Simpan dan lihat hasilnya.

Selamat Mencoba Sobat

Contoh Kotak Pesan Dengan Jquery Dan Css
×

Artikel Terkait:

Penulis : d_seven ~ Tutorial Blogger Untuk Pemula

Artikel Membuat Kotak Pesan Dengan Jquey Dan Css By d_seven,. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: pada postingan Membuat Kotak Pesan Dengan Jquey Dan Css