-->
Powered by Blogger.

19 Aralık 2011 Pazartesi

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.


İlgili Yazılar...
bloggeripuclari
Yazılarımızı Beğeniyorsanız Bültenimize Abone Olun:

Bültenimize abone olarak en son yazılarımızın mail adresinize ücretsiz olarak gelmesini sağlayabilirsiniz.Onay mailini doğrulamayı unutmayın !!!


1 comments:

Yorumunuza gelecek cevabı takip etmek için e-posta yoluyla abone olun bağlantısını tıklayabilirsiniz.

 

Son Yazılar

Son Yorumlar

Blog Yazarı Hakkında

Asil meslegi mühendislik olan Ehli Blog internet dünyasinda edindigi güncel ve pratik bilgileri,internet ve office uygulamalarini, blogger ipuçlarini en sade sekilde sizlerle paylasmayi amaçlamaktadir

Total Pageviews