Css kod ile uyarı kodları ile mesaj kutusu yapimi

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ı Guncellbilgiler.blogspot.com 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.



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


İyi bloglamalar...