Merhaba sayın sorbize okuyucuları. Bu yazımda WordPress için; kendi kitap özetleri blogumda da kullandığım, blogger tabanlı bloglarda gerek arama yapmak için gerekse blogu izlemek için hızlıca ulaşabildiğimiz üst bar (üst çubuk) yapımını anlatacağım. Anlatımı yapma sebebim, bu çubuğun görünümü sevdiğim için kendi bloguma özel kodlarını çıkarmıştım. Ardından bir ziyaretçinin iletişim formundan üst çubuğun kodlarını istemesi üzerine ben de bu yazıda anlatım yapayım dedim.

Kodlamaya başlıyoruz :)

1. Adım

#ustcubuk {
z-index:1000;
width:100%;
position:absolute;
white-space:nowrap;
color:#000;
height:29px;
border-bottom:1px solid #ccc;
font-size:13px;
font-family:verdana;
}

#ustcubuk #ustcubuk-ap {
position:absolute;
left:0;
top:0;
width:100%;
height:30px;
z-index:-1;
background-color:#ddd;
opacity:0.8;
filter:alpha(opacity=80);
}

#ustcubuk-iap {
padding:4px 1em 3px 0;
}

#ustcubuk-kontrol {
margin-left:.2em;
}

#ustcubuk #ustcubuk-logo {
display:block;
margin-right:8px;
margin-left:8px;
width:20px;
height:20px;
background:url(resim/cubuklogo.png) no-repeat -26px 0;
cursor:hand;
}

#ustcubuk #arama-kutusu {
background-color:#fff;
border:1px solid #999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
margin:0 .5em 0 0;
padding:0 .3em;
}

#ustcubuk #arama-kutusu-tus {
display:block;
width:13px;
height:13px;
cursor:hand;
background:url no-repeat 0 0;
}

#ustcubuk #arama-kutusu-tus:hover {
background:url(resim/cubuklogo.png) no-repeat -13px 0;
}

#ustcubuk #arama {
font-size:13px;
color:#000;
background-color:transparent;
border:none;
width:10em;
margin:0;
}

#ustcubuk .baglanti,#ustcubuk #yazi {
font-size:13px;
vertical-align:middle;
padding:0 .4em;
}

#ustcubuk .baglanti {
color:#555;
text-decoration:none;
white-space:nowrap;
cursor:hand;
}

#ustcubuk .baglanti:hover {
color:#000;
text-decoration:none;
}


2. Adım

Şimdi de header.php dosyanızı açıp aşağıdaki kodları etiketinden hemen sonra ekleyin.


















<script>document.write("\x3ca id\x3d\x22arama-kutusu-tus\x22 onclick\x3d\x22document.getElementById(\x26quot;arabunu\x26quot;).submit();\x22 title\x3d\x22arama yap\x22\x3e\x3c/a\x3e");
</script>
bağlantı 1
bağlantı 3
bağlantı 3

yazı



Şimdi yapmanız gerekense yazının en altındaki dosyayı indirerek “resim” klasöründeki resmi sunucunuza yüklemek. Bu resmi sunucunuza yükledikten sonra style.css dosyanızdan aşağıdaki kodu aratın:

(resim/cubuklogo.png)

aşağıdaki şekilde düzenleyin:

(resim-adresi)

En alttaki dosyayı indirdikten sonra dilerseniz index.html’yi çalıştırarak çalışmamızın önizlemesine de bakabilir veya dosyayı notepad++ veya notepad ile açarak kaynak kodlarını inceleyebilirsiniz.


Sorulabilecek sorulara önceden cevaplar:

- Arama formunu nasıl ayarlarım?

Otomatik olarak ayarlanmıştır. Hiçbir değişiklik yapmanıza gerek yok.

- Kodları eksiksiz ekledim fakat çubuk genişliğe tam oturmuyor. Üstte ve yanda çok az boşluklar var. Nasıl düzeltilir?

header.php‘den dosyasındaki etiketini (eğer varsa diğer diğer kodları silmeden) aşağıdaki şekilde düzenleyin:



- Çubuğu nasıl sabit hale getiririm? (Kaydırma çubuğuyla birlikte kayması için)

style.css dosyasından #ustcubuk adlı css koduna position:fixed; kodunu ekleyin.

- Transparanlığı nasıl kaldırırım?

style.css dosyasından opacity:0.8; filter:alpha(opacity=80); yandaki kodları aratıp silin.

- Çubuğun rengini nasıl değiştiririm?

style.css dosyasından background-color:#ddd; bölümündeki “#ddd” renk değerini değiştirin.

Ayrıca önizleme için okuduğum kitapların özetini yazdığım bloguma da buraya tıklayarak bakabilirsiniz :)

Dosya: Dosyayı İndir

Şifre: http://www.sorbize.com

Not: Kodlar, Blogger’ın “Navbar” adlı bölümü düzenlenip WordPress’e uyarlanarak bu hale getirilmiştir.


Kaynak: Sorbize.com