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

Tarih: 10 Mayıs 2011   Yazar: Aycan Doğanlar  |  1.821 kez okundu
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.


    Bu yazı için 11 yorum yapılmış.
  1. Burak Dülgar dedi ki:

    Güzel bir anlatım olmuş Aycan, eline sağlık :)

  2. Tufan Tunç dedi ki:

    Basitçe uygulanabilir güzel bir anlatım olmuş, teşekkürler.
    Düzenlemesi biraz php bilgisi gerektirse de aynı görev için WordPress’in admin bar özelliği de kullanılabilir.

  3. nedir dedi ki:

    Anlatım güzel olmuş ancak bu uygulamalar siteyi bozuyor sanki. Görünüş olarak.

  4. Çağın Ocak dedi ki:

    Teşekkür ederim ilginiz ve paylaşımınız için. :)

  5. AlpEreN dedi ki:

    Keşke ekran görüntüsü de olsa daha güzel olurmuş. ama yine de emeğinize sağlık…

    saygılarımla…

  6. Teknoloji dedi ki:

    Saoğol sorbize ellerinize sağlık

  7. Fatih Tural dedi ki:

    Çok güzel anlatım olmuş.Teşekkürler.

  8. Görkem KARA dedi ki:

    Güzel anlatmışsın, teşekkürler..

  9. oyun dedi ki:

    güzel anlatım. ellerinize sağlık

  10. Wpfrm dedi ki:

    Bunu vBulletine göre uyarlamaya çalışacağım teşekkürler.

  11. Mix Dinle dedi ki:

    Güzel anlatımınız için teşekkür ederim. ellerinize sağlık.


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.