CSS ile Blogger Uyarı Mesaj Kutuları

   Bu makalemizde sizlere benimde arayarak bulduğum ve yeniden kodlarda düzenleme yaparak sizinle paylaşamaya karar verdim.Blogger sitenizde paylaştığınız yazılarınızda önemli kısımları bu uyarı mesaj kutuları ile belirtebilirsiniz.

CSS ile Blogger Uyarı Mesaj Kutuları Bloguma Nasıl Ekleyebilirim

+ Blogger kumanda panelinden Şablon > HTMK Düzenle tıklıyoruz.
+ CTRL+F tuşları ile altta ki kodu bulun.

]]></b:skin>

+ Bulduğunuz üsteki kodun bir üst kısmına altta ki kodları ekleyin.

.dikkat{ 
        border:solid 1px #DEDEDE; 
        background:#FFFFCC url(http://icons.iconarchive.com/icons/famfamfam/mini/16/icon-alert-icon.png) 8px 6px no-repeat; 
        color:#222222; 
                font-weight:bold; 
        padding:4px; 
        text-align:center; 
    } 
    .onay{ 
        border:solid 1px #90ac13; 
        background:#eef4d3 url(http://icons.iconarchive.com/icons/famfamfam/silk/16/accept-icon.png) 8px 6px no-repeat; 
        color:#6b800d; 
        font-weight:bold; 
        padding:4px; 
        text-align:center; 
    } 
    .yasak{ 
        border:solid 1px #CC0000; 
        background:#F7CBCA url(http://icons.iconarchive.com/icons/famfamfam/silk/16/delete-icon.png) 8px 6px no-repeat; 
        color:#CC0000; 
        font-weight:bold; 
        padding:4px; 
        text-align:center; 
    }

+ Şablonu kaydedip çıkın.
+ Şimdi ise bu onay kutularını yazı içerisinde nasıl kullanabiliriz ona göz atalım.

1. Blogunuzda yeni bir yazı(kayıt) oluştururken HTML kısmına tıklayarak Aşağıda ki kodları ekleyerek yazıya devam etmek için Oluştur kısmına tıklayıp devam edin.

<div class="dikkat"> 
Bilgi Cafem Dikkat Mesaj Kutusu</div>

<div class="onay"> 
Bilgi Cafem Onay Mesaj Kutusu</div>

<div class="yasak"> 
Bilgi Cafem Yasak Mesaj Kutusu</div> 

2. Eğer bu uyarı mesaj kutularından her hangi bir tanesini yazı içerisinde kullanmak isterseniz şu şekilde yapınız.

<div class="yasak"> 
Bilgi Cafem Yasak Mesaj Kutusu</div> 

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!