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 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ı www.okanisli.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgAsU_PrspJfXHIjgJwkDM08fAtPRQH3IUnzAw719nJbgPyPrKviu7SjNyxQhxxXFH7URG6a1lhg8p5df6GqlPCXE5SM_PHyEZbjG0Rl4n4CkwZhyaXIU0x_bdC6a97QVdxiv2h8bYNQ/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/AVvXsEizgAsU_PrspJfXHIjgJwkDM08fAtPRQH3IUnzAw719nJbgPyPrKviu7SjNyxQhxxXFH7URG6a1lhg8p5df6GqlPCXE5SM_PHyEZbjG0Rl4n4CkwZhyaXIU0x_bdC6a97QVdxiv2h8bYNQ/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/AVvXsEizgAsU_PrspJfXHIjgJwkDM08fAtPRQH3IUnzAw719nJbgPyPrKviu7SjNyxQhxxXFH7URG6a1lhg8p5df6GqlPCXE5SM_PHyEZbjG0Rl4n4CkwZhyaXIU0x_bdC6a97QVdxiv2h8bYNQ/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/AVvXsEizgAsU_PrspJfXHIjgJwkDM08fAtPRQH3IUnzAw719nJbgPyPrKviu7SjNyxQhxxXFH7URG6a1lhg8p5df6GqlPCXE5SM_PHyEZbjG0Rl4n4CkwZhyaXIU0x_bdC6a97QVdxiv2h8bYNQ/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.Blogunuza yeni kayıt oluştururken HTML’yi Düzenle bölümünü açın ve buraya aşağıdaki kodları yazın:
<div class="basarili">
www.okanisli.blogspot.com onay kutusudur.</div>
<div class="hata">
www.okanisli.blogspot.com hata kutusudur.</div>
<div class="uyari">
www.okanisli.blogspot.com uyari kutusudur.</div>
<div class="bilgilendirme">
www.okanisli.blogspot.com bilgilendirme kutusudur.</div>Yukarıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Yapamadığınız bir şeyler olursa YORUM kısmından belirtin.
