Blogger Simge (Emoji) Ekleme ve Kullan�m� Detayl� Anlat�m

Simge (Emoji) Kullan�m� Nas�l Olur? 

Blogger blo�unuzda yaz� aralar�nda, konu ba�l�klar�nda veya men� isimlerinizin ba��nda simge (emoji) kullanabilirsiniz. Benim de yaz�lar�m� yazarken ikonlar kulland���m� g�rm��s�n�zd�r. Keza �st men�mde de simgeler kullan�yorum. �ok ��k ve yaz�y� belirtici olmas� benim i�in �nemli.

Blogger blogta emoji/ifade kullan�m� nas�l olur? Sorusunu cevapland�rmaya �al��aca��z. Asl�nda bu �ok basit bir y�ntem blogger �ablon kodlar�n�z aras�na bir font ekleyece�iz ve y�zlerce simge bizim olacak. Peki hadi yapal�m.

�lk olarak blogger panelimizden �ablon-HTML'yi D�zenle yolunu takip ederek </head> kodunu buluyoruz.

Bu kodun tam �st sat�r�na gelecek �ekilde a�a��daki fontumuzun kodlar�n� kopyalay�p yap��t�r�yoruz.

<link href='//netdna.bootstrapcdn.com/font-
awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

�ablonumuzu kaydediyoruz.

S�MGE L�STES� ���N TIKLAYIN

Evet blo�umzda ifadeler kullanabilmek i�in gerekli olan fontu kodlar�m�z aras�na uygulad�k. �imdi bu simgeleri yaz� yazarken nas�l kullanaca��z bunu irdeleyelim.

Biliyorsunuz yaz�lar�m�z� yazarken yeni yay�n olu�tur diyoruz. A��lan sayfada sol �stte HTML butonu var ona bas�p yaz�lar�m�z�n neresinde simge kullanmak istiyorsak o araya t�klay�p bu <i class="icon-html5"></i> kodunu yap��t�r�yoruz.

Dikkat: K�rm�z� renkle g�sterdi�im kod bizim kullanaca��m�z simgenin ad�n� belirtiyor. Siz hangi simgeyi kullanmak istiyorsan�z k�rm�z� alan� silin ve kendi simge ad�n�z� yaz�n. Simgeler ve isimleri i�in buraya t�klay�n.

Peki simgelerimin boyutunu nas�l ayarlad�m?

K���kten b�y��e do�ru simge boylar� a�a��daki kodlarda g�sterdi�im gibi ayarlan�r.

<i class="icon-html5"></i>
<i class="icon-html5 icon-large"></i>
<i class="icon-html5 icon-2x"></i>
<i class="icon-html5 icon-3x"></i>
<i class="icon-html5 icon-4x"></i>

G�rd���n�z gibi font ad�m�z�n sonuna k�rm�z� ile belirtti�im gibi boyutland�rma kodlar�n� ekliyoruz. Hangi boyut olsun istiyorsak font ad�n�n devam�na onun boyut kodunu ekliyoruz.

Simgemizin etraf�na bir border yani �er�eve eklemek istiyorsak a�a��daki kodu kullan�yoruz.

</span><i class="icon-ambulance icon-2x icon-border"></i>

Yani font ismimizin sonuna k�rm�z�yla belirtti�im kodu ekliyoruz.

E�er simgemiz kendi etraf�nda d�ns�n spin ats�n diyorsan�z a�a��daki kodu kullanman�z gerekecek.

<i class="icon-spinner icon-spin icon-2x"></i>

K�rm�z�yla belirtti�im kod simgemizin d�nmesini; maviyle belirtti�im kod simgemizin boyutunu temsil ediyor. Yani boyut kodumuzdan �nce d�nd�rme kodumuzu ekliyoruz.

Normal simge
90 derece d�nd�r�lm��
180 derece d�nd�r�lm��
270 derece d�nd�r�lm��
Yatay tersine Dikey tersine
Yukar�daki gibi simgemizin y�n�n� �evirmek i�in a�a��daki kodlardan hangi y�n istiyorsak o kodu kullan�yoruz.

<i class="icon-shield"></i> Normal simge
<i class="icon-shield icon-rotate-90"></i> 90 derece d�nd�r�lm��
<i class="icon-shield icon-rotate-180"></i> 180 derece d�nd�r�lm��
<i class="icon-shield icon-rotate-270"></i> 270 derece d�nd�r�lm��
<i class="icon-shield icon-flip-horizontal"></i> Yatay tersine
<i class="icon-shield icon-flip-vertical"></i> Dikey tersine

K�rm�z� ile belirtti�im kodlar simgenin �evirme a��s�n� belirliyor. Mesela simgeyi 90 derece �evirmek istiyorsan�z simge isminin sa� taraf�na icon-rotate-90 kodunu yap��t�r�n.

��lemlerimiz bu kadar.
Konunun ba��nda da belirtti�im gibi bu simgeleri/ikonlar� blo�umuzda yaz� i�lerinde kullanabilece�imiz gibi men� ba�l�klar�m�zda ve butonlar�m�zda da kullanabiliriz.

Blogger simge/ikon/ifade/emoji kullan�m�n� anlatt�m. 

Tam anla��l�r yazamam�� olabilirim. Siz anlamad���n�z yerleri a�a��daki yorum formundan sorabilirsiniz.