Blog başlığı (header’ı) düzenlemek

Blog’unuzun linki yazılarak blog’uğunuza girildiğinde web tarayıcısı, sayfayı yukarıdan aşağı ve soldan sağa doğru yükleyeceği için  ilk görüntülenecek bölüm blog başlığınızın ve blog tanımızın bulunduğu bölüm olan header dır.

header

 

Durum böyle olunca blog başlığınızın önemi de artıyor blogger da barındırılan blog'ları gezdiğinizde içlerinden çok başarılı blog başlığına sahip olanlarını görmek mümkün fakat çoğu blog için bu durum söz konusu değil.

 

Blogger’ın en güzel taraflarından biriside çoğu işlemi bir kaç tıklama sayesinde kolayca yapabilmeniz. Örnek verecek olursak, blog başlığınızın (header’ın) arka planı olarak hazırladığınız görseli , sayfa öğeleri bölümünde bulunan üst bilgi yazan gadgetı kullanarak kolayca değiştirebilmeniz.

 

Diğer bir yöntemde blog başlığınıza ait kodlar üzerinde düzenleme yapabilmeniz, biz bu yazımızda her iki yöntem içinde size örnekler sunup blog başlığınızı kendi zevk ve beğenilerinize göre özelleştirebileceğiniz işlemleri paylaşacağız.

 

 

Kodlama bilginiz yoksa blog’unuzun başlığını değiştirmenin en kolay yolu her hangi bir resim düzenleme programı kullanarak hazırladığınız görseli kullanmak bunun içinde, sırası ile blogger kumanda paneli >> tasarım >> yerleşim yolunu takip ederek gadget ekleyip kaldırdığınız bölüme gidin.

 

hader-blog-baslıgı

 

Bu bölümde yer alan Blog(Üstbilgisi) diye yazan gadget sizin daha önce blog başlığınızın arka planı olarak hazırladığınız bir görseli veya blog’unuzun logosunu kolayca yükleyebilmeniz sağlıyor.

 

 

Gadgetın sağ alt köşesinde bulunan Düzenle yazan bağlantıya tıkladığınızda hazırladığınız görseli yükleyebileceğiniz bir pencere açılır.

 

blog-baslıgını-yapılandır

 

Açılan pencerede dosya seç yazan bağlantıya tıkladıktan sonra açılan pencerede bilgisayarınızdan seçtiğiniz görseli yükleyebilirsiniz.

 

Burada dikkat etmeniz gereken görselinizin genişliğinin headerdan yani blog başlığı bölümünüzden büyük olmaması header bölümünün boyutlarını bilmiyorsanız sayfanın hemen altında header bölümünün genişliği yazar.

 

Dikkat etmeniz gereken diğer bir noktada eğer hazırladığınız görselin üzerine blog ismnizi yazdıysanız seçeneklerde yer alan başlık ve tanımın yerine yazan bölümün işaretli olması.

 

Bu sayede blog başlığınız ve hazırladığınız görsel üst üste binmemiş olur, ayrıca görselinizin boyutlarını bilmiyorsanız Sığacak şekilde küçült yazan seçeneği işaretlerseniz eğer hazırladığınız resim header bölümünden büyükse, taşma yapmaz.

 

Eğer blog başlığınızın arka planını olarak hazırladığınız bir görseli kullanmak gibi basit bir işlemle kalmayıp, biraz daha ileriye giderek blog başlığınızın yanında arama kutusu,rss aboneliği veya reklam yayınlayabileceğiniz farklı bölümler de oluşturmak istiyorsanız, blogger kodlar üzerinde değişiklik yapabilme imkanını da size sunuyor.

 

 

Blog başlığına ait kodları düzenleyebilmeniz öncelikle bu kodların hangisi olduğunu bilmeniz gerekiyor her şablonda bu kodlar farklı isimlerle tanımlanmış olsa da yapacağımız işlemler aynı olduğu için daha sonra kendi şablonunuzda blog başlığınıza ait kodları bularak yaptığımız işlemleri tekrarlayabilirsiniz.

 

 

 

Genellikle “header” diye tanımlanan bu kodları daha kolay bir şekilde bula bilmek için bilgisayarınızın klavyesinde bulunan CTRL ve F tuşuna bastıktan sonra açılan arama formunda aratın.

 

Kendi şablonumda “header” diye arattığımda aşağıdaki ekran görüntüsünde bulunan kodlar çıkıyor.

 

header-1 

Bu kodların tanımanız ve ne işe yaradığını bilmeniz yapacağınız işlemleri kolaylaştıracaktır.

 

header-2

 

Not: Kullandığınız şablon blogger’ın şablon tasarımcısını kullanarak düzenlediğiniz bir şablonsa blog başlığına ait kodlar <header> diye başlayıp </header> diye bitebiliyor kodlarınız bu şekildeyse yapacağımız işlemleri bu bölümde uygulayacaksınız.

 

1. Adım HTML kodlarını düzenleyin.

Hangi kodları düzenleyeceğinizi gördükten sonra yapacağımız işlemlere başlayabiliriz bizim amacımız header bölümünde iki farklı bölüm oluşturmak olduğu için <div id=’header-wrapper’> ile başlayan bölümden başlayarak resimde görülen son </div> kadar olan bölümü siliyorum ve aşağıda bulunan kodları ekliyorum.

 

 

<div id='header-wrapper'>

 

<div class='header-left'> <h1> Blog’uğunuzun linki buraya   </h1> </div>

 

<div class='header-right'> Buraya  arama kutusu,rss aboneliği veya reklam kodlarını ekleyebilirsiniz   </div>


    </div>

              

 

Yukarıda yeşille renklendirdiğim <h1> ile başlayıp </h1> ile kapanan kodlar blog başlığına ait kodlar buraya blog’uğunuzun linkini ve adını yazabileceğiniz gibi şsterseniz hazırladığınız bir görseli de kullanabilirsiniz.

 

Blog başlığınızın link şeklinde olmasını istiyorsanız, aşağıdakine benzer bir link oluşturup h1 tanımının içine yerleştirin.

 

<a href='http://blogadınız.blogspot.com' > Blogunuzun adı</a>

              

 

Kendi hazırladığınız bir görseli kullanmak isterseniz görselinizi Picasa web albümlerine yükledikten sonra linkini alıp aşağıda bulunan kodlarda gelmesi gereken yere yerleştirdikten sonra kullanabilirsiniz.

 

<a href='http://blogadınız.blogspot.com' > <img title="blogunuzun adı" src='http://resminizin-linki.com/></a>

              

 

 

Bu işlemlerin sonucunda blog’uğunuzda görüntülenecek blog başlığının HTML kodlarını  yerleştirmiş oluyoruz bundan sonraki adım bu kodları şekillendirecek olan CSS kodlarını düzenlemek.

 

 

2.Adım CSS Kodlarını değiştirin

CSS kodlarını düzenlemeye başlamadan önce aramada bulduğum blog başlığına(header’a) ait kodları silip aşağıda bulunan kodları ekliyorum.

 

#header-wrapper{
overflow:hidden;
width:100%;
height:100px;

  text-align: center;

}
.header-left{

float:left;
width:400px;
height:100px;
text-align: center;
padding:20px;

border:1px solid #000;

}

.header-right{
float:right;
width:400px;
height:100px;
padding:20px;

text-align: center;

border:1px solid #000;

}

 

 

CSS kodlarını da kaydettikten sonra ön izleme yapabilir veya kaydedip yaptığınız işlemleri görebilirsiniz.

 

CSS kodlarında yer alan .header-right  sağ bölümü .header-left sol bölüm oluyor.

bölümleri daha rahat ayırt edebilmeniz için border: 1px solid #000; diye bir kenarlık ekledim isterseniz daha sonra bu kodu silip kenarlıkları kaldırabilirsiniz.

 

bölümlerin boyutlarını da width değeriyle oynayarak değiştirebilirsiniz.

Paylaş !

41 yorum:

  1. Admin
    öncelikle bu güzel yorumun için teşekkürler ...

    blog'uğunu gezdim ve güzel bir blog olmuş ... özellikle ismi çok hoş bence alan adı boşsa alan adını almaya bak.

    YanıtlaSil
  2. Begendigie sevindim. alan adıda aldım yeni blogerdan ama hiç bir ayar yapmadım bilmedigimden onlar yapar heralde?
    alan adı aldım hızlı düzenleme cubugum kayboldu arama kutusuda bişey göstermez oldu bu olaydan sonra bunu anlamadım?
    birde benim blog.spot sitem ne olacak aynı isimliydi?
    Teşekürler şimdiden kib.üstat

    YanıtlaSil
  3. blogspot yerinde duruyor ..yani tüm dosyaların hala blogspot ta barındırılacak ama alan adı olarak kullandığın eski alan adın yerine yeni alan adına yönlendirilecek.

    YanıtlaSil
  4. merhabalrr birtürlü başlığımı buyutemedımm tabıkı reswmımıdeee cok gusel açıklmaışsınız ama yetenksıızım sanırım dedıklerınız yapıtıgm haldeolmuyo

    YanıtlaSil
  5. merhaba yeliz hanım blog'unuza baktım ve yapmak istediğinizi anlamdım .


    durum şöyle bir görsel hazırlamış ve bu görseli blog başlığınız yani header'ın arka planı olarak kullanmak için yüklemişsiniz fakat hazırladığınız bu görselde blog'unuzun ismi bulunduğu halde yine hemen altında blog'uğunuzun adı yazı ile yazıyor.

    şimdi ne yapmak istediğinizi yazarsanız size daha fazla yardımcı olabilecek adımları paylaşabilirim.

    büyütmek istediğiniz blog başlığı olarak yüklediğiniz görselmi yoksa hemen görselin altında yer alan blogunuzun adının bulunduğu yazımı ?

    YanıtlaSil
  6. bişey sorucam blogumda bir problem var 2 tane kayıt başlığı var ve ben birini silemiyorum napmalıyım

    YanıtlaSil
    Yanıtlar
    1. ♔... Madam Karamel ...♔ blog'unuz buysa bende bir sorun görünmüyor..

      farklı bir blogsa linkini yazmanız gerekir.

      Sil
  7. Merhaba Ustacığım
    Kusuruma bakmazsanız aşağıdaki 2 konuyu beceremediğimden bilgi isteyecektim.
    1- erkoc.blogspot.com bloğumun headerını sizin yazılarınızıda okuyarak düzenlemeye çalışıyorum. Ama nasıl resim solda ERKOÇ'UN DÜNYASI yazısı sağda yapabilirim? Bunun için yukarıda HTML Kodları düzenliyin adımında belirttiğiniz div kodları arasına ne gelmeli?

    2 - Resim ile birlikte yazının , olduğu gibi Header alanını kaplamasını istersem naıl bir kod uygulamalıyım?
    Kusura bakmayın size sora sora öğreneceğim.
    Saygılar

    YanıtlaSil
    Yanıtlar
    1. css kodları içerisinde bu kodu .Header h1 { bulup hemen altına float:right; kodunu ekle bu yazıyı sağa yaslıyacaktır.

      diğer sorunu anlamadım resmin headerı kaplamasınımı istiyorsun ?

      Sil
    2. Merhaba Ustacığım

      Ben bloğumun Şablon-HTML düzenle içindeki kodlara bakıyorum hem widget genişlet işaretli iken hemde değilken ctrl+f yaparak bu kodu bulamıyorum Haydaaaa.hatta header bile çıkmıyor.bu ne iş anlamadım.Bu CSS kodları dediğiniz yerde aynı yer değilmi?

      2 sorumda ise şunu söylemek istemiştim.İlk şeklinde resim solda yazı sağda bir header oluşturup , ikinci şeklinde de resim başlığın arkasına gelerek tüm header alanını kaplasın hangisi göze hoş gelirse onu seçerim demiştim.Yapamadığım bu idi.(Sonra sizin yazılarınızı okuyarak headerın alt üst yüksekliği ayarlama işine girişeceğim)
      Saygılar

      Sil
    3. kodları bulamıyorsan headerı değiştirmenin en kolay yolu, daha önce sana hazırladığım resim gibi bir resim hazırlayarak yükle.

      Sil
  8. Logonun solda Başlık ve açıklamanın da logonun sağında ve alt alta olmasını istiyorum. Açıklama kısmını tek satırda göstermek için ne yapmama gerekiyor. Verdiğiniz kodları kendi şablonumda bulamadım. Yardımcı olursanız sevinirim

    YanıtlaSil
    Yanıtlar
    1. yapamak istediğin şey için uzun ve ayrıntılı bir açıklama gerekiyor bir ara boş kalırsam bir açıklama hazırlarım..

      Sil
  9. üstad ben birsürü css header kodu buldum bunların hepsini silmem mi gerekiyo acaba?

    YanıtlaSil
  10. tamam usta hallettim ellerine sağlık herşey için teşekkürler.

    YanıtlaSil
  11. merabalar hocam yine ben:) seni bugünlerde biraz uğraştırıyorum ama bir sorum olacak senin buloğun altına f ile başlıyodu ama şuan tam adını unuttum kusura bakma nasıl yaptın acaba bloğunu gezdim ama bir türlü bulamadım yaptığın bir kaynak veya bu blogda varsa adresini verirmisin acaba? teşekkürler

    YanıtlaSil
    Yanıtlar
    1. footerden bahsediyorsan kaynak yok kodlarını kendim yazdım ama buradan anlatmanın imkanı yok..

      Sil
  12. merhaba uzun zamandır arıyorum bulamıyorum bloggerde google aramalarında site başlıgını gostermek istemiyorum nasıl yapmam gerekiyor acaba bilginiz yardımcı olabilirmisiniz...

    YanıtlaSil
  13. merhaba bloğuma hazırladığım bir resmi full screen header yapmak istiyorum yani sadece blog alanını değil boydan boya sayfanın üst kısmını kaplayan bi header ama internette bu konuda detaylı bir bilgi ve anlatım bulamadım yardımcı olabilirseniz çok sevinirim. www.gecekiyafeti.com

    YanıtlaSil
    Yanıtlar
    1. hazırlaadığınız resmi yukarıda birinci bölümde nlatıldığı şekilde yükleyecksiniz.

      Sil
  14. Güzelmiş hocam saolasınız :D

    YanıtlaSil
  15. merhaba hocam

    benim sitem www.20dakikadizisi.org header ile banner var ama booyutunu nasıl büyütebilirim onun.

    div id='header-wrapper'
    a href='/' img alt='' border='0' src='resim linki' böle boyutunu nasıl ayarlabilirim ek olarak

    YanıtlaSil
  16. merhaba,yüklediğim resim üst bilgi alanının tamamını doldurmak yerine küçük bir qlqnda görülüyor.diğer bloglarda gördüğüm gibi olmuyor.yardımcı olursanız sevinirim

    YanıtlaSil
    Yanıtlar
    1. sığacak şekilde küçült onay kutusunu işaretlemeyin
      Yükleyeceğiniz resimde header alanının boyutları kadar olmalı
      header genişliğiniz 960px diyelim
      resimde bu ebatlarda olmalı örneğin 960px 200px
      Bu resmin genişliği 960px enide 200px anlamındadır
      resminizi bu px değerlerinde olur ve yüklerseniz bu boyutlar korunacak

      Sil
  17. Benim blogda şuanda sizin 2. fotoğrafta gösterdiğiniz gibi bir "header gadgeti" yok. Ne yapmam gerek?

    YanıtlaSil
  18. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  19. merhaba tayfun hoca ben video paylaşım blogu açmak istiyorum ama video paylaşıma uygun bir tema bulamadım yardımın olabilirmi

    YanıtlaSil
    Yanıtlar
    1. Googlede "blogger tehemes" diye aratırsan onlarca şablon sitesi bulabilirsin.

      Sil
  20. selam aleykum hocam, blog acmaya calışıyorum ama hep gecersiz baslık degeri diye hata veriyor , ne yapmalıyım şimdiden tesekkürler

    YanıtlaSil
  21. hasan eger öğrenirsen benı de bılgılendır aynı sorunu yasıyorum

    YanıtlaSil
  22. Blog başlığımı ortaya almak istiyorum, ama benim html kodlarımda sizin anlattığınız gibi #header-wrapper { yazısı falan yok. Yardımcı olursanız sevinirim.

    YanıtlaSil
    Yanıtlar
    1. Aşağıdaki kodu kopayalın ve sırası ile işlemleri uygulayın.

      .Header h1 {
      width:100%;
      text-align:center;

      }


      Şablon sekmesine gidip Özelleştir'i tıklayın. Ardından, kodunuzu Gelişmiş | CSS Ekle sekmesinde ki alana ekleyin. Yaptığınız değişiklikleri , canlı önizlemede kontrol ettikten sonra kaydedin.

      Sil
    2. Teşekkür ediyorum denedim ama malesef yine olmadı.

      Sil
  23. Merhabalar tekrar bu yazınızı okudum ve üst bilgi ekledim sorunu çözdüm çok teşekkürler :)

    YanıtlaSil
  24. Bloggerde HTML/javascript li bi kod oluşturduğumuzda ona başlık koyuyoruz ya mesela Popüler Yayınlar diye oraya sadece bi yazı çıkıyo.Onu daha güzel arka planlı yapabilir miyiz ?

    YanıtlaSil
  25. Merhabalar heryerde araştırdım ama bir türlü bulamadım daha önceleri şablonlardan özelleştire tıkladığımda başlığımın yazıtipini rengini boyutunu değiştirebiliyordum ama artık yapamıyorumm herşeyi denedim özel bir tema kullanıyorum ondan olabilirmi?

    YanıtlaSil
  26. Blog başlıkları, içeriğimizi yıldızlayan mükemmel eklentilerdir.. Etkileyici ve ilgi çekici blog başlıkları olmadan yayınlanan makalelerimizin pek de bir önemi yoktur.. Başlıkların önemini belirten yazıma aşağıdaki linkten ulaşabilirsiniz.. Teşekkürler..

    http://www.cerezlerim.com/2014/03/gel-de-okuma-baslklarn-okuyucuyu.html

    YanıtlaSil
  27. Tesekkür ederim bilgilendirmeniz icin, en kısa zamanda uygulayacagım yeni blog acınca pek bilgisi olmuyor insanın:) Saygılar..

    YanıtlaSil

  28. Bu güzel bilgiler için teşekkürler. Ben yazı içinde, başlık altına ve yazı sonuna nasıl gatget eklendiğini sormak istiyorum. Linkini verdiğim bloğumda bu sorunu kod ekleyerek çözdüm. Ancak kod pek kullanışlı olmadığından bunu gatget ekleyerek yapmak istiyorum. Yardımcı olursanız sevinirim.
    http://eniyikektarifleri.blogspot.com.tr/

    YanıtlaSil
  29. Sayin admin. Benim bir sorum olacak. Blogger sitemi dreamweaver ile acip, orada gerekli degisiklikleri yapabilirmiyim? Tesekkurler.

    YanıtlaSil

  30. Konuşma Başı

    459 kişi bunu beğendi
    Kişisel Blog
    15:55
    Webde gezinirken sizin sidenizle karşılaştım anladımki bu blogger sitesi ve bloggermodiye.com sitesi yönlendirme bu tür olaylarda çok rastlanılır www olmadan siteye girmeme sorunu sizin sitedede bu sorun var onu düzeltmenizi öneririm(internette bu konu üzerine bilgi verilmiş basit)

    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