Sayfanın En Üstüne Yatay Şerit Ekleme
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.
İ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.
İ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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDNg4e8J2TgcinhjEw0wHK1o_BePyXL8lQQNk7bGrurA50sCsAs_B47F1secTtGg-h59hdf_49cLdmI_Y4bg4d_EbWE6evD0DCsWcqkZClI93ND8uwozGe573iWkhzAj6zUXh3GLodsDh/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.
Gene harika bir yazı, çok teşekkürler ellerinize sağlık.
YanıtlaSilYapamadım Serdar Hocam :/ Bi yardım etseniz ...
YanıtlaSilhocam emeğinize sağlık yine on numara bir yazı olmuş
YanıtlaSilhttp://mutluendam.blogspot.com/
Bir ara üstünde çalışıp farklı şeyler çıkarabilirim. Eyvallah Serdar Hocam teşekkür ederim.
YanıtlaSilPeki header Altında da Şerit şeklinde menüler varsa, yine de estetik durur mu sizce? Çünkü şu an çok karıştı aklım
YanıtlaSilAnlatim super olmus cok isimize yarayacak tesekkurler blog hocam
YanıtlaSilCok guzel bir yazi paylasim cok isime yarayacak Allah razi olsun bloghocam senden
YanıtlaSil@Miss Tiffany
YanıtlaSilÇ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.
Teşekkürler hocam
YanıtlaSil@Serdar Kara
YanıtlaSilaşağı inince kayboluyor mu ?
Teşekkürler :)
YanıtlaSilMerhaba, 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ıtlaSilFaydalı bir yazı olmuş, teşekkürler...
YanıtlaSil@Serdar Kara
YanıtlaSillink ekleyebiliyormuyuz
iyi olmuş hocam
YanıtlaSilHocam bunu sabitlemek için ne yapabiliriz?
YanıtlaSilnevbar yerine gagaet ekleyebiliyor muyuz
YanıtlaSilÜzerine facebook twitter arama motoru nasıl yerleştirebiliriz yardımcı olur musunuz
YanıtlaSilo yatay şerit üzerine html kodu nasıl ekleyebiliyoruz acaba
YanıtlaSilŞerit üstüne sosyal medya butonlarını ekleme şansımız var mı varsa nasıl yapabiliriz?
YanıtlaSil