Kapanır Duyuru Kutusu

Merhaba arkadaşlar css duyuru kutucuğu kodunu sizlere sunuyorum. Bu kod ile sitenizde olan bitenleri ziyaretçilerinize kapanabilen bir kutu haline duyurabileceksiniz.. Konuyu uzatmadan kodları veriyorum.. Kodları 3 kod olarak ayırdım. 

Css kısmına eklenecek kod:

<link type="text/css" rel="stylesheet" media="screen" href="http://img41.xooimage.com/files/4/c/f/288cc5f.css" />  <script src="http://www.psdup.com/demo/bilgilendirme/js/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript"> 
$(document).ready(function(){
$('.ku').click(function() {
$('#uyari').fadeTo('slow', 0);
$(this).slideUp(0);
});
 
$('.kh').click(function() {
$('#hata').fadeTo('slow', 0);
$(this).slideUp(0);
});
 
$('.kb').click(function() {
$('#basarili').fadeTo('slow', 0);
$(this).slideUp(0);
});
 
});

---

Buda duyuru kutucuğunun HTML kodu:

<div id="uyari"><span class="kapat ku">X</span>

<h4>Ben Bir Uyarı Mesajıyım</h4>

<p>Uyarı mesajı.. Yazan Blog</p>

</div>

 

 

<div id="hata"><span class="kapat kh">X</span>

<h4>Hata Mesaj Başlığı</h4>

<p>Reklam Hatası Hatası.. Yazan Blog</p>

</div>

 

 

<div id="basarili"><span class="kapat kb">X</span>

<h4>Başarılı Mesaj Başlığı</h4>

<p>Başarı mesajı.. Yazan Blog</p>

</div>

---

Önizlemesi için tıklayın.

Kaynak:http://yazan-blog.tr.gg/kapanir-duyuru-kutusu.htm