26 Eylül 2012 Çarşamba

Blogger’da Google Web Fonts Kullanımı

49 yorum

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ş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: Google Web Fonts 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.

Google Web Fonts

 

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.

 

Google Web Fonts

 

Örneğin benim kullanacağım fontun kodu şu:

<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>

 

!!! Ö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.

 

<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'/>

 

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:

 

h3.post-title {
integrasyon kodu

}

 

Örneğin benim kullandığım fontun integrasyon kodu font-family: 'Courgette', cursive; olduğu için kodu şıu şekilde düzenliyorum:

 

h3.post-title {
font-family: 'Courgette', cursive;
}

 

Ve Sonuç:

 

Google Web Fonts Yazı Başlıkları

 

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:

 

.post {
  font-family: 'Courgette', cursive;

}

 

Bu kodları eklediğimde ortaya çıkan sonuç ise şu:

 

Google Web Fonts Post Body

 

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.

49 yorum:

  1. Yine çok faydalı yazı serdar abi en kısa zamanda kendi blogumda deneyeceğim :)

    YanıtlaSil
  2. Muhtesem bir sey herkese tavsiye ediyorum bende bu sabah konu basliklarimi ve sidebarin basliklarini degistirdim cok daha net ve class gorunuyor artik zaman zaman degistirmek gerekiyor onemsenmiyor belki ama yazi stili ozellikle konu basliklarinin stili cok onemlidir..
    Reklam yapmis gibi ozur dilerim..hocam sen bendensin bagisla artik.

    YanıtlaSil
  3. 1. kodu neyden önce yapıştıracağız orayı anlayamadım

    YanıtlaSil
  4. @DEHLİZLERİM
    Kusura bakmayın yazmayı unutmuşum.Güncelledim şimdi.

    YanıtlaSil
  5. ben metnimin fontunu değiştirecektim olmadı. eski fontu silmemizmi lazım

    YanıtlaSil
  6. Eğer klasik fontlardan birini kullanıyorsanız hiç bir şey silmenize gerek yok.

    YanıtlaSil
  7. BEN YAZIMIN İÇERİĞİNİ HALA DEĞİŞTİREMEDİM. BAŞLIKTA
    h3.search-title DEN DEĞİŞİYOR BENDE. GÖRDÜĞÜM HER YERE YAPIŞTIRIP DENEDİM SIRAYLA AMA BULAMADIM.

    YanıtlaSil
  8. Hehhhh heyyyyyy.....O facebooktaki takipçi benim,sizin kadar detaylı ve mükemmel anlatan birini görmedim hiç yaptım sonunda..Hatta denemek için devamlı değiştiriyorum...

    HAKLARINIZI HELAL EDİN GERÇEKTEN :)))

    (GÖRMEM BİRAZ GEÇ OLDU AMA )

    YanıtlaSil
  9. Bu ara birşey sormak istiyorum bloğumuzdaki gaget başlıklarını ve onunla ilgili yazıları değiştirmek istediğimizde araya ekleyeceğimiz kodun önüne ne yazacağız :))

    YanıtlaSil
  10. @Bal Yanağın Hikayesi
    Şunu deneyin:
    .sidebar h2 {
    integrasyon kodu
    }

    YanıtlaSil
  11. Harika bir yazı, harika bir bilgi. Çok teşekkürler.

    YanıtlaSil
  12. Ben deniyorum neden olmuyor ekledim dediğiniz kodları

    YanıtlaSil
  13. Yazıyı değiştiriyorum ama fontta türkçe karakterler olmasına rağmen başlıklarda türkçe karakterler farklı fontta çıkıyor.

    YanıtlaSil
  14. ya abi sen 1 numarasın mail olarak attıgım sorunun cevabını yine sende buldum eyv.

    YanıtlaSil
  15. çok güzel bir anlatım olmuş ama ana sayfadaki blog kayıtları başlığını nasıl değiştireceğiz onu da söyleyebilir misin ?

    YanıtlaSil
  16. head kodunun altına aşağıdaki kodu ekledim;
    < link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

    Aşağıdaki hatayı verdi :(

    XML, satır 649, sütun 5 ayrıştırılırken hata oluştu: The element type "link" must be terminated by the matching end-tag "< /link>".

    Blogger soyut temasını kullanıyorum mevcut olan temalardan açık pembe renkli olanını.

    YanıtlaSil
  17. Çok teşekkürler anlatımınız çok iyi hemen yaptım :)

    YanıtlaSil
  18. ben değişikliği yapamadım ]]> benim htm kodlarında yok. yardımcı olursanız sevinirim.

    YanıtlaSil
  19. @ayşe koç
    3. adımdaki kodları body { kodundan önce de ekleyebilirsiniz.

    YanıtlaSil
  20. hata verdi nerede hata yaptım birinci kodla ilgili sanırım ne yapmam gerekiyor.

    YanıtlaSil
  21. Önemli dediğim yeri atlmadınız değil mi?

    YanıtlaSil
  22. orayı atlamadım ama olmuyor. arkadaşın bloğunda denedim sorun çıkmadı bütün değişiklikleri yapabildim. bende hata nerede bilmiyorum. şimdi hata vermiyor ama sayfadaki bütün yazıları değiştirmiyorda.

    YanıtlaSil
  23. Hocam ben sadece bazı postlarımın yazısındaki fontu değiştirmek istiyorum. Hepsini değil. Bunun için bir yöntem var mı ?

    YanıtlaSil
  24. @Öğretmen Halil Çetinkaya
    Son yazdığım kod bunun için zaten.

    YanıtlaSil
  25. ben yapamadım ya dediklerinizi harfiyen uyguladım fakat hata alıyorum yardımcı olurmusunuz

    YanıtlaSil
  26. @Yunus Ünal
    Ne hatası alıyorsunuz?

    YanıtlaSil
  27. Bende Yapamadım bende ]]> kod yok..

    YanıtlaSil
  28. @Yesim Ozturk
    Blogger'da tüm şablonlarda vardır o kod. skin diye arama yaparsanız bulabilirsiniz.

    YanıtlaSil
  29. Hocam denedim, sevdim. Fakat, blogu ağırlaştırdı biraz. O yüzden standart listelerde olan güzel bir fonta geçtim. Fakat bu sefer blogda ki çoğu yazının kalınlaştırması filan gitmiş düz yazı olmuş. Bunları nasıl düzeltiriz..

    YanıtlaSil
  30. @Abdullah Yüksel
    Tek tek düzeltmekten başka çare yok sanırım.

    YanıtlaSil
  31. Ama İnternet Explorer'da gösteriyor. Chrome ve Opera'da gözükmüyor..

    YanıtlaSil
  32. Yeni yaptıklarımda da aynı sorun var..

    YanıtlaSil
  33. Hocam yine sizin sayenizde başardım, teşekkür ederim. Üstteki kategorilerin karakterlerini değiştiremedim ama bir gün onu da hallederiz. Teşekkürler.

    YanıtlaSil
  34. Merhaba, ben dün eklediğim bir temanın içine uyguladım ama değiştiremedim olmadı. Yapmak istediklerim şunlar : Konu başlıkları ve widget başlıklarının yazı karakterlerini değiştirmek + site arka planındaki siyah rengi değiştirmek (bazı widgetlar zor okunuyor) + ana sayfadaki konuların özetlerinde tarihi yazdırmak (misal 24 Mart 2014) gibi... Yardımlarınızı bekliyorum... Çok teşekkürler... http://serdarilefutbol.blogspot.com.tr/

    YanıtlaSil
  35. Ben internetten tema indirdiğim için mi olmuyor acaba? Standart şablondan bahsetmişssiniz. Başka bir şey mi yapmam gerekir?

    YanıtlaSil
  36. Merhaba benim şablonumda h3 değil de h1 olarak deneyince oldu. Bir de anasayfada bulunan kayıt başlıklarının görünümüne nasıl yansıtabiliriz bu yazı tiplerini?

    YanıtlaSil
  37. Sonunda yapmayı başardım da, türkçe karakterleri desteklemesine rağmen blogda ğ,ş gibi harfler görünmemiş. Ne yapmalıyım?

    YanıtlaSil
  38. Merhabalar hocam, bir siteme sizin "sementit" temasını kurdum. Yazı fontu konusunda tek sormak istediğim şey kayıt sayfasındaki yazılar çok küçük, bunu biraz büyütmek istiyorum, bir türlü bulamadım kodların içinde, yardımcı olursanız çok sevinirim.

    YanıtlaSil
  39. @Ebubekir Erdoğdu

    body {margin: 10;padding: 20;color: #000;text-align:center;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 100.1%;

    Bu satırdaki 100.1% değerini değiştirebilirsiniz.

    YanıtlaSil
  40. eveeett tabikide denedim ve çokkk faydalı oldu bakalım daha neler neler öğreneceğimm çoook teşekkürler :)

    YanıtlaSil
  41. Eyvallah hocam çok işime yaradı...

    YanıtlaSil
  42. Hacım ya title bende olmadı, nabcez

    YanıtlaSil
  43. Ya şu ]]> kodu mudur nedir gözükmüyor bende yokmuş öyle birşey

    YanıtlaSil
  44. Olmuyor hep kirmizi yazili error veriyor

    YanıtlaSil
  45. Uzun uğraşlar sonucu anca başlığı değiştirebildim. Blog'umda yazan yazıların fontunu değiştirmek için hangi kodu girmem gerek ?

    YanıtlaSil
  46. teşekkür ederim bana da çözüm oldu ama öğrenmem gerekenler var
    yayın yazıları yaptım ama başlıkları yapamadım biraz daha uğraşayım bakalım

    YanıtlaSil
  47. iyi varsın gene hayatımı kurtardın çok teşekkür ederim.

    YanıtlaSil

Picardes

LİNKLER