Blogger Mesaj Kutusu Eklentisi

Etiketler : blogger eklentileri

Merhaba arkadaşlar bu günkü yazımda sizlere blogger mesaj kutusu eklentisini göstereceğim ön izleme üst resimdeki gibidir hemen anlatıma geçeyim.

İlk olarak aşşağıdaki kodu blogger'imizde aratıp buluyoruz.

]]></b:skin>




Bulduğumuz kodun hemen üstüne aşşağıda yazdığımız kodu kopyalayıp 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/AVvXsEhIXKlpgeQr7sHj4m2oPZIRrdj3qcEA_ach2uJsJ8CHvk9v5H4piQ435wl_L5YhFg919dzsesx9BOJj1BygZ3XrR8aGWleuMbQX10QP8h1mCdYOdNkgRxitda2rvN-JzHCDeM8AfVEV4QA/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/AVvXsEhIXKlpgeQr7sHj4m2oPZIRrdj3qcEA_ach2uJsJ8CHvk9v5H4piQ435wl_L5YhFg919dzsesx9BOJj1BygZ3XrR8aGWleuMbQX10QP8h1mCdYOdNkgRxitda2rvN-JzHCDeM8AfVEV4QA/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/AVvXsEhIXKlpgeQr7sHj4m2oPZIRrdj3qcEA_ach2uJsJ8CHvk9v5H4piQ435wl_L5YhFg919dzsesx9BOJj1BygZ3XrR8aGWleuMbQX10QP8h1mCdYOdNkgRxitda2rvN-JzHCDeM8AfVEV4QA/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/AVvXsEhIXKlpgeQr7sHj4m2oPZIRrdj3qcEA_ach2uJsJ8CHvk9v5H4piQ435wl_L5YhFg919dzsesx9BOJj1BygZ3XrR8aGWleuMbQX10QP8h1mCdYOdNkgRxitda2rvN-JzHCDeM8AfVEV4QA/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;
}




Kodlarımızı ekledikten sonra şablonumuzu kaydedip çıkıyoruz.




Aşşağıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Kodları istediğiniz yere ekleye bilirsiniz.

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