29 Mart 2017: Çarşamba
Gölge

Bloggerda Cufon Font Kullanımı

Bu yazı 3 sene [3 seneden daha eski de olabilir] veya daha önce yayınlanmış olduğundan; görülen linklerde, resimlerde veya kodlarda hata olması çok olası. Herhangi bir hata ile karşılaşmanız durumunda bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dileriz :) Enes İLHAN
Blogger İpuçları 19 Ocak 2011 30 18.085  
Bu Kişisel Blog'da 551 kategori'de yazıya yazılmış adet değerli yorumlarınız bulunmaktadır..

Blogger‘da yazı başlıklarının stilini değiştirmek ya da kullanılan fontu değiştirmek için genelde CSS yöntemi kullanılır. Bu iş ise normalde biraz zahmetlidir. Yani CSS bilginizin normalin üstünde olması gerekir. Her istediğiniz fontu da öyle istediğiniz gibi uyumlu yapamıyorsunuz zaten. Sadece belli fontlar eklenebiliyor. Bugün anlatacağım yöntemle ise istediğiniz her fontu Cufon yöntemi yardımıyla bloglarınıza ekleyebilirsiniz tıpkı benim gibi  🙂 Peki cufon nedir isterseniz önce buna bir bakalım:

Cufon, web sitelerimizde istediğimiz fontları kullanmamıza imkan sağlayan yeni bir teknoloji. Bu teknoloji sayesinde beğendiğimiz ve hoşumuza giden fontları ufak bir kod satırı ile web sitelerimizde gösterebiliyoruz.

WordPress’de çoğu şey gibi bu yöntem de basit bir eklentiyle yapılıyor ama Blogger’da ufak bir kod satırı ile işi çözmek mümkün. Şimdi de isterseniz bu işlemin nasıl yapıldığını görelim:

<script src='http://konfor.enesilhan.net/js/cufon-yui.js' type='text/javascript'></script>
<script src='http://konfor.enesilhan.net/js/qlassik.js' type='text/javascript'></script>
<script type='text/javascript'>Cufon.replace('h1, h2, h3, h4, h5, h6');</script>

Yukarıdaki kısa kod satırını <head> kodundan sonra ekleyebilirsiniz. Kırmızı renk ile işaretlediğim yerleri kendinize göre özelleştirebilirsiniz. Yani birinci kısımdaki fontu kendi beğendiğiniz font ile değiştirebilirsiniz. Bu işlemi de bana göre cufon fontlarda en iyi site olan Cufon Fonts sitesinden halledebilirsiniz. Bu sitenin en önemli özelliği Türkçe dili ile beraber 46 dilde destek vermesi ve beğendiğiniz fontun türkçe karakter olup olmadığını sitenize eklemeden önce test sürüşü ile görebilmeniz.

İkinci işaretlediğim yerde ise seçtiğiniz fontun blogunuzdaki ‘h‘ tagında gösterebilmeniz için. Yani misal olarak yukarıdaki h2 tagını kaldırdığınızda font sidebarınızda geçerli olmayacaktır. Bu bilgilerle beraber son bir şey söyleyeyim: Bu yöntem aynı zamanda yazıları bir resim gibi gösteriyor. Yani yazı başlığına sağ tıklayıp resmi göster dediğinizde imlecin olduğu yeri resim olarak gösteriyor. Bu çok ilginç bir özellik aslında. O resmin adresini adres çubuğunda görmek çok zahmetli bir iş. Yani o kadar uzun bir adres ancak böyle bir yöntemin ürünü olabilirdi 🙂 Bu özelliği bir arkadaşımın isteği ile bugün anlatıyorum ama öncesinde de bu yöntemi blogumda anlatmak fikri aklımda vardı bugüne kısmetmiş 😉

Aklınızda soru işaretleri veya sormak istediğiniz yerler olursa şimdilik evimdeyim rahatça cevaplayabilirim. Hepinize kolay gelsin, bol cufonlu günler..  🙂

Bu yazıdan önce yazmış olduğum "Bloggerda Açıklamalı Etiket Bulutu Yapmak" başlıklı yazımı da okumanızı tavsiye ederim.

Enes ILHAN

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

30 Yorum Yapılmış

  • KaRaBuLuT

    İlk zamanlar çok heves ederdim bu farklı font kullanımına bilmiyordum, görüncede nasıl oluyor falan derdim 🙂 Güzel anlatmışsın, gerçekten ayrı bir hava katıyor Blog sitelerine. Sen blogger için anlatmışsın bende WordPress için hazırlayayım 🙂

  • Enes İLHAN

    @gül,
    Hangi kodu diyorsun gül anlayamadım ? Yukarıdaki adımları takip edersen basit bir şekilde sende kullanabilirsin bu eklentiyi.

  • gül

    Sela cufonta gittim, fontu beğendim, dosyayı indirin diyor indirdim. Sonra blogda yayınlanacak kodu nasıl buluyoruz?
    Senin verdiğin örnek aşağıda yani aradığım o kırmızı yerdeki, js/qlassik işte orayı diyorum:)

  • Enes İLHAN

    @gül,
    Hımm anladım . Verdiğim sitedeki hangi fontu beğendin gül söyle ben indirip kendi hostuma atayım, yukarıdaki qlassik.js'nin yerine senin beğendiğin fontu koyalım ? {Bu arada ne çabuk yazdın yorumu :)}

  • gül

    hiç uyumadım saatlerdir fontlara bakıyorum ve nasıl değiştirildiğini anlamaya çalışıyorum. Şimdi anladım hosta yüklemek gerekmiş. Bir de ikinci sorum mesela headerdaki fontu başka, ana sayfadaki başlığı başka, alt başlığı başka yapmak için ne yapmak lazım?
    teşekkür ederim

  • Enes İLHAN

    Onu malesef bende bilmiyorum gül böyle bir şey şimdilik mümkün görünmüyor. Bu fontlar bir kit olarak kullanıldığından hazır bir şey, yani ekleyince istersen tüm blogdaki yazı tipin sadece o indirip koyduğun cufon font oluyor. Biraz karışık gibi oldu ama umarım anlamışsındır.

  • .:Hobibox:.

    Selamlar, kırmızı ile verdiğiniz, size ait site linkini anlayamadım, orası dğişmeden mi alıcaz bu eklentiyi, birde tam değişmesi gereken ont, yeri nresidir anlayamadım, teşekkürler.

  • Enes İLHAN

    @.:Hobibox:.,
    O kırmızı renk ile gösterdiğim site linkini isteğinize göre değiştiredebilirsiniz, değişmeden de kopyalayabilirsiniz orası size kalmış. Yine sormak istediğiniz yer olursa çekinmeyin, kolay gelsin..

  • damla

    merhaba.bu verdiğiniz kod için çok teşekkürler. bloguma uygu ancak cofonfonts'tan istediğim kodu eklemekte sıkıntı yaşıyorum. Kırmızı ile verdiğiniz yere şunu yazıyorum "http://cufon.shoqolate.com/js/cufon-yui.js&quot;

    hata vermiyor ama önizlemesinde göremiyorum bi değişiklik. sizin verdiğinizde ise önizlemesini görebiliyorum. nerde hata yapıyorum?

    Bir de normal yazdığımız kısım varya bloga, ne denir bilmiyorum. normal anlattığımız metin, mesela siz bu konuyu anlatıyorsunuz ya, bunun da fontunu değiştirmek istiyorum, bu h1 h2 gibi yerden olamıyor mu o?

    Cevaplarsanız çok sevinirim :)))

  • Enes İLHAN

    @damla,
    Öncelikle o kırmızı yere cufonfonts'dan bu adresi yazmayacaksınız: "http://cufon.shoqolate.com/js/cufon-yui.js" Bu zaten yukarıda verdiğim kodda mevcut. Bunun yerine örnek olarak şöyle bir kod yazacaksınız: "http://www.sizinhostadresiniz.com/cuprum.cufonfonts.js" Bedava bir host arıyorsanız bu yukarıdaki cuprum.cufonfonts.js kısmını "http://www.yourjavascript.com&quot; adresine yükleyebilirsiniz. Yani bu şekilde istediğiniz fontu blogunuzda kullanabilirsiniz., kolay gelsin..

  • Enes İLHAN

    @damla,
    Bazı fontlar nedense olmuyor tıpkı sizin bu örneğinizde olduğu gibi. Biraz daha araştırırsanız bu fontları belki istediğinizi yapabilirsiniz. Bende çok istediğim fontu eklemek istedim bloguma ama malesef olmayınca eldekilerle yetinerek şimdiki Qlassik fontunu kullanmaya karar verdim. Her font olmuyor ayrıca onu da söyleyeyim.

  • mis gibi

    Ben birşekilde hallettim ama bir sorunum var. Yorumlarda pop-up penceresi normal iken konu içine girildiğinde yorumların fontların çok çok büyük. Napabilirim bir bilginiz var mı?

  • Enes İLHAN

    @mis gibi,
    Blogunuza girdim baktım. Hem konu dışında pop-up penceresinden baktım yorumlara hemde konu içinde baktım fakat bir sorun göremedim. Sorun hâlâ devam ediyorsa tekrar yazabilirsiniz, iyi günler.

  • Miskin Kek

    Çok teşekkür ederim cevap için. Şablon tasarlayıcısında bir hata yapmışım,bulup düzelttim

    Blogunuzu takipteyim bu arada. Çok şey öğrendim diyebilirim 🙂

  • PSiKoMaNYaH

    Çok güzel bir anlatım olmuş teşekkürler. Yazının başında WordPress bunu bir eklenti ile yapabilirsiniz demişsiniz. Acaba bu işi yapan bir eklenti ismi söyleyebilir misin ? Bidaha kodlarla uğraşmıyalım 😀

  • Anonymous

    Kısa bir sorum olacak..Peki bu fontu koyduk diyelim..Başlıkların resim olarak gözüktüğünü söylüyorsunuz.Peki bu indexlenme açısından sorun yaratır mı?

  • Yusuf Siyab

    Enes bey, cufonu kullandığımız bölümlerde önce normal yazı tipi sonra cufon yazı tipi oluşuyor. Bir nevi öncesinde yükleniyor. Ancak sizin sitenizde de cufon kullanılıyor olmasına rağmen ilk gördüğümüz yazı tipiniz cufon yazı tipi. Yani bir başka yazı tipi görünmüyor. Sizce bunun sebebi ne olabilir ve nasıl giderebiliriz? (Ziyaretçi direk cufon yazı tipiyle karşılaşsın istiyorum)

  • hocam dediğiniz gibi yaptım oldu fakat hemen eski hale geri dönüyor. mesela hababam sınıfı diye başlık attım sayfayı yenilerken normal hababam sınıfı diye görünüyor ama hemen eski hale dönüyor ve şöyle gözüküyor: hababam snf. ‘ı’ ları ‘ş’leri vs. göstermiyor. Türkçe karakterler indirdim ama dediğim gibi yazılar sonradan eski hale dönüyor.Bu sorunu nasıl aşabilirim?

  • sezer

    ben sızın gıbı aynı temayı kullanıyorum ancak takıldıgım bır yer var menu dekı hakkımda reklam ve sponsorluk arşiv vs yazı basalıkları yazı sitili ni nasıl degıtırebılırım

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir