• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

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

Konuyu Okuyan Kişiler (0)

Katılım
6 Ağu 2012
Mesajlar
1,672
Beğeniler
0
Konum
Webmaster.TC
#1
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.


1. Adım

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


PHP:
#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;}[CENTER][/CENTER]


2. Adım

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


PHP:
<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>[CENTER][/CENTER]



Ş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:​


1
(resim/cubuklogo.png)


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


1
(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.


--------------------------SSS-------------------------------
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:​
?
1



- Ç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.