WordPress’te Blogger Tarzı Üst Çubuk Yapımı

WordPress’te Blogger Tarzı Üst Çubuk Yapımı

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.
Öncelikle bir önizleme resmi koyalım:

Kodlamaya başlıyoruz :)

1. Adım

Öncelikle style.css dosyanızı açıp aşağıdaki kodları en alta yapıştırın.

#ustcubuk {
z-index:1000;
position:absolute;
width:100%;
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ı <body> etiketinden hemen sonra ekleyin.

<div id="ustcubuk">
<div id="ustcubuk-iap">
<table id="ustcubuk-kontrol" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="24px" valign="middle">
<a id="ustcubuk-logo" title="Anasayfa" tabindex="1" href="<?php bloginfo('url'); ?>"></a></td>
<td width="150px" valign="middle">
<form id="arabunu" style="display: inline;" action="<?php bloginfo('url'); ?><br />" method="get">
<div id="arama-kutusu">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle"><input id="arama" style="width: 120px;" title="Ara" name="s" type="text" tabindex="3" /></td>
<td style="width: 15px;" valign="middle">
<script type="text/javascript"><!--mce:0--></script></td>
</tr>
</tbody>
</table>
</div>
</form></td>
<td valign="middle">
<a class="baglanti" tabindex="1" href="#">bağlantı 1</a>
<a class="baglanti" tabindex="2" href="#">bağlantı 3</a>
<a class="baglanti" tabindex="3" href="#">bağlantı 3</a></td>
<td align="right">
<span id="yazi">
<span>yazı</span>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>

Ş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 <body> 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.

11 Yorum

  1. admin 10 Mayıs 2011
  2. Tufan Tunç 11 Mayıs 2011
  3. nedir 11 Mayıs 2011
  4. Çağın Ocak 11 Mayıs 2011
  5. AlpEreN 13 Mayıs 2011
  6. Teknoloji 19 Mayıs 2011
  7. Fatih Tural 21 Mayıs 2011
  8. Görkem KARA 02 Temmuz 2011
  9. oyun 15 Temmuz 2011
  10. Wpfrm 16 Temmuz 2011
  11. Mix Dinle 02 Ekim 2011

Yorum Yaz