CSS3 Blogger Bildirim Kutuları

Blogunuzda Hatırlatma,Uyarı,Dikkat,Bilgi, Sonuç,Güncelleme vb. genel bir bildirim yapmada kullanabileceğiniz ve CSS3 ile hazırlanmış renga renk, işlevine göre renklendirilmiş kutucukları blogunuza eklemeyi anlatacağız.Blogger bildirim kutuları, mesaj kutularını kullanarak ziyaretçilerinize, satır aralarında istediğiniz mesajı en iyi şekilde verebilirsiniz.Blogger bildirim kutularını ölçeklendirme gibi bir derdiniz yok, yazdığınız alanın boyutunu otomatik olarak kendisi alır, başlık kısmını da istediğniz gibi kendiniz ayarlayabilirsiniz.Kullanıcının kendine göre rahatça tasarlayabileceği bir şekilde dizayn edilmiş. Örneğin; "dikkat" yazan kutucuğun başlığını isterseniz "Çok Önemli Uyarı" gibi değiştirebilirsiniz.

Blogger Bİldirim Kutularını BLogunuza Eklemek İçin

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp 4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*---- Blog Okulu Blogger Bildirim Kutusu Ekleme ---*/ 
.sc-notification{color:#fff;line-height:1.4em;margin:10px 0 1em;padding:.7em 1.2em;background-color:#ffffe0;border:1px solid #e1db8b;font-size:15px;font-family:helvetica;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.sc-notification .headline{font-size:17px;font-family:oswald,arial;padding-bottom:10px}.sc-notification.sc-warning{background-color:#fc402c;border:1px solid #C91704}
.sc-notification.sc-alert{background-color:#FF8377;border:1px solid #F15C4C}.sc-success.sc-notification{background-color:#2ec23e;border:1px solid #039D14}
.sc-info.sc-notification{background-color:#fdce09;border:1px solid #DFB400}.sc-update.sc-notification{background-color:#29b7ff;border:1px solid #069DE9}
.sc-info.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px}
.sc-update.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px}
.sc-alert.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px}
.sc-success.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px}
.sc-warning.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px}

6-Html kodları içerisinde Ctrl+F yardımı ile kodunu aratıp bulun.
7-Aşağıdaki kodu kopylayın ve 6. adımda bulduğunuz kodunun üst satırına yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

7.adımda verdiğimiz kodun aynısını vermiştik eğer bu kodu daha önce eklediyseniz tekrar eklemenize gerek yoktur.

8- Son olarak da, CSS3 ile Blogger bildirim kutularını yazı içerisinde ekllemek istediğiniz yere aşağıdaki kodları yazmanız gerekiyor.Blogunuza ekleme için eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.

Blogger Bilgi Kutusu Eklemek için;