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
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
Yada HTML Simge Varlık Kodu
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
Simgelere renk vermek için
Bilgi: material-icons simgenin grubunu, md - 36 simgenin boyutunu, md - grey simgenin rengini ve
Yapamadığınız yerler için yorum kısmından yada iletişimden yazarsanız yardımcı oluruz.

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"></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"></i>
<i class="material-icons md-16"></i>
<i class="material-icons md-16"></i>
<i class="material-icons md-16"></i>
<i class="material-icons md-16"></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"></i>
<i class="material-icons md-36 md-red"></i>
<i class="material-icons md-36 md-green"></i>
<i class="material-icons md-36 md-blue"></i>
<i class="material-icons md-36 md-grey"></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.
Yorum Gönder