Blogger Mesaj Kutusu


Blogger Mesaj Kutusu

Merhaba arkadaşlar bu günkü yazımda kendimde kullandığım blogger mesaj kutusu eklentisini sizlere sunuyorum. Ön izleme üst resimdeki gibidir. Hemen anlatıma geçeyim.

İlk olarak aşağıdaki kodu buluyoruz.


]]></b:skin>

Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz.


/* 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/AVvXsEh3yU5-rqb4bfCAI8Hzm1htZ65niUupIOD7Uv-kYZkrSPmXy5ewnWqNHymQzK5oP8uJkOwSt9qrOOlWiOQS7IAQKutyRcHswRcdrUsqw7lYHtvnvBGF3FxMfU7j8srilXFruK5ydb8dUeo/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/AVvXsEh3yU5-rqb4bfCAI8Hzm1htZ65niUupIOD7Uv-kYZkrSPmXy5ewnWqNHymQzK5oP8uJkOwSt9qrOOlWiOQS7IAQKutyRcHswRcdrUsqw7lYHtvnvBGF3FxMfU7j8srilXFruK5ydb8dUeo/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/AVvXsEh3yU5-rqb4bfCAI8Hzm1htZ65niUupIOD7Uv-kYZkrSPmXy5ewnWqNHymQzK5oP8uJkOwSt9qrOOlWiOQS7IAQKutyRcHswRcdrUsqw7lYHtvnvBGF3FxMfU7j8srilXFruK5ydb8dUeo/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/AVvXsEh3yU5-rqb4bfCAI8Hzm1htZ65niUupIOD7Uv-kYZkrSPmXy5ewnWqNHymQzK5oP8uJkOwSt9qrOOlWiOQS7IAQKutyRcHswRcdrUsqw7lYHtvnvBGF3FxMfU7j8srilXFruK5ydb8dUeo/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;
}

Şablonu kaydetip çıkıyoruz

Aşağıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Kodları istediğimiz yere ekleyebilirsiniz.

<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>

Blogger Mesaj Kutusu için “0 yorum” bulunmaktadır.