Google Fonts ile Yazı ve Sidebar Başlıklarını Değiştirin

Bu yazımızda google kütüphanede yer alan yazı fontlarını blogumuza uygulayarak yazı ve sidebar başlıklarının fontlarını değiştireceğiz.Bu ipucu sayesinde standart fontlardan kurtularak blogunuzu farklı bir havada okuyucularınıza sunabileceksiniz.
İlk olarak bu kütüphaneyi blogumuza yerleştireceğiz.

  • İlk olarak Google Font kütüphanesine girerek kendinize bir yazı fontu seçin
  • Yazı fontunu belirledikten sonra size iki kademeden oluşan kod verecek:

1)

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

2)

font-family: 'Bilbo Swash Caps', cursive;

Örnek olarak seçtiğim yazı fontuna ait kodlar yukarıdaki gibi.Şimdi yapacağınız şey 1.kademedeki koda sadece / karakterini eklemek.Yani kodunuzun yeni hali aşağıdaki gibi olacak:

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

Evet kodlarımızı ayarladık.Şimdi her ihtimale karşı blogunuzun yedeğini alın.Blogger>>>Design>>>Edit Html yolunu izleyerek </head> kodunu bulun ve hemen yukarıda düzenlediğimiz kodu </head> kodunun üstüne yapıştırın.Şablonunuzu kaydedin.

Yukarıdaki adımda yazı fontlarını blogger kod yapısına gömmüş olduk.Şimdi belirlediğimiz kısmın yazı tipini değiştireceğiz.

Yazı başlığınızın fontunu değiştirin.

Yukarıdaki gibi Blogger>>>Design>>>Edit Html yolunu izleyin ve aşağıdaki kod yapısına benzer kısmı bulun:

.Post h3 {
….
….
font-family: arial, verdana }

Yukarıda yeşi renkle gösterdiğim kısmı 2.kademedeki yazı fontuyla değiştirin.Kaydet e basın ve blogunuzu kontrol edin.Yazı başlığınızın değiştiğini göreceksiniz.

Sidebar başlığını değiştirin

Aynı şekilde Blogger>>>Design>>>Edit Html yolunu izleyin ve aşağıdaki kod yapısına benzer kısmı bulun:

.Sidebar h2{
….
….
}

Yukarıdaki kod parçasındaki font kısmını da 2. kademedeki yazı fontuyla değiştirin.Kaydet deyip çıkın.Böylece sidebar yazı başlığının fontunu değiştirmiş olacaksınız.

Not_1:Her şablonun farklı bir kod yapısı olabilir.Takıldığınız bir yer olursa sormaktan çekinmeyin.
Not_2:Google font daki tüm yazı fontları Türkçe karakteri desteklemiyor olabilir.Onu kontrol ederek seçim yapın.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. teşekkürler güzel yazı olmuş

    YanıtlaSil
  2. Çooook teşekkür ederim. Saatlerdir bununla uğraşıyordum :)

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.