Google Malzeme Simgeler Blogger Nasıl Eklenir?

Blogger'a Google Malzeme Simgeleri Ekleme - Blogger Eklentileri

Blog kullanıcılarının bloglarını tasarlamada ve geliştirmelerinde yardımcı olabilecek Font Simgeleri bloglarınıza kolay bir şekilde ekleyebilirsiniz. Google Malzeme Simgelerini artık blogunuzda da görebilirsiniz. Bunun için aşağıdaki CSS kodunu blogunuza eklemelisiniz. Şuan için CSS kodu eklenmeden kullanılmıyor ama ilerleyen zamanlarda CSS konuna gerek kalmadan da kullanılabileceğini umuyorum.

  group_addstarpublicsentiment_satisfiednotifications_active

1. Blogunuza Malzeme Simgeleri eklemek için @font-face Malzeme Simgeler CSS kodunu Blogger'a giriş yaparak eklemek istediğiniz blogun kumanda panelinden Şablonlar > HTML'i Düzenle diyoruz ve CTRL+F yardımıyla </style> yada ]]></b:skin> kodunu buluyoruz ve aşağıdaki CSS kodunu hemen bir satır üstüne ekleyin.

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align:middle;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

2. Blogunuzda görüntülemek istediğiniz simgelerin sadece HTML kodunu Malzeme Simgeleri Kütüphanesiden launch simge üzerine tıklayın ve alt tarafta çıkan Simge Fontlarından hangisini eklemek istiyorsanız kopyalayın ve ekleyin.

Örnek simgelerin kodları;

HTML Simge Font Kodu

<i class="material-icons">home</i>

Yada HTML Simge Varlık Kodu

<i class="material-icons">&#xE88A;</i>

3. Simgeleri Özelleştirme

Blogunuzda kullanacağınız CSS simgelerini farklı boyutlar kazandırmak ve renklendirmek için HTML kod içerisine aşağıdaki gibi font-size:inherit , class ve font-size kullanarak yapmanız mümkün.

.material-icons.md-16{font-size:16px;}
.material-icons.md-18{font-size:18px;}
.material-icons.md-24{font-size:24px;}
.material-icons.md-36{font-size:36px;}
.material-icons.md-48{font-size:48px;}

 <i class="material-icons md-16">&#xE88A;</i>
 <i class="material-icons md-16">&#xE88A;</i>
 <i class="material-icons md-16">&#xE88A;</i>
 <i class="material-icons md-16">&#xE88A;</i>
 <i class="material-icons md-16">&#xE88A;</i>

Simgelere renk vermek için class ve color kullanacağız. Aşağıdaki kodu incelediğinizde red, yellow gibi renk isimlerini görmektesiniz, isterseniz renk kodları da kullanabilirsiniz. Renk Kodu Oluşturma launch buraya tıklayarak renk kodlarınızı oluşturabilirsiniz.

.material-icons.md-red{color:red;}
.material-icons.md-yellow{color:yellow;}
.material-icons.md-green{color:green;}
.material-icons.md-blue{color:blue;}
.material-icons.md-grey{color:grey;}

 <i class="material-icons md-36 md-red">&#xE88A;</i>
 <i class="material-icons md-36 md-red">&#xE88A;</i>
 <i class="material-icons md-36 md-green">&#xE88A;</i>
 <i class="material-icons md-36 md-blue">&#xE88A;</i>
 <i class="material-icons md-36 md-grey">&#xE88A;</i>

Bilgi: material-icons simgenin grubunu, md - 36 simgenin boyutunu, md - grey simgenin rengini ve  simgenizi temsil etmektedir. Güle güle kullanın...

Yapamadığınız yerler için yorum kısmından yada iletişimden yazarsanız yardımcı oluruz.