Navbar Ekleme ve Düzenleme

Temaya ait ilk yapıyı oluşturmaya başlıyoruz.  Öncelikle şu linkten uygun bir navbar yapısı seçip, kodunu kopyalıyoruz. Bu işlemden sonra Blogger temamızın kod kısmına girelim ve aşağıda olduğu gibi kodu yapıştıralım.
Blogger temaya navbar ekleme ve düzenleme
Navbar ekleme işlemini başarıyla gerçekleştirdik. Şimdi sıra geldi navbarı düzenlemeye. Öncelikle navbara ait linkleri düzenlemekle işe başlayalım. Navbar kodu içindeki <a class="navbar-brand" href="#">Navbar</a> kodunu siliyoruz. Bunu yapmamın sebebi navbar içerisinde logoya gerek olmamasıydı. Şimdi üst menüye bir arkaplan rengi vermeliyiz.      #5a6079 hex kodunda bir renk seçtim. Bu değişikliği aşağıdaki CSS kodu ile sağlayacağız. Ancak bunu yapmadan önce <nav class="navbar navbar-expand-lg navbar-light bg-light"> kodundaki üstü turuncu renkle çizilmiş olan bg-light seçicisini silmeliyiz. Bu seçici, navbara arkaplan rengi veren seçicidir. Bu seçici yerine biz kendi istediğimiz rengi belirten seçiciyi ekleyeceğiz. Şu şekilde bir CSS kodu yazıyoruz.
.arkaplan-rengi{
 background:#5a6079!important;
}
Blogger tema navbar düzenleme
Yukarıdaki resimde olduğu gibi CSS kodu <b:skin><![CDATA[ ]]></b:skin> etiketleri arasına yazıyoruz. Daha sonrasında ise bg-light yerine arkaplan-rengi seçicisini ekliyoruz ve temayı kaydediyoruz. Navbarın arkaplan renginin değiştiğini görüyoruz. Şimdi link isimlerini ve bağlantıları(href) değiştirebiliriz. Değiştirme işlemini kendi istediğinize göre yapın, href kısmı ise şimdilik boş kalabilir.

Navbar Ortalama

Farkettiyseniz eğer navbar linkleri ekranın en köşesinden itibaren başlıyor, sağ tarafında köşesinde ise arama kutusu var. Bir blog için bu genişlik fazla bu sebeple navbarı ortalamamız gerekiyor. O yüzden resimde olduğu gibi bir değişiklik yapıyorum.
Blogger tema, navabr ortalama
Öncelikle navbar kodunu, <div class="container"> </div> etiketi içerisine aldık. Bu sayede navbar ortalanmış oldu.

Temaya Arkaplan Ekleme

Navbarı düzenlemeye devam etmeden önce temaya bir arkaplan belirlemekte yarar var. Küçük bir araştırma sonucu şöyle bir site buldum. (transparent textures) Bu site içerisinde bulunan desenlerden bir tanesini seçtim ve indirdim. Daha sonrasında resmi upload edip, resim url adresini aşağıdaki CSS kodunda kullandım.
body{
 background:url("resim url adresi");
}
Şimdi sıra linklere ait özellikleri kaldırmaya geldi. Bu özellikler link kodu içerisinde yer alan active, disabled gibi özelliklerdir. Resimde olduğu gibi bu özellikleri kaldırıyorum.
navbar, active ve disabled kaldırma

Navbar Yazı Tipi

Menü linklerinin rengi beyaz(#ffffff) olacak. Yazı tipi boyutu ise 14px. Font ise "PT Sans" olacak. Ancak "PT Sans" fontunu doğrudan font-family olarak veremeyiz çünkü font Blogger'da yok. Bu yüzden fontu tema içerisine eklemeliyiz. Google Fonts sitesine giriyoruz. Beğenilen bir fontu "Select this font" butonu ile seçiyoruz.
Blogger Google Fonts Ekleme
Daha sonrasında embed kodu kopyalanıp, <head> etiketi içerisine eklenir. Artık "PT Sans" fontu temada kullanılabilir. Şimdi CSS kodu ile menünün font yapısını değiştirelim.
nav a{
 font-size: 15px;
 color: #fff!important;
 font-family: 'PT Sans', sans-serif;
}
Gerekli değişiklikler sağlanmıştır. Sıra geldi linkleri isim olarak düzenlemeye. Ben linkleri "Ana Sayfa", "Hakkında", "Dersler" ve "İletişim" olarak değiştirdim. Bu değişiklikten sonra başlarına isimlere uygun icon ekleyeceğiz. Maalesef Bootstrap 4 sürümü ile glyphicons özelliği kalktı, bu nedenle Font Awesome kullanacağız. Şu linke tıklayın.
Blogger tema font awesome ekleme
Artık font awesome temada kullanılabilir. Şimdi şu linkten linklere uygun iconlar seçiyoruz.
font-awesome-blogger-icon-ekleme
Yukarıdaki resimde yaptığım işlemi diğer linkler içinde uyguluyorum. Arama kutusundaki search butonunda yazan "search" yazısını silip, search iconu ekliyoruz.

Dropdown Menü Düzenleme

Dropdown yani açılır menüyü biraz daha özelleştirmek istiyorum. Bu sebeple temanın CSS bölümüne aşağıdaki kodu yazdım.
@media (min-width: 992px){
.dropdown-menu {
    margin-top: 8px!important;
    background: #000!important;
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
    margin-left: -30px!important;
 opacity: 0.5!important;
}}
.dropdown-menu {
 background: #000!important;
 opacity: 0.5!important;
}
a.dropdown-item:hover {
 color:#555!important;
}

Arama Kutusu Düzenleme

Arama kutusu için ilk önce kod kısmını düzenlememiz gerek. Tema kodunda CTRL+F yaparak btn-outline-success seçicisini bulup siliyoruz. Bu işlemden sonra CSS kod kısmına aşağıdaki kodları yazıyorum. placeholder içerisinde yazan Search değerini, "Ara.." olarak değiştiriyorum.
@media (min-width: 576px){
.mr-sm-2, .mx-sm-2 {
    margin-right: 0px!important;
}}

.form-control{
 border-radius:0!important;    
 border-bottom-left-radius: 3px!important;
        border-top-left-radius: 3px!important;
 border:none!important;
 padding: 3px 3px!important;
 font-size: 14px!important;
}
.btn{
 border-radius:0!important;
 border-bottom-right-radius: 3px!important;
        border-top-right-radius: 3px!important;
 padding: 2px 5px 2px 5px!important;
        font-size: 14px!important;
}
Tüm bu işlemlerden sonra navbar videoda görüldüğü gibi olacak.


Bu derse ait tema kodunu görmek için tıklayınız. Bir diğer yazıda header yapımını gerçekleştireceğiz.

6 yorum:

  1. icon eklemeyi sizin yaptığnız gibi yapıyorum ama bende iconun resmi çıkmıyor nerde ynalış yapıyorum

    YanıtlayınSil
    Yanıtlar
    1. Kodları görmeden net bir şey söylemem mümkün değil. Font Awesome kütüphanesinin kullanımı değişmiş olabilir. Güncel haline uygun şekilde kullanmanız gerekir.

      Sil
    2. Font Awesome dan alırken icon'un ücretsiz olduğundan emin ol yoksa gözükmüyor

      Sil
  2. merhaba yazınız çok güzel teşekkürler

    YanıtlayınSil
  3. Herşeyi adım adım yaptım ama navbar'ı daraltamadım. Muhtemelenbir yeri eksik anlatıyorsun.

    YanıtlayınSil
    Yanıtlar
    1. Hayır, eksik anlatmıyorum. Sadece belli şeyleri gösterdim. Burada spesifik olarak bir kişiye özel tema yapılmıyor. Gerisi yapmak isteyen kişiye kalıyor, mesela Google. İyi günler.

      Sil