Ceyhun AKSAN : Tamamlanmamış Yazılar » ArÅŸiv » Blog Siteleri İçin Tasarım İpuçları

Kendi web sitemde haz?rlad???m baz? tasar?msal ö?eleri -css ile haz?rlanan- sizlerle payla?mak istedim. Bu ?ekilde dha ho? arayüzler olu?turabilirsiniz. Hem konunun aras?nda en çok yap?lan hatalar? ve bunlara nas?l çözümler üretilebilece?ini de belirteyim. Biraz konu da??n?k olacak ama olsun, sonuçta isteklerinizi uygun bir kaynak olmas?n? istedim.

?lk önce tasar?m ile ilgili bir kaç eski yaz?ya göz atman?z gerekli ki konuda geçecek olan terimleri tam olarak uygulayabilesiniz.

Menüleri Ayr??t?r?n!

Üst Menü

Sitenizte etiketlerden ve di?er site ve sizin hakk?n?da yer alan ba?l?klardan olu?an menüleri dü?ünün. Bunlar? ayn? alan içerisinde özellikle ayn? ?ekillerde kullan?yor olman?z kullan?c?lar?n site içerisinde dola?t?klar? süreler içerisinde kullan??s?z eri?im sa?layacakt?r. Tasar?m gere?i illa ayn? alan içerisinde kullanman?z gerekli ise bunu farkl? renk de?erleri uygulayarak ayr??t?rmal?s?n?z.

yanmenu.gifyanmenu2.gif

Ki?isel/site bilgilerinin kullan?c?n?n sadece istedi?inde farkedebilece?i bir alanda yer almas? kullan??l?l?k aç?s?ndan faydal? olmaktad?r. Ben bu konuda sitenin üst k?sm?n? kullanmay? tercih ettim. Çünkü sayfa ilk aç?ld???nda çok fazla öne ç?kmayan renkler sadece kullan?c?n?n belirli bir süre sonunda farkedebilece?i bir görüntü olu?turuyor. Bu ?ekilde içerikte toplamaya çal??t???m dikkati da??tmam?? oluyorum.

ziyaret.gif

Yeni Yaz?lar

Sitenize ekledi?iniz yaz?lardan görüntü olarak kullan?c?lar?n?z? haberdar etmek istedi?inizde bunu css a:hover ile yapabilece?inizi biliyor muydunuz? Yukar?daki örnekte oldu?u gibi benim bunu nas?l yapt???m? anlatay?m.

a:visited ile linklerin ziyaret edildiklerini kontrol ederek bu i?lemi gerçekle?tirebiliriz.

.post a:visited {
padding: 0;
background: none;
}

.post a:link{
padding-right: 50px;
background: url(./images/yeniyazi.gif) no-repeat top right;
}

CSS kodunuzu ?u ?ekilde yapt???n?zda ziyaret edilmeden önceki sayfalarda ba?l???n sa? taraf?nda yer alacakt?r.

baslik.gif

padding-right: 50px;
Padding yaz? alan?ndan sa? s?n?r çizgisine kadar olan mesafeyi belirleyerek bu alanda haz?rlad???m?z görselin duru?unu belirliyoruz.
background: url(./images/yeniyazi.gif) no-repeat top right;
Background parametreleri ile kullanmak istedi?imiz materyalin (url(./images/yeniyazi.gif)) tekrarlanmadan (no-repeat) sa?-üst alan (top right) hizas?nda yer edinmesini belirtiyoruz.

.post a:visited {
paddin-right: 0;
background: none;
}

Bu bölüm ise normal olarak “yeni” olarak belirtilen ba?l???n ziyaret edildikten sonra nas?l görünece?ini belirtti?imiz yer olarak kullan?lmakta. Ben padding-right de?eri ile önceden 50 px olarak belirtti?im pay?n kald?r?lmas?n? ve bu payda yer alan background materyalimin gösterilmemesini belirtiyorum. Siz istedi?iniz ?ekilde farkl? varyasyonlar haz?rlayabilirsiniz.

Wordpress Uygulamalar?

Wordpress üzerinde haz?rlayaca??n?z de?i?iklikleri teman?z?n size verdikleri ile s?n?rland?rmay?n. Örne?in benim sitemde kulland???m tema Tarski olmas?na ra?men ?u anda eski halinden neredeyse eser yok. Siz de bu tür de?i?iklikleri rahatça yapabilirsiniz.

Wordpress gezinti ve sistem fonksiyonlar? olarak size is_home(), is_single(), is_page(), is_category(), is_author(), is_month(), is_search()… gibi bir çok uygulama seçene?i sunmaktad?r. Bunlar? nas?l kullanaca??n?z? kararla?t?rd???n?zda çok farkl? bir yap? haz?rlayabilirsiniz. Size özellikle kullanma ihtiyaçlar?na göre bunlardan bir kaç?n? örnekleme ile anlatay?m. Çünkü konunun teknik anlat?m?n? Yakuter gayet güzel bir ?ekilde haz?rlam??.

is_home() ile anasayfan?zda i?lemler yapabilirsiniz. Örne?in ben anasayfamda sol kategorileri ve onun alt?nda yer alan son yaz?lar? gösteriyorum. Fakat bir link t?kland???nda bu bölüm de?i?iyor. Bunu da is_single(), is_page(), is_category() fonksiyonlar? ile sa?l?yorum. Burada bilmeniz gereken sadece true/false i?lemlerinin ko?ullu olarak haz?rlanmas?.

Örnek olarak;

if(is_home()){
echo "Anasayfadas?n?z!”;
}
else if(is_single()) {
echo “Normal bir yaz?das?n?z! Örne?in bu yaz? gibi.”;
}
else if(is_page()) {
echo “Bir sayfadas?n?z! Örne?in Hakk?mda gibi”;
}
else{
echo “Nerede oldu?unuzu anlayamad?m!”;
}

untitled-4.gif

RSS yay?n?n?z? FeedBurner tarz? rss servisleri üzerinden da??t?n. Bu bir çok alanda kulland???n?z RSS yay?n?n?z?n ileride yapt???n?z bir sistem de?i?ikli?ine ba?tan düzenlemeler yapman?z? önler hem de RSS sisteminiz bir çok platformda yay?nlanabilir halde sunulur. Eklemeler yap?labilir olmas? da art?lar?ndan bir di?eri.

??imdilik ipuçlar? bu kadar. ?lerleyen zaman içerisinde bu yaz?n?n devam? da gelecektir. Bu arada Mehmet`in form kullan?labilirli?i üzerine haz?rlad??? yaz?y? da okuman?z? öneririm.



1 Yorum, “Blog Siteleri İçin Tasarım İpuçları”

  1. Ceyhun AKSAN : Tamamlanmamış Yazılar » ArÅŸiv » Wordpress İpuçları ve SEO DemiÅŸ ki:
    Haziran 19th, 2008 - 6:15 pm

    [...] gayet geçerli diyelim, ancak şunu unutmamak gerekir ki yazılacak yazıların da tasarıma yük [...]

 
ceyhunaksan.com altında yayınlanan tüm yazılar ve görsellerin kullanımı site dahilinde aksi belirtilmedikçe ceyhun aksan'a aittir ve izinsiz kullanılamaz. Site wordpress alt yapısını kullanmakta ve tasarım olarak colourise'i referans almaktadır.