Merhaba değerli okuycularım :)

Bu yazımda size kendi editlediğim duyuru kutuları sunacağım .

Önizleme :










Öncelikle Sol menü'den Şablonu seçiyoruz >> Html Düzenle'ye tıkladıktan sonra CTRL F yardımıyla ( ]]></b:skin> ) kodunu buluyoruz. Bulduktan sonra ]]></b:skin> 'un hemen üstüne aşağıdaki kodu ekliyoruz.

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }


  .basarili {
    margin:15px 0;
  }

  .basarili {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAu-lBgMu8oWyGGbX06g2Fb4nwCrUplrIQLXaxGUSZiRM8MdtAaY6BgZ8-hsu42fvt715oDAwniQZr0Ws7KmSwacozXS_q6RzBm885hn_vHtAzpmduATzpVp_BVpQMprMyBzCYYte7TpKl/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .duyuru {
    margin:15px 0;
  }

 .duyuru {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(http://www.arcusanaokulu.com/wp-content/themes/pt/images/icon-duyurular.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

 .guvenli {
    margin:15px 0;
  }

  .guvenli {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcUO_sLIU9TnCAwidK6LfAPvKbLi8QROHR7bpz_yrcgQeQ_7zIQi8WqMujp_DDsjUi03u7QvPSkmdRLu3HOhdgIlTX9bRO2SqcGrabrt4yFJBhm8e6QSe7I8BpBz70zaIBhMJWqDm_v2q/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .hatali {
    margin:15px 0;
  }

 .hatali {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(http://www.impan.pl/BC/Help/false.gif) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  } 

Kutucuk Kodları : 
Bunları yaptıktan sonra aşağıdaki kodlardan 1'ni yada hepsini fark etmez  kutucuklar nerde görünmesini istiyorsanız oraya yapıştırıyoruz.
'' Sosyaldahi demo '' yazısını silerek kutucukta ne yazmasını istiyorsanız onu yazın.

Başarılı Kodu: <div class="basarili"> Basarılı: Sosyaldahi Demo </div> 

Duyuru Kodu: <div class="duyuru"> Duyuru: Sosyaldahi Demo </div> 

Güvenli Kodu: <div class="guvenli"> Güvenli: Sosyaldahi Demo </div> 

Hatalı Kodu: <div class="hatali"> Hatalı: Sosyaldahi Demo </div>