Blogger şablonunu özelleştirmek ( Bölüm I )

Blogger blog’uğumuzu  oluşturup yazılarımızı yayınlamak için yeterince güçlü bir platform olsa da kendi tarzınızı blog’unuza yansıtmak için şablonunu özelleştirme işini size bırakıyor.
          şablon-tasarlamak

Biraz HTML ve CSS bilgisiyle bog’uğunuzun görüntüsünü tamamen kişiselleştirebileceğiniz gibi sonradan ekleyebileceğiniz kodlar sayesinde farklı bölümler oluşturarak blog’uğunuzu daha fonksiyonel ve kullanışlı bir hale de getirebilmenizde mümkün. 


Kolları sıvayın Blogger şablonlarını özelleştiriyoruz.

Bundan önceki yazılarımızda sizlere blogger’ı daha etkin bir şekilde kullanabileceğiniz onlarca eklenti ve uygulamadan bahsetmiştik. İşi bir adım daha öteye götürerek blog’umuzun kodları üzerinde yapacağımız küçük değişikliklerle şablonumuzu kendi zevkinize göre özelleştirebileceğiniz yazı serisine başlıyoruz.

         inter-actif
Uzun zamandır bir Blogger kullanıcısıysanız biraz değişiklik yapmak blogu’nuza yeni bir heyecan katabilir.

Yapacağımız işlemleri adım adım takip edebilmeniz için İnteraktif Blog adında birde blog oluşturduktan  sonra, değişikliklerin daha iyi görünmesi için bir/ikide yazı yolluyorum (burada yardım alıyorum)

Şablonumuzu özelleştirirken yapacağımız işlemler boyunca, daha çok müdahale edeceğimiz kodlar da CSS kodları yani şablonumuza HTML olarak eklediğimiz bölümlerin arka planını, yazı tipini,boyutunu, rengini belirleyen kodlar.

  20100210_121250_thumb2_thumb[6]

Bu kodlar üzerinde düzenleme yapabilmek için  sırası ile Blogger  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyoruz.

Aslında buradaki modül sayfa öğeleri ve yazı tipleri gibi blog’uğumuzun genel tasarımı ile ilgili diğer bölümlerde yaptığımız değişiklikleri  kodlanmış olarak görebildiğimiz bölüm



Blogger’ın şablon tasarımcısına geçmeden önce kullandığı şablonlardan biri olan Minima’yı seçebilmek için ilk olarak kod düzenleyicisin altında bulunan Yerleşim Şablonu Seçin bağlantısına tıklayarak  şablonumu değiştiriyorum.

          Şablon-seç

Bu şablonun özelliklerine de kısaca değinecek olursak çoğu standart Blogger şablonu gibi  görsel kullanılmadan tamamen CSS ile şekillendirilmiş iki kolonlu bir yapıya sahip ve kolayca düzenlenbiliyor.

html-yi

 /* Use this with templates/template-twocol.html */  ifadesi  ile başlayıp ]]></b:skin> ifadesine kadar yer alan bölüm, blog’unuzun CSS kodlarını barındırıyor burada genellikle önünde # yıldız veya . nokta bulunan kodlarda blog’uğumuzun CSS kodları oluyor.
Blog’nuzun tasarımı üzerinde  değişiklikler yapmak için  kulaklı {  } parantez içerisine alınan tanımlamalara müdahale ederek  görüntüsünü tamamen şekillendirebileceğiniz gibi sonradan ilave edeceğiniz kodlarla farklı bölümler oluşturarak  neredeyse bir web sitesini sıfırdan tasarlar gibi blog’uğunuzu kendi zevkinize göre özelleştirebilirsiniz.

ben Oluşturduğunuz blog’uğun konusu her ne olursa olsun onu geliştirmenin ilk koşulunun blog’unuzu tanımaktan geçtiğini unutmamalısınız. Sizin şablonunuzun kodları farklı olabilir fakat şablonunuzu özelleştirirken kullanacağımız teknikler aynı olduğu için daha sonra kendi şablonunuzda bu bölümlere denk gelen kodları bularak blog’uğunuzu kendi zevkinize ve beğeninize göre şekillendirebilirsiniz.

Bu yazı ile ilgili konular                                                                           Şablon Tasarımı  ➜
Paylaş !

22 yorum:

  1. Nevbara sizin blogunuzda olduğu gibi en üstte giriş bölümü olsun istiyorum. nasıl ekleyebilirim. bir yolu var söylemiştiniz ama bunun daha pratik olacağını düşünüyorum.
    teşekkürler

    YanıtlaSil
  2. Biz menü kullanıyoruz fakat blog ziyaretçilererimizden sizinkine benzer bir çok istek geliyor..ilerleyen günlerde blogger navbar benzeri bir eklenti hazırlayabilirim tabi gereksiz bölümleri kaldırıp biraz daha işlevsel hale getirerek ...

    YanıtlaSil
  3. benim bir şiir blogum var kategorı ekleyıp çeşitlendirmek istiyorum kategorı bolumu nıye yok ne yapabılırım http://tembelsair.blogspot.com/

    YanıtlaSil
  4. @Tembelin şiirleri blogger da direk yazıları kategori olarak işaretleyemiyorsun fakat etiketleri kullanarak bu işlemleri manuel olarak yapabilirsin, bunu nasıl yapabileceğinizi ayrıntılı olarak daha önce anlatmıştık bu yazı yardımcı olacaktır.

    YanıtlaSil
  5. Şimdiki özellikleriyle bloggera istediğim şemayı bir bütünlük içerisinde uygulamam mümkün mü acaba? Yoksa ille de kodlarla mı yapmak gerekiyor.
    Mesela http://bellabloggerdesign.blogspot.com/ buradaki bayanın yaptığı gibi bi blog tasarımı için css bilmek gerekir mi? Bloggerın şablon düzenleyicisiyle yapmak mümkün müdür?

    YanıtlaSil
    Yanıtlar
    1. oradaki bayan arkadaş çok fazla araştırma yapıyor(çok soru sorar:) ve kendisini css ,Html ve javascript konusunda geliştirmek için çok çalışıyor, seninde o tarz bir şablon oluşturman için css ve html bilgisi gereklimi dersin evet gerekli , ama şablon tasarımcısı yerine hazır bir şablonla işe başlayabilirsin.

      örnek btemplateste bu tarz bir çok şablon bulabilirsin.
      http://btemplates.com/2011/blogger-template-focus-point/demo/

      nikinden anladığım kadarıyla haber sitesi tarzında bir şey hazırlamak istiyorsun bunun içinde senin ayrıca json(javascript kütüphanesi) hakkında da bilgin olması gerekir bu kodlama dillerinde kendini geliştirip blogger'ı kullanarak Hürriyet gibi bir site bile hazırlaman mümkün.

      Sil
    2. nickimle kimliğimin hiç alakası yok öncelikle bunu söyleyeyim:) Ve yanıtınız için teşekkür ederim. Bİ kurabiye bloğu tasarlamaya çalışıyorum ben de. Az bi photoshop bilgim var,bu nedenle bloğumu da kendim tasarlamak istedim. Hayal ettiğim gibi yapamadım ama şablon tasarımcısı ve gadgetlerin yardımıyla bişeyler yapmaya çalışıyorum.Arka plan ve başlık kısımlarını hallettim. Şimdi gadgetler ile resim ekleyerek bazı bölümlerin (kategori,izleyici gibi) başlık kısımlarını özelleştirmeye çalışıyorum. Başlığı arkaplansız png olarak ekledim,iyi de oldu.Aynısını şimdi bu başlıklara da uygulamaya çalıştım ama resim ekleyince kendiliğinden beyaz bir arka plan oluşturuyor. Bunu çözmeye çalışıyorum şimdi de :) Bi öneriniz olabilir mi?

      Sil
    3. eklediğiniz png formatındaki resmin arka planı saydamsa başlıkların arka planı beyaz olarak tanımlanmış demektir , eğer şablon tasarımcısı kullanıyorsanız başlıkların arka planını sanırım oradan değiştirebilirsiniz.

      blog'unuzun linkini yazarsanız daha fazla yardımcı olabiliriz.

      Sil
    4. Evet arka plan saydam.Blog başlığında bi problem olmadı,oraya ayar yapılabiliyor ama gadgetlerden resim eklediğimde arka plan beyaz oluyor. Teşekkür ederim yanıtlarınız için..

      Sil
  6. öncelikle başta tayfun bey olmak üzere bu blogda emeği geçen herkese teşekkür etmek isterim.Bloglar ve özelliklede blogger tabanlı bloglar üzerine hazırlanmıs hareketli ve yararlı bir ortam oluşturulmuş ve bundan bende fazlasıyla yararlanmaktayım.Tayfun bey size bir sorum olacaktı şöyle ki: blogger tabanlı oluşturdugum birkaç günlük daha çok yeni bir blogum var sizide devamlı takip ederek blogumu geliştirmeye çalışıyorum.ben tarayıcı olarak firefox kullanıyorum ve tüm blog düzenlemelerimi bunda yapıyorum ancak gördümki blogum crome da ve explorerda yazı karakteri değişerek gösterilir.diğer tarayıcılardada firefox daki gibi yazı karakterim olmasını ve sabit kalmasını nasıl sağlayabilirim.sizde bir bakarsanız çok sevinirim: http://elitronik.blogspot.com şimdiden teşekkür ederim.

    YanıtlaSil
    Yanıtlar
    1. rica ederiz elitronik blog'umuzun faydalı olmasına sevindim.

      soruna gelecek olursak h2 başlıklarında google font api kullanmışsın diğer bölümler içinde google font api kullanırsan sorun çözülecektir, ayrıca ilerleyen günlerde tarayıcı uyumu hakında daha ayrıntılı bir yazı hazırlayabiliriz yani blog'unun tüm tarayıcılarda aynı görünmesi için neler yapabileceğin hakkında.

      Sil
  7. gerçekten çok yararlı bir konuya değinmiş olursunuz şimdiden teşekkürler.peki diğer bölümler için google font api yi nasıl kullanabilirim daha çok yeniyim blog ortamında detaylı bir şekilde anlatabilirseniz çok sevinirim.bide kusura bakmazsanız bir sorum daha olacak bloğuma baktıgınızda görmüşsünüzdür kayıtlardaki fotolar her zaman çerçevelerin içinde görüntüleniyor bense arka fon beyaz oldugu için fotoların çerçevesiz sanki fonun üzerindeymiş gibi görünmesini istiyorum bunun için ne yapabilirim.yardımlarınızdan dolayı şimdiden teşekkür eder iyi çalışmalar dilerim.

    YanıtlaSil
  8. diğer bölümler için h1, h2, h3, h4, h5, diye arama yapman ve post yani yazıların geldiği bölümleride değiştirmen gerek ve bu kodlar her şablonda farklı tanımlanabiliyor.

    diğer soruna gelecek olursak çerçeveyi kaldırmak için aşağıdaki kodu bul.

    .post-body img {
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }


    bu kodu silip yerine aşağıdaki kodu yapıştır.
    .post-body img {

    border:none;
    }

    ve kaydet.

    YanıtlaSil
  9. çok teşekür ederim çerçevelerle ilgili değişikliği yaptım gerçekten daha iyi oldu.tarayıcı uyumu hakkındaki yazınızıda merakla bekliyorum.tekrar teşekür ederim yardımlarınız için.

    YanıtlaSil
  10. ben blog yazmaya yeni başladım bana yardımı olacak biri varmı acaba ne yapacagım ve nereden başlayacagım konusunda

    YanıtlaSil
    Yanıtlar
    1. Yukarıda menude blogger ipucu diye bir kategori var ona tıklarsanız bir çok öneri bulabilirsiniz.

      Sil
  11. Merhaba. Benim css ile ilgili bir sorunum var. Bloğu genişletme ile ilgili kaydınızı okumuştum fakat bulamadığım için buraya yazıyorum.

    Bloğumda istediğim yerleri(genişletilmesi gereken) heryeri genişletebiliyorum fakat sadece üst menü sekmesini genişletemiyorum. Css'de px değeri yok yada ben bulamıyorum yardımcı olursanız sevinirim.

    url: http://bilgisayariz.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. css kodlarının içinde bu kodları bul.
      .menu-primary ul{min-width:160px}

      buradaki min-width:160px değerini yükseltiğin sürece menude o oranda genişler ..
      örne oraya min-width:260px yazrsan 260 kadar genişler.

      Sil
  12. Merhabalar Tayfun,

    Önce verdiğiniz bu hizmetten ötürü size sevgi, selam ve teşekkürlerimi iletmeyi bir borç bilirim. Malumunuz olduğu üzere, blogspot yeni arayüze geçerek eski ve klasik şablonlara erişimi de ortadan kaldırmış bulunmaktadır. Yukarıda örneğini anlattığınız şablonun HTML kodlarını nereden bulabilirim? (iki kolonlu sample blog) İnternet üzerinden çok aradım ama aynı şablonun kodlarına ulaşamadım.

    Selam ve dualarımla.

    YanıtlaSil
  13. Tayfun allah razı olsun her arma yaptığımda sen cevaplıyorsun senin sayende mükemmel bir site oluşturdum ve para kazanıyorum. indirwx.com ziyaret etmek istersen

    YanıtlaSil
  14. Merhaba,

    Güzel bir şablon indirdim, kurdum ve tamamını kendime göre özelliştirdim, xml - css - renkler hepsi tamam. Sayfaları da bağladım ve tıklayınca sayfa açılıyor ama yeni gönderi yaptığımda bunu istediğim sayfada yayınlayamıyorum. Acaba neden olabilir?

    YanıtlaSil
  15. minima şablonu nerede acaba? Bende o yok. Simple falan filan var.

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz