Blogger �zel Bilgi Not Ve Uyar� Mesaj Kutusu Yap�m�

Merhabalar yeni bir blogger konusu hakk�nda kar��n�zday�m.Bu yaz�mda blogger yaz� i�i not kutular�ndan bahsedicem.

Bu konu hakk�nda daha �nce bir anlat�m yapm��t�m dilerseniz burdan onada g�z atabilirsiniz.
Burdakide ayn� sonu� fakat CSS farkl� yani not kutular� daha farkl� stillere sahip fazla uzatmadan anlat�ma ge�iyorum ad�mlar� izleyin. Unutmadan �ablonun bir kopyas�n� almay� unutmay�n ne olur ne olmaz.

Blogger bilgi uyar� ve not kutusu nas�l yap�l�r?

• �lk olarak blogger panelimizden �ablon-HTML'yi D�zenle yolunu takip edip kodlar�m�z� a��yoruz. Kodlar�m�z i�erisindeki ]]></b:skin> kodunu buluyoruz. Bunu CTRL+F tu�lar�na bas�p a��lan arama kutumuza yazarak daha h�zl� bulabiliriz.

• Buldu�umuz kodun bir �st sat�r�na a�a��daki CSS kodlar�n� kopyalay�p yap��t�r�yoruz.

.note {
  position: relative;
  width: 60%;
  padding: 1.2em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #2ecc71;
  overflow: hidden
}

.note.orange {
  background: #f39c12;
}

.note.crusta {
  background: #F2784B;
}

.note.river {
  background: #3498db;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #27ae60 #27ae60;
  background: #27ae60;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
  display: block;
  width: 0
}

.note.orange:before {
  border-color: #fff #fff #e67e22 #e67e22;
  background: #e67e22;
}

.note.crusta:before {
  border-color: #fff #fff #de6e45 #de6e45;
  background: #de6e45;
}

.note.river:before {
  border-color: #fff #fff #2980b9 #2980b9;
  background: #2980b9;
}

?�ablonumuzu kaydediyoruz.

�imdi yaz�lar�m�z i�inde bu kutular� nas�l kullanaca��m�za geldi. Normal bir yay�n haz�rlarken yaz� yazd���m�z alanda Olu�tur ve HTML diye iki buton g�r�rs�n�z (sol �stte). Mesela bilgi notu payla�mak istiyorsak birazdan a�a��da verece�im bilgi notunun kodar�n� HTML butonuna basarak oraya yap��t�rmam�z ve Olu�tur dememiz gerekecek.

Hangi kutuyu kullanmak istiyorsak a�a��daki kodlar�n i�erisinden onu se�in.
Bilgi Kutusu ��in:

<div class='note'>Bilgi kutusu i�in bu kodu HTML ye yap��t�rd�ktan sonra buraya yazd���m 
yaz�lar� kendi notunuzla de�i�tirin.</div>

Not Kutusu ��in:

<div class='note orange'>Not kutusu i�in bu kodu HTML ye yap��t�rd�ktan sonra buraya yazd���m 
yaz�lar� kendi notunuzla de�i�tirin..</div>

Not Kutusu 2 ��in

div class='note river'>Not kutusu i�in bu kodu HTML ye yap��t�rd�ktan sonra buraya yazd���m 
yaz�lar� kendi notunuzla de�i�tirin...</div>

Uyar� Kutusu ��in

<div class='note crusta'>Uyar� kutusu i�in bu kodu HTML ye yap��t�rd�ktan 
sonra buraya yazd���m 
yaz�lar� kendi notunuzla de�i�tirin....</div>

Umar�m Yard�mc� olmu�umdur yapamad���n�z bir yer veya tak�ld�g�n�z bir sorun olursa yorumlarda belirtin.

Kodlar�n Haz�r Demosu