CSS3 ile Blogger Bildirim Kutuları (Uyarı,Dikkat,Hatırlatma,Bilgi) Oluşturma

DEMO GÖRÜNÜM

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 </head> kodunu aratıp bulun.
7-Aşağıdaki kodu kopylayın ve 6. adımda bulduğunuz </head> 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'/>

Not:Eğer daha önce yayınladığımız blogger jquery tab menu ekleme isimli konuda 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 Dikkat Kutusu Eklemek için;

[warning headline="Dikkat!"]Mesajınızı Buraya Yazabilirsiniz.[/warning]

Burada Dikkat! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Bilgi Kutusu Eklemek için;

[info headline="Bilgi"]Mesajınızı Buraya Yazabilirsiniz.[/info]

Burada Bilgi yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Hatırlatma Kutusu Eklemek için;

[update headline="Hatırlatma"]Mesajınızı Buraya Yazabilirsiniz.[/update]

Burada Hatırlatma yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Sonuç Kutusu Eklemek için;

[success headline="Sonuç"]Mesajınızı Buraya Yazabilirsiniz.[/success]

Burada Sonuç yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Uyarı! Kutusu Eklemek için;

[alert headline="Uyarı!"]Mesajınızı Buraya Yazabilirsiniz.[/alert]

Burada Uyarı! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Bütün bu işlemleri doğru yaptığınnızda CSS3 ile Blogger Bildirim Kutularını blogunuzda istediğiniz her yere ekleyebilirsiniz.