Blogger Özel Tema Uygulama ve Code Highlighting

Bu yazımda blogger altyapısını kullanan sitelerde özel tema uygulama ve yazılarda paylaşılan kodların güzel ve okunur görünmesi için nasıl code highlighting yapıldığından bahsedeceğim.

Yazılım Blogu Blogger Tema Uygulama

 

Neden Özel Tema Uyguladım?

Blog altyapısı olarak Blogger (Blogspot) kullanıyorum. Blogger'ın kendi temalarından birini kullanıyordum. Bu ön tanımlı temaları ne kadar özelleştirmeye çalışsam da modern bir görüntü kazanmadı. 90'ların siteleri gibi görünüyordu. Göze daha hoş gelmesi ve daha kullanışlı olması için özel tema uygulama arayışına giriştim. 

Ücretsiz Blogger Tema Siteleri

Aşağıdaki sitelerden üzretsiz temalar indirebiliyorsunuz. Ücretsiz olmasının karşılığı genelde premium bazı özelliklerden fedakarlık ve sitede temanın kendi copyright linkinin bulunması oluyor. Ufak bir meblağ ödeyerek de premium özelliklere sahip olabilirsiniz.

• Gooyaabi Templates 
• BTemplates 
• Templatesyard
  

 

Blogger Tema Nasıl Uygulanır?

Blogger yönetim panelinden Tema bölümüne geliyoruz.

Blogger Tema Uygulama

Buradaki menüden öncelikle "Yedekle" diyerek orijinal temamızı indirip yedekliyoruz. Herhangi bir sebeple eski temaya dönmek isteyebiliriz. Daha sonra "Geri Yükle" diyerek indirdiğimiz tema klasöründen çıkan XML dosyasını seçiyoruz.

Blogger Tema Uygulama / Geri Yükle

 

Yazılım Bloglarının Olmazsa Olmazı: Kod

Aradığım kıstaslardan biri de yazılarımda paylaştığım kod örneklerinin güzel formatlanmış bir şekilde görünebilmesi idi. Bunun için çok çeşitli yollar bulunmakta. Örneğin, GitHub'da Gist olarak paylaşma ve yazı içine gömme. Yalnız bu şekilde kodlar 3. parti bir sitede bulunacağından arama motoru indekslemelerinde kodların görünmeyeceğinden endişe ettim. Bu nedenle kodların direk yazı içinden sunulması için http://hilite.me/ sitesini kullanmaya başladım. Bu sitede kodunuzu yapıştırıyorsunuz ve size css ile güzelce formatlanmış bir html veriyor. Bu html'i de direk yazı içine kopyalayabiliyorsunuz. Belki daha kolay yöntemler vardır ama benim Blogger altyapılı siteler için bulabildiğim en kolay yol bu şekilde oldu. Wordpress siteler için farklı pluginler de mevcut. Aşağıdaki hilite.me ile ürettiğim bir code highlighting örneğini inceleyelim.

// Your First C++ Program

#include <iostream>

int main() {
    std::cout << "Hello World!";
    std::cout << "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
    return 0;
}

Satır uzun olduğunda yatay scroll bar çıkması önemli. Syntax keywordlerinin de farklı renklerle vurgulanması sayesinde kod okunur hale geliyor.

Özel Blogger Teması ve Code Highlighting Problemi

İndirdiğim özel temaları denediğimde yazılarımdaki kodlarla ilgili bir problemle karşılaştım. Renklendirme berbat hale gelmişti ve yatay scroll bar çıkmıyordu. 

Bozuk Code Highlighting

 

Başka başka temalar indirip denedim fakat hemen hemen hepsinde benzer sıkıntıyla karşılaştım. Sonunda iş başa düştü deyip tema dosyasına el atıp sorunun kaynağını aradım.

Tema içerisinde <pre> tag'i için custom bir CSS style tanımlandığını gördüm ve benim hilite.me sitesinde ürettiğim HTML'deki CSS'leri ezdiğini farkettim. Bu nedenle özel tema XML dosyası içindeki bu pre tag'i style tanımı içinde aşağıdaki attribute'leri sildim ve sorun çözüldü:

• background-color
• background-image
• color
• overflow

Bu sayede blog sitemi kod paylaştığım yazılarda bir bozulma olmadan yeni custom bir temaya geçirebildim.

Yeni Temanın Site Trafiğine Etkisi

Henüz temayı değiştireli çok olmadı fakat siteye gelen organik trafik pek değişmese de sayfa görüntüleme sayısının iki katına çıktığını söyleyebilirim. Bunda yeni temanın daha kullanışlı olması ve site içeriğini kullanıcıya daha ulaşılır kılmasının etkisi büyük.