10 Kasım 2014 Pazartesi

Sayfanın En Üstüne Yatay Şerit Ekleme

20 yorum

Son zamanlarda blog tasarımlarında sıkça kullanılan bir özellik var. Sayfanın en üstünde yüksekliği düşük ama yatay olarak sayfanın bir ucundan diğer ucuna giden şeritler. Bu şeritlerde bazen grafik kullanılırken, bazen de basit bir renk bloğu kullanılıyor.

Bloguna küçük bir dokunuşla değişik bir görünüm kazandırmak isteyen bloggerlara iki yöntemin de nasıl yapıldığından ve blogda nasıl durduğundan bahsetmek istiyorum.

 

!!! Blogun en üstüne şeridimizi eklemeden önce yapmamız gereken bir ayar var. Blogger kumanda panelinimize girerek Yerleşim > Navbar > Düzenle > Kapalı yolunu izliyor ve sayfanın en üstündeki Bloger navbarı kaldırıyoruz.

 

serit

İlk paylaşacağım yöntem sayfanın en üstüne yatay bir şerit eklemek. Bunun için Şablon > HTML’yi Düzenle yolunu izleyin ve Ctrl+F tuş kombinasyonun yardımıyla arama kutusunu açıp ]]></b:skin> satırın bulun. Bu satırın üzerinde bir yere aşağıdaki kodları ekleyin.

 

body .navbar {
height: 20px; /* Yükseklik */
padding: 0;
margin: 0;
border-top: 10px solid #c00000; /* Renk*/
}

 

Şeridin yüksekliğini ve rengini değiştirebileceğiniz yerleri ilgli kodların yanına not yazarak gösterdim.

 

serit2

İkinci olarak sayfanın en üstünde yatay bir grafik halinde şerit oluşturmayı anlatmak istiyorum. Bunun için öncelikle bir grafiğe ihtiyacınız var. Görmüş olduğunuz örnekte ben ters üçgen grafiği kullandım.

 

Bu yöntemde de Şablon > HTML’yi Düzenle yolunu izleyin ve Ctrl+F tuş kombinasyonun yardımıyla arama kutusunu açıp ]]></b:skin> satırın bulun. Bu satırın üzerinde bir yere aşağıdaki kodları ekleyin.

 

body .navbar {
height: 30px; /* Yükseklik */
padding: 0;
margin: 0;
background: url('https://lh6.googleusercontent.com/-b640Cjw7I3A/VFs9e1kHxHI/AAAAAAAALL8/1zWVRwmXoso/s22/b.png') repeat-x; /* Grafik*/
}

 

Bu yöntemde de yükseklği ve grafiği değiştirebilirsiniz. Grafiği Picasaweb, Dropbox, Flickr gibi bir grafik barındırma servisine yükledikten sonra linkini alıp bordo renkle gösterdiğim linkle değiştirmeniz yeterli.

 

Konuyla ilgili sorularınızı yorum bölümünden sorabilirsiniz.

20 yorum:

  1. Gene harika bir yazı, çok teşekkürler ellerinize sağlık.

    YanıtlaSil
  2. Yapamadım Serdar Hocam :/ Bi yardım etseniz ...

    YanıtlaSil
  3. hocam emeğinize sağlık yine on numara bir yazı olmuş
    http://mutluendam.blogspot.com/

    YanıtlaSil
  4. Bir ara üstünde çalışıp farklı şeyler çıkarabilirim. Eyvallah Serdar Hocam teşekkür ederim.

    YanıtlaSil
  5. Peki header Altında da Şerit şeklinde menüler varsa, yine de estetik durur mu sizce? Çünkü şu an çok karıştı aklım

    YanıtlaSil
  6. Anlatim super olmus cok isimize yarayacak tesekkurler blog hocam

    YanıtlaSil
  7. Cok guzel bir yazi paylasim cok isime yarayacak Allah razi olsun bloghocam senden

    YanıtlaSil
  8. @Miss Tiffany
    Çoğu blogda header altında yatay menü yok mudur zaten? Bu şeridin bir işlevselliği yok. Sadece blogun görünümünde fark yaratıyor. Çok kişi istediği için paylaştım belki başkalarının da işine yarar diye.

    YanıtlaSil
  9. @Serdar Kara

    aşağı inince kayboluyor mu ?

    YanıtlaSil
  10. Merhaba, yerimi bilemiyorum ama benim blog sablonuyla ilgili bir sıkıntım var... Hazır bir şablonu bloguma eklemek istiyorum ama şu şekilde olması gereken widgetlar (http://johnysip-deh.blogspot.com.tr) ben sayfaya ekleyince bu hale geliyor (http://cepcity.blogspot.com.tr)... Nerde hata yapıyorum? sol sutundaki widgetlar neden ortaya kayıyor? Yardımcı olabilirseniz cok sevinirim...

    YanıtlaSil
  11. Faydalı bir yazı olmuş, teşekkürler...

    YanıtlaSil
  12. @Serdar Kara

    link ekleyebiliyormuyuz

    YanıtlaSil
  13. Hocam bunu sabitlemek için ne yapabiliriz?

    YanıtlaSil
  14. nevbar yerine gagaet ekleyebiliyor muyuz

    YanıtlaSil
  15. Üzerine facebook twitter arama motoru nasıl yerleştirebiliriz yardımcı olur musunuz

    YanıtlaSil
  16. o yatay şerit üzerine html kodu nasıl ekleyebiliyoruz acaba

    YanıtlaSil
  17. Şerit üstüne sosyal medya butonlarını ekleme şansımız var mı varsa nasıl yapabiliriz?

    YanıtlaSil

Picardes

LİNKLER