Google Font Dizini

Google sağladığı API desteği ile birçok programcının ve tasarımcının gönlünün sultanı olmayı başarıyor. Gerekli birçok aracı bünyesinde bulundurması, programcılara kolaylık sağlaması bu durumu daha uzun süre düşürmeyecek gibi de duruyor. Webfonts adındaki yeni hizmeti ile sayfalarımızda kullandığımız farklı yazı karakterlerini direkt Google içinden almamız mümkün oluyor.

Anasayfada yer alan yazı karakterlerinden birini seçince yukarıdaki sayfaya yönlendiriliyoruz. Burada yazı karakteri tasarımcısının bilgileri, boyutu, karakter setini, örnek yazı gibi birçok bilgiyi kanlı canlı görebiliyoruz. Get the code sekmesinde ise aşağıda detayını göreceğimiz seçenekler bizi karşılıyor.

Buradaki kodlar sayfamıza beğendiğimiz yazı karakterini dahil etmek için bağlantı ve CSS kodudur. İlk kod sayfamıza yazı karakterini çağırmak içindir. İkinci kod ise CSS dosyamızda kullanım örneğini göstermektedir. Ayrıca font variants özelliği ile italik kalın, çizgili gibi biçimleri de kullanabiliyoruz.

Aynı jQuery alt yapısı gibi kodlayanların işini bir hayli kolaylaştıracak bir hizmet Google’a yakışır elbette.

WordPress: Çöp Kutusunu Otomatik Boşaltma

WordPress 2.9 sürümüyle bir çok yenilik geldi. Bunlardan bir tanesi de “çöp kutusu” idi. Çöp kutusu, sildiğimiz yorumları toplayan aynı işletim sistemimizdeki geri dönüşüm kutusu gibi daha sonra istediğimiz yorumu geri döndürmek için kullanılıyor. Bunun bazı avantajları olabilir. Ancak sildiğimiz tüm yorumlar bu çöp kutusunda toplanacağı için zamanla çöplük haline geliyor. İnanılmaz sayılarla karşılaşabiliyoruz. Bu kutuyu zaman zaman elle boşaltmak gerekiyor. Yok eğer boşaltmazsak yönetici paneli başta olmak üzere sistemde yavaşlama olabiliyor.

Tüm bu sorunlara kısa bir işlem ile müdahale edip çöp kutusunu kendi belirleyeceğimiz periyotlara göre otomatik olarak sildirebileceğiz. Bunun için Worpress’in bulunduğu dizinde yer alan wp-config.php dosyasını açıp aşağıdaki kodu ekliyoruz.

define('EMPTY_TRASH_DAYS', 10 );

Kod parçasında yer alan gün sayısını kendi isteğimize göre değiştirebiliriz. Hepsi bu kadar. Artık sistem kendisi belirttiğimiz süre zarfında çöpü kendisi boşaltacak. Ayrıca bu ipucunun orjinal hali burada yer almaktadır.

CSS:Açıklamalı Yatay Menü Yapımı

CSS artık derya deniz oldu. Herşey olmasa da birçok şeyin yapılması şekillendirilmesi CSS 3 ile birlikte ortaya çıktı. Bunlar bir yana dururken CSS ile yapılan çok güzel menülerde gözümüzü doldurmayı başardı. Bu tür menülerden bir tanesi de açıklamalı olanlarıdır. Açıklamalı menü dediğim şey özellikle navigasyon menülerde karşımıza çıkıyor. Büyük puntolarla yazılmış link (örneğin anasayfa) hemen linkin altında da küçük puntolarla yazılmış açıklaması (örneğin blog) bulunuyor. Bu tür menüleri CSS ile yapmak mümkün.

Anlatmaya geçmeden önce açıklamalı menümüzün yapılmış halini şöyle bir görelim:

Önce CSS düzenleyici programımızda menümüzü şekillendirelim. Class seçici yerine id seçici kullanacağız. Bunun için ilk adım olarak ul olarak kullanacağımız nav’ı biçimlendireceğiz.

#nav{
	list-style-type:none;
	background:#000;
	margin:0;
	padding:0;
	border-bottom:3px solid #999; }

İlk satırdaki biçimlendirme ile listede herhangi bir işaret kullanmadık daha sonrasında da arkaplanı renklendirdik. Margin ve padding değerlerini de bazı tarayıcıların otomatik değer atamasından dolayı sıfırladık. Son olarak işin biraz artistliğine kaçıp listemizin dip kısmına 3 pixel kalınlıkta düz bir çizgi atadık.

Şimdi de li etiketini biçimlendireceğiz. Aşağıdaki kodu takip edelim

#nav li{
	float:left;
	margin-left:5px;}

Normalde listelerin yatay olması için display:inline özelliğini kullanırdık. Fakat burada inline kullandığımız zaman menü yatay değil dikey oluşuyor. Çünkü span etiketi biraz işi bozuyor. Bunun için float uyguladık. Margin değeri de butonlar arası boşluğu ifade ediyor ki istediğimiz değeri atayabiliriz. Şimdi de li etiketinin link durumuna şekil vereceğiz.

#nav li a{
	text-decoration:none;
	color:#FFF;
	font-size:24px;
	font-family:Verdana, Geneva, sans-serif;
	border-left:2px dashed #FFF;}
 
#nav li a:hover{
	color:#F00;
	border-color:#F00}

Beyaz renkli linklerimize kenar çerçeve atadık ve üzerine gelince kırmızıya dönecek.

Şimdi de açıklama için span ayarlaması yapacağız.

.bilgi{
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FF0;
	display:block;
	padding-left:5px;}

Sarı renkte ve 12 pixel büyüklükte olacak açıklama yazılarımız. Padding değeri üst link ile aynı hizada olmasını sağladı. Ayrıca display:block kullanma nedenimiz de span’ın yeni satırdan başlamasını sağlamak.

Şimdi bu yazdıklarımızı html sayfamızda bir deneyelim.

<ul id="nav">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Kaydettiğimiz zaman arkaplanın siyah olmadığını daha doğrusu arkağlanın görünmediğini fark edebiliriz. Yani bu haliyle bozuk bir görüntü meydana geliyor. Bunun sebebi de float kullandıktan sonra ul’nin kapsama sorununa maruz kalması oldu. Bunun için clear kullanmamız gerekiyor.

Ancak bildiğimiz clear yönteminden farklı olarak after özelliğini kullanacağız. Üstelik bunu ul etiketine uygulayacağız. Önce aşağıdaki kodları css dosyamıza ilave edelim.

.duzelt:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
* html .duzelt { height: 1px; } /* IE6 */
*:first-child+html .duzelt { min-height: 0; } /* IE7 */

Şimdi de html begemiz içerisindeki ul etiketine class uygulayacağız.

<ul id="nav" class="duzelt">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Gördüğümüz gibi artık düzgün bir şekilde çalışıyor menümüz. Açık söylemeliyim ki bu menünün yapımını ben de çok merek ediyordum ve dünden bu yana makaleyi yazmaya karar verdikten sonra araştırdım. Sevgili Fatih Hayrioğlu’na ve Bilal Çınarlı’ya da katkılarından dolayı teşekkür ederim.

Menü önizleme için buraya kaynak kodları indirmek için de buradan buyrun.