Blogger Bilgi Not ve Uyar� Mesaj� Kutusu Yap�m�

Hepimiz blog yaz�lar�m�z aras�nda illaki bilgi veriyoruz, not ekliyoruz veya uyar�da bulunuyoruz. Bu uyar�lar�m�z s�n�k kalmas�n d�z yaz�dan ayr� olsun diye not kutular�na ihtiya� oluyor.Anlat�a ge�iyorum ad�mlar� izleyiniz.

Mesela yaz�lar�n�z aras�nda bir not eklemek veya bir �eye dikkat �ekmek istiyorsunuz. ��te tam burada kutular�m�z devreye giriyor. Her kutunun arkas�n�n renkli olu�u ve ba��nda ikon olmas� ona ayr� bir g�zellik kat�yor.

Ben internette blogger uyar� kutusu yap�m�, notlar�m� kutu i�inde g�sterme, css kutular� yapma gibi konular� ara�t�rd�m fakat arad���m �zelliklte bir �ey bulamad�m bu anlataca��m kutular� �ok sevdim ve sizlerle payla�mak istedim. Canl� �rneklerini a�a��da bulabilirsiniz.

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.

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/
AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/
AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/
AAAAAAAAFtc/suIf3IwnpgE/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

• �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='info'>
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='tips'>
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='warning'>
Uyar� kutusu i�in bu kodu HTML ye yap��t�rd�ktan sonra buraya yazd���m 
yaz�lar� kendi notunuzla de�i�tirin.
</div>

Yani farkettiyseniz notlar�m�z� <div class='warning'> ile </div> kodlar�n�n aras�na yaz�yoruz.

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

Demo / �nizleme