Blogger mesaj kutusu eklentisi

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/AVvXsEj4rViAux0E3JRL9E7crY4Cs8zaxWXVvsVePqmXTU_Ta3TE6bhzNK6qDDuOT8D32EbSNA-EehBPT7AQFWnO1kZZI-Co7UsN9lFJEhdskYqtQ20i4EXaxZtR2m8w2J57Y4unya6ebmoyQEU/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/AVvXsEj4rViAux0E3JRL9E7crY4Cs8zaxWXVvsVePqmXTU_Ta3TE6bhzNK6qDDuOT8D32EbSNA-EehBPT7AQFWnO1kZZI-Co7UsN9lFJEhdskYqtQ20i4EXaxZtR2m8w2J57Y4unya6ebmoyQEU/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/AVvXsEj4rViAux0E3JRL9E7crY4Cs8zaxWXVvsVePqmXTU_Ta3TE6bhzNK6qDDuOT8D32EbSNA-EehBPT7AQFWnO1kZZI-Co7UsN9lFJEhdskYqtQ20i4EXaxZtR2m8w2J57Y4unya6ebmoyQEU/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/AVvXsEj4rViAux0E3JRL9E7crY4Cs8zaxWXVvsVePqmXTU_Ta3TE6bhzNK6qDDuOT8D32EbSNA-EehBPT7AQFWnO1kZZI-Co7UsN9lFJEhdskYqtQ20i4EXaxZtR2m8w2J57Y4unya6ebmoyQEU/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 kaydedip çıkıyoruz.

Aşağıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Kodları istediğiniz 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>