Css kod ile uyarı kodları ile mesaj kutusu yapımı

Css kod ile uyarı kodları ile mesaj kutusu yapımı

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 bilgilerivereceğ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSP34eMBFF8o0bANtBrbYK_FlxcU0PAv2TaKmznDI2SI3ovSlFFF_wEHKVBEDu7eTDGnpgojiRDZh0POpZRtLn2ZJ_jTEwS9-LW5tP5Iio6ZSuGuTalG3ejfmVjBkZbLPA_XvoxPJARbM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSP34eMBFF8o0bANtBrbYK_FlxcU0PAv2TaKmznDI2SI3ovSlFFF_wEHKVBEDu7eTDGnpgojiRDZh0POpZRtLn2ZJ_jTEwS9-LW5tP5Iio6ZSuGuTalG3ejfmVjBkZbLPA_XvoxPJARbM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSP34eMBFF8o0bANtBrbYK_FlxcU0PAv2TaKmznDI2SI3ovSlFFF_wEHKVBEDu7eTDGnpgojiRDZh0POpZRtLn2ZJ_jTEwS9-LW5tP5Iio6ZSuGuTalG3ejfmVjBkZbLPA_XvoxPJARbM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSP34eMBFF8o0bANtBrbYK_FlxcU0PAv2TaKmznDI2SI3ovSlFFF_wEHKVBEDu7eTDGnpgojiRDZh0POpZRtLn2ZJ_jTEwS9-LW5tP5Iio6ZSuGuTalG3ejfmVjBkZbLPA_XvoxPJARbM/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.

Tweet