Nisan 28, 2012

CSS Tasarımlı Uyarı Kodları İle Mesaj Kutusu Yapımı


Css kod ile uyarı kodları ile mesaj kutusu yapimi
Bu konu da CSS ile uyarı kodlarının yapımını anlatacağım sizlere... Aşağıdaki resimde de gördüğünüz gibi 4 çeşit kod seçeneği ve bunların nasıl kullanılacağına dair bilgileri vereceğim sizlere.

Kumanda Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını Genişlet yolunu takip ettikten sonra; CTRL+F yardımıyla aşağıdaki kodu buluyoruz

]]></b:skin>

Yukarıdaki kodu bulduktan hemen sonra hemen üstüne gelecek şekilde aşağıdaki kodları yapıştırıyoruz:
/* Bu CSS Dökümanı Bloglamazamani tarafından duzeltilmistir  */
body
{
    background-color:#f9f9f9;
    width:600px;
    padding:10px 0 0 0;
    margin:0 auto;
    font:12px/23px Tahoma, Geneva, sans-serif;
}
.logo
{
    margin:10px 0 20px 0;
    text-align:center;
}
.basarili
{
    background:url(http://4.bp.blogspot.com/-jeu83lGlWHs/T5uOBF3BUmI/AAAAAAAACn4/NbgkRV3RqNM/s1600/buton-sprite.png) #eefec2 no-repeat left;
    background-position: left -11px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #badc5d;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.uyari
{
    background:url(http://4.bp.blogspot.com/-jeu83lGlWHs/T5uOBF3BUmI/AAAAAAAACn4/NbgkRV3RqNM/s1600/buton-sprite.png) #ffe59d no-repeat left;
    background-position: left -89px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #c8b26f;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.hata
{
    background:url(http://4.bp.blogspot.com/-jeu83lGlWHs/T5uOBF3BUmI/AAAAAAAACn4/NbgkRV3RqNM/s1600/buton-sprite.png) #fcd5d5 no-repeat left;
    background-position: left -159px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #a76464;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.bilgilendirme
{
    background:url(http://4.bp.blogspot.com/-jeu83lGlWHs/T5uOBF3BUmI/AAAAAAAACn4/NbgkRV3RqNM/s1600/buton-sprite.png) #e9f1f4 no-repeat left;
    background-position: left -229px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #566a76;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}

Daha sonra Şablonu Kaydedip çıkıyor. CSS KODU hazır...
Şimdi gelelim nasıl kullanılacağına.

<div class="basarili">
BLOGLAMA ZAMANI onay kutusudur.</div>
<div class="hata">
BLOGLAMA ZAMANI hata  kutusudur.</div>
<div class="uyari">
BLOGLAMA ZAMANI uyari kutusudur.</div>
<div class="bilgilendirme">
BLOGLAMA ZAMANI bilgilendirme kutusudur.</div>

Yukarıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Yapamadığınız bir şeyler olursa YORUM kısmından belirtin.

İyi bloglamalar...

1 yorum :

güzel tasarımlar teşekkürler

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.