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ş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.
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.
Ö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ç:
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:
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.
Yine çok faydalı yazı serdar abi en kısa zamanda kendi blogumda deneyeceğim :)
YanıtlaSilben de aynen uyguladım ama hiçbir değişiklik olmadı. font eski font. Yeni yayın kısmında bile seçtiğim font yok neden?
SilMuhtesem 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..
YanıtlaSilReklam yapmis gibi ozur dilerim..hocam sen bendensin bagisla artik.
1. kodu neyden önce yapıştıracağız orayı anlayamadım
YanıtlaSil@DEHLİZLERİM
YanıtlaSilKusura bakmayın yazmayı unutmuşum.Güncelledim şimdi.
ben metnimin fontunu değiştirecektim olmadı. eski fontu silmemizmi lazım
YanıtlaSilEğer klasik fontlardan birini kullanıyorsanız hiç bir şey silmenize gerek yok.
YanıtlaSilBEN YAZIMIN İÇERİĞİNİ HALA DEĞİŞTİREMEDİM. BAŞLIKTA
YanıtlaSilh3.search-title DEN DEĞİŞİYOR BENDE. GÖRDÜĞÜM HER YERE YAPIŞTIRIP DENEDİM SIRAYLA AMA BULAMADIM.
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...
YanıtlaSilHAKLARINIZI HELAL EDİN GERÇEKTEN :)))
(GÖRMEM BİRAZ GEÇ OLDU AMA )
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@Bal Yanağın Hikayesi
YanıtlaSilŞunu deneyin:
.sidebar h2 {
integrasyon kodu
}
Harika bir yazı, harika bir bilgi. Çok teşekkürler.
YanıtlaSilBen deniyorum neden olmuyor ekledim dediğiniz kodları
YanıtlaSilYazı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ıtlaSilya abi sen 1 numarasın mail olarak attıgım sorunun cevabını yine sende buldum eyv.
YanıtlaSilç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ıtlaSilhead kodunun altına aşağıdaki kodu ekledim;
YanıtlaSil< 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ı.
ben değişikliği yapamadım ]]> benim htm kodlarında yok. yardımcı olursanız sevinirim.
YanıtlaSil@ayşe koç
YanıtlaSil3. adımdaki kodları body { kodundan önce de ekleyebilirsiniz.
hata verdi nerede hata yaptım birinci kodla ilgili sanırım ne yapmam gerekiyor.
YanıtlaSilÖnemli dediğim yeri atlmadınız değil mi?
YanıtlaSilorayı 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ıtlaSiltşkkürler
YanıtlaSilHocam 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@Öğretmen Halil Çetinkaya
YanıtlaSilSon yazdığım kod bunun için zaten.
ben yapamadım ya dediklerinizi harfiyen uyguladım fakat hata alıyorum yardımcı olurmusunuz
YanıtlaSil@Yunus Ünal
YanıtlaSilNe hatası alıyorsunuz?
Bende Yapamadım bende ]]> kod yok..
YanıtlaSil@Yesim Ozturk
YanıtlaSilBlogger'da tüm şablonlarda vardır o kod. skin diye arama yaparsanız bulabilirsiniz.
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@Abdullah Yüksel
YanıtlaSilTek tek düzeltmekten başka çare yok sanırım.
Ama İnternet Explorer'da gösteriyor. Chrome ve Opera'da gözükmüyor..
YanıtlaSilYeni yaptıklarımda da aynı sorun var..
YanıtlaSilHocam 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ıtlaSilMerhaba, 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ıtlaSilBen internetten tema indirdiğim için mi olmuyor acaba? Standart şablondan bahsetmişssiniz. Başka bir şey mi yapmam gerekir?
YanıtlaSilMerhaba 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ıtlaSilSonunda yapmayı başardım da, türkçe karakterleri desteklemesine rağmen blogda ğ,ş gibi harfler görünmemiş. Ne yapmalıyım?
YanıtlaSilMerhabalar 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@Ebubekir Erdoğdu
YanıtlaSilbody {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.
eveeett tabikide denedim ve çokkk faydalı oldu bakalım daha neler neler öğreneceğimm çoook teşekkürler :)
YanıtlaSilEyvallah hocam çok işime yaradı...
YanıtlaSilHacım ya title bende olmadı, nabcez
YanıtlaSilYa şu ]]> kodu mudur nedir gözükmüyor bende yokmuş öyle birşey
YanıtlaSilOlmuyor hep kirmizi yazili error veriyor
YanıtlaSilUzun 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ıtlaSilteşekkür ederim bana da çözüm oldu ama öğrenmem gerekenler var
YanıtlaSilyayın yazıları yaptım ama başlıkları yapamadım biraz daha uğraşayım bakalım
iyi varsın gene hayatımı kurtardın çok teşekkür ederim.
YanıtlaSilTeşekkür ederim...
YanıtlaSilGoogle Web Fonts sitesinde bulunmayan bir fontu bloğumuzda kullanabilir miyiz?
YanıtlaSilKullanabiliyorsak, burada anlattıklarınızdan farklı olarak ne yapmalıyız?
Teşekkürler deneyeceğim
YanıtlaSilsitem : yazilimgunlugum.com
Peki bloggerda yazdığım bir kayıtta kullanmak istediğim alıntıyı farklı bir fontla yazmak istediğimde ne yapmam gerek yani ben sayfanın yazısını değilde yazımda yazdığım alıntıyı farklı fontla yazmak istiyorum?
YanıtlaSil