Genel Blog - Her Türlü Paylaşım

Blogger’da Google Web Fonts Kullanımı

<a title="Facebook Blog Hocam" href="http://www.facebook.com/bloghocam" target="_blank">Facebook</a>’ta bir takipçim “Blog başlıklarında Google Web Fonts’u nasıl kullanabilirim?” diye sormuştu.Onun vesilesiyle bir çok kişinin işine yarayacak bu konuya değinmek istedim.   Öncelikle Google Web Fonts’un ne olduğundan bahsedeyim.Google Web Fonts; blogunuzdaki yazı başlıklarında, sidebar başlıklarında, yazı içeriğinde veya sizin belirleyeceğinizde her hangi bir yerdeki bir metin için kullanılan standart fontların yani yazı tiplernin yerine özel fontları kullanmanızı sağlayan ücretsiz bir Google servisidir.   Şimdi adım adım Google fontlarını kullanmaya geçelim.   1.Adım: <a title="Google Web Fonts" href="http://www.google.com/webfonts" target="_blank">Google Web Fonts</a> sitesine giderek kullanmak istediğiniz fontu seçin.Fontu eçerken dikkat etmeniz gereken şey Türkçe karakterleri desteklemesidir.Preview Text kısmına türkçe karakter içeren bir metin yazarak, o fontun türkçe karakterleri destekleyip desteklemediğini görebilirsiniz.Kullanmak istediğiniz fonta karar verdikten sonra o fontun köşesindeki Quick use yazısına tıklayın. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2aBixNUd71n2cyH7FaWMGMi8KCanLILq6IdQKDHfdVtwHc9wqPttjwTEzTfP8GbZ1-IX-4gYB9x-m4VfURLiZH5Z2CUO1MIaAlHlPr-5ZZSzzRw_uZo7_pkScnmgNnutsN_k2i5-v-xp/s1600-h/google-webfonts16.png" target="_blank"><img alt="Google Web Fonts" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg71B2OGMT_cowjU9Daifm97W-2aJ1OHVGYfXohj9kMNi0RDz3_HpQW0ynRoR_bCUV555oYov09yHlgpBenR0QYi5veBdwzAysctBtd2PpFPhq_tUNBDhXjaEC0rgle-wPNchqYCBZuAk_4/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="Google Web Fonts" width="527" /></a>   2. Adım: Açılan sayfada Add this code to your website diye bir bölüm göreceksiniz.Oradaki kodu şablona ekleyeceğiniz.Şimdi şablonda <head> kodunu bulun ve altına Google fontunun kodunu ekleyin.   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFqNJkGxerWebzx-i-o1DBJ2ivZ8UNLf5lkW63i0xcy72Y6VE07SSkKpNirzCUo1JR2tGQvS9TCfWr0g5lKn2fqZmyefz4hmrCgVeq3SDtivECJyOSoZJmXLAo4tThjlLXh6iKu9YJkpS/s1600-h/google-web-fonts-211.png" target="_blank"><img alt="Google Web Fonts" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIk49vDL1zt3gH-GV1VwVAX1hyphenhyphen5-R7d94cazqgOhDMfpW1OAfOPu-z1xEy30V2tQh99mBn16EVInnt4Q81t3dSIpmgsB30bQJUpQLpAz5McatoJy06QgI7dfwZezvrBDQeH22vZ8xayBq/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="Google Web Fonts" width="527" /></a>   Örneğin benim kullanacağım fontun kodu şu: <blockquote> <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> </blockquote>   !!! Önemli: Bu kodu şablonda <head> kodunun altına ekledikten sonra aşağıda kırmızı renkte gösterdiğim kapanış işaretini de ekliyorum.   <blockquote> <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'/> </blockquote>   3.Adım: Google web fontunun bulunduğu sayfada şöyle bir bölm var: Integrate the fonts into your CSS.Buradaki kod da önemli ve kullanacağımız bir kod.İsmi integrasyon kodu.Şimdi neredki fontları değiştirmek istediğimize karar vereceğiz.Örnek olarak ben standart Blogger şablonlarındaki yazı başlıklarını değiştireceğim.Bunun için şablonda ]]></b:skin> skin kodunu bulup hemen üstüne şu kodları ekliyorum:   <blockquote> h3.post-title { integrasyon kodu } </blockquote>   Örneğin benim kullandığım fontun integrasyon kodu font-family: 'Courgette', cursive; olduğu için kodu şıu şekilde düzenliyorum:   <blockquote> h3.post-title { font-family: 'Courgette', cursive; } </blockquote>   Ve Sonuç:   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj617SATV14pseqXJ9MbMCLnkLKiCNBeBzBI8xl5PTjk_NBHb3L4yNHrmtx0yK_sh4x72hzME0qgs3yIjrEkwAZaqVhftnyjKJol5Lars0Cct1oLfLv-aHQOLraXd4_j24YCi4HGdRvrNnK/s1600-h/google-web-fonts-yazi-basligi5.png" target="_blank"><img alt="Google Web Fonts Yazı Başlıkları" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJbxIq47EKihW91QvTMeXixET2Ij6klMwgf1faVcGJ9kb7IlooJfugPArvu5ZKSKp1tecKLUP_85FuM08kulfbSlxLtmhuLwsnaA19WaQZwpwuwFrxM9PgmZ1mwBjouZXNirsWAE3GZxnT/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="Google Web Fonts Yazı Başlıkları" width="527" /></a>   Standart Blogger şablonlarında kayıt içeriğindeki metnin fontunu da benzer şekilde değiştirebilirsiniz.Bunun için yine ]]></b:skin> kodunun üstüne şu kodları ekliyorum:   <blockquote> .post {   font-family: 'Courgette', cursive; } </blockquote>   Bu kodları eklediğimde ortaya çıkan sonuç ise şu:   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZboa-ZT3BU6KjciN29Um_9F9H7c3ZLXjoiIolPS27E-f9RivocPDzoX3XEf2Q6eWxHbXQZdbfiPzsSXT6g64WQfqvv0rnyPF2nYWkf5yz0cVTRSBqzQVMOVJiAQvzNXXkavupcHEGhUEJ/s1600-h/google-web-fonts-post-body5.png" target="_blank"><img alt="Google Web Fonts Post Body" border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQk3TwHf4BJI9NJbTbWnZhhd8bLfYOnimCm8I2weRViE6-xsk-a0B0mrQD2rG1rPzaWsS0U1gXqV5wz7l8xdPZvq84wJHDsmAfcM9UoaBIZjsvElzDAOEiYODAdO3V0n9mKo4LZVPuGutP/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="Google Web Fonts Post Body" width="527" /></a>   Yazı içeriği için eklenen kod tüm temalarda aynıdır fakat yazı başlıkları için eklenen kod bazı temalarda farklı olabilir.

Blogger’da Google Web Fonts Kullanımı

Facebook ’ta bir takipçim “ Blog başlıklarında Google Web Fonts’u nasıl kullanabilirim? ” diye sormuştu.Onun vesilesiyle bir çok kişinin işi...