Kategori: Çalışmalarım

  • Yeni Tema, Yeni Rota!

    Yeni Tema, Yeni Rota!

    Facebook üzerinden beni takip edenler bilirler ki son birkaç gündür bir tema üzerinde çalışıyordum. Sorunda temayı bitirdim sayılır ve blog da temayı aktif ettim. Henüz tema tam anlamıyla bitmese bile, şuan ki halinin de güzel olduğunu düşünüyorum. Bisperso temasına gelen "çok renkli, gözü yoruyor" gibi yorumlardan sonra bende yalnızca kendim kullanmak üzere bu temayı oluşturdum. Şimdilik dağıtma veya satma gibi bir niyetim yok ancak yarın ne olur kimse bilemez, kafama eserse bir an temayı dağıtabilirim bile.

    Temayı geliştirirken büyük bir boşluk hissediyordum temada, Bisperso temasında kullandığım üst bar artık gözüme çok küçük gelmeye başlamıştı ve bu kadar büyük bir tema da o barı kullanamazdım artık. Yerine ne yapsam diye düşündüğüm sıralar da Webeyn'in yeni tasarıma geçtiğini gördüm. Siteye girip bakınca gözüme hemen üst bar takıldı. O zaman anladım temada ki boşluğu o tarz bir bar doldurabilirdi. Bende orada gördüğüm barı kendime göre şekillendirerek ve sıfırdan kodlayarak kendi temama ekledim.

    İndex kısmına gelince bu sefer değişik bir şey olsun istedim. Sonuçta her ne kadar kişisel yazılar yazmasam da kişisel blog olarak hizmet veriyorum. Haliyle bir kişisel blogun anasayfasında yalnızca yazdığı blog yazılarını yayınlaması bence pek doğru bir durum değil. Bu yüzden bende anasayfaya okuduğum kitaplar, izlediğim filmler ve resimlerim bölümlerini ekledim. Müzik dinlemeyi sevmediğimden, son dinlediklerim tarzı bir bölüme gerek duymadım. Şuan da son izlediklerimle, resimlerim kategorilerinin yazılarını eklemiş durumdayım. Okuduğum kitaplar kısmının içeriklerini ise en kısa sürede ekleyeceğim.

    Sidebarı ise oldukça sade tutmaya karar verdim. Aslında bir ara sidebarı kaldırmayı bile düşündüm ancak ekran çok geniş kalacağı için bundan vazgeçtim. Şimdilik böyle gidecek, belki gelecek aylar da sidebarı da kaldırabilirim.

    Footer'ı ise aslında ilk başlarda farklı tasarlamıştım ancak bir arkadaşımdan gelen yorum üzerine footerı Bisportal temasında ki footera benzettim. Bu haliyle, ilkinden daha güzel duruyor.

    İçerik sayfasına gelince çoğu kişi yazıların küçüklüğünden ve yazı renginin açık renkli olmasından şikayet ederdi. Bende bu tema da hem yazı boyutlarını arttırdım, hem de yazı rengini daha koyu bir hale getirdim. İçerik sayfası genel yapı olarak Bisperso temasında ki ile aynı diyebilirim. Üstünde sadece ufak tefek oynamalar yaptım. Mesela sosyal paylaşım bölümünde eskiden kendi koyduğum butonlar bulunurdu, şimdi ise doğrudan sosyal ağ sitelerinin kendi butonları yer alıyor. Böylesinin gelişen SEO dünyası açısından daha yararlı olduğuna inanıyorum. Diğer bir değişiklik olarak içerik sayfasından yazar hakkında kısmını kaldırdım, zaten üstte ki barda kocaman hakkımda linki var,beni merak edenler hakkımda yazısına o linkten bakabilirler.

    Temayı SEO açısından oldukça gelişmiş tutmaya çalıştım. Hız konusunda da yine çok hızlı bir tema ortaya çıktı. Tema önceki kullandığım Bisperso temasından yaklaşık olarak 16% daha hızlı, tabi bu oran anasayfa için geçerli. İçerik sayfalarında ise tema daha hızlı. Kodlama da ise bu sefer HTML5 etiketlerine ağırlık verdim. Rakip bloglarımda HTML5 kodları kullanılmadığından, bu temanın beni bir adım daha öteye götüreceğini düşünüyorum.

    Genel olarak arkadaşlar bu tema ile beraber içeriği daha çok ön plana çıkartmaya çalıştım. Görselliğe fazla önem vermedim ama temanın yine de güzel bir görünüme sahip olduğunu düşünüyorum. Bundan sonra genel olarak paylaşımlara ağırlık vereceğim ve artık forumlar da fazla takılmayacağım.

    Beni takip eden arkadaşlardan ricam yanda ki alanda bulunan Sosyal Hesaplar bileşeninden sosyal medya hesaplarımı takibe alırsanız sevinirim. Bu sayede blog da yeni bir yazı yayınladığım da ilk sizin haberiniz olur.

    Tema ilk başta gözünüze basit bir tema gibi gelebilir ancak içerisinde kendine özel bir çok sayfa şablonu ve özel fonksiyonlar barındırıyor. Mesela bu temamla beraber artık portfolyo.burakisci.com adresini kapatıp, referansım olan çalışmaları bu tema üzerinde bir şablonda listeleyeceğim. Portfolyom sayfasından bu şablonu görebilirsiniz, biraz değişik bir tasarım yapmaya çalıştım bu kısımda.

    Diğer bir ekleme olarak da bloga resimlerimi sergileyebileceğim bir şablon eklemem gerekiyordu. Yapımı için biraz kaynak araştırmak istedim ancak ne yazık ki herkes resim galerileri için eklenti kullanıyor, bildiğiniz gibi ben böyle şeyler için eklenti kullanımına karşıyım. Bu yüzden doğaçlama olarak bir şablon kodlamaya başladım ve ortaya güzel bir çalışma çıktığını düşünüyorum. Örnek bir resim sayfasına buradan ulaşabilirsiniz.

    Daha tema da bunlar gibi birçok farklı şablon bulunmaktadır. Yazının başında da belirttiğim gibi tema daha bitmediğinden bazı şablonları halen kullanıma hazır hale getiremedim ancak en kısa sürede onları da kullanıma hazır bir hale getireceğim.

    Şimdi arkadaşlar tema hakkında ki yorumlarınızı almak istiyorum. Gördüğünüz hataları veya şurası şöyle olsa daha iyi olurmuş dediğiniz kısımları yorum olarak belirtirseniz sevinirim.

    Diğer bir yandan arkadaşlar bundan sonra blogum da hangi konularda ki paylaşımlara ağırlık vermemi isterseniz? Bu soruya da bir cevap verirseniz sevinirim. Gelecek cevaplara göre gelecek bir ay içerisinde yayınlayacağım makaleleri yazmaya başlayacağım.

    Bu arada temanın adı Bislog.

    Not: Bu yazıyı saatler süren bir uykusuzluğun sonunda sahura doğru yazıyorum. Fazla anlam hataları olmuş olabilir, şimdiden özür dilerim.

  • Burakisci V4 kurulum, kullanım, önerilen ayarlar ve düzenlemeler

    Burakisci V4 kurulum, kullanım, önerilen ayarlar ve düzenlemeler

    Merhaba arkadaşlar bildiğiniz gibi Burakisci V4 temasını paylaşımınıza sundum fakat önceki temalarımda yaşadığım bazı sorunları yaşamamak adına sizlere ayrıntılı bir rehber hazırlamaya karar verdim. Öncelikle arkadaşlar bu yazıda anlatacağım faktörlerden sizlere bahsedeyim. İlk olarak arkadaşlar temanın kurulumu hakkında bir videoyu sizlerle paylaşacağım. Bu video da temanın hem WordPress hem de FTP üzerinden kurulumunu sizlere anlatacağım. İkinci olarak ise tema panelinde ki ayarların yapılması, bileşenlerin kullanımı hakkında ayrıntılı bir videoyu sizlerle paylaşacağım. Üçüncü olarak ise arkadaşlar temanın özelliklerinden en üst seviyede yararlanabilmeniz için önerdiğim ayarları sizlerle paylaşacağım. Son olarak da temada yapabileceğiniz düzenlemeler, bu düzenlemeleri nasıl yapacağınız hakkında sizlere bir makale sunacağım.

    1. Temanın Kurulumu

    2. Temanın Kullanımı

    Hazırlanıyor.

    3. Temanın Önerilen Ayarları

    • Logo boyutlarınız 320×80 boyutlarında olmalıdır.
    • Öne çıkarılmış görselleriniz 125×125 boyutunda olmalıdır.
    • Tema da okunma sayılarını gösterebilmek için "WP-PostViews" eklentisini kurmanız gerekiyor.
    • WP-PostViews eklentisini kurduktan sonra eklenti ayarları bölümünden "Views Template" değerini "%VIEW_COUNT%" olarak değiştirin ve kaydedin.
    • Daha önceden "WP-Pagenavi" eklentisini kullanıyorsanız , temanın verimli çalışması adına bu eklentiyi kapatmanız gerekmektedir.
    • Öne çıkarılmış görsel eklemeden önce resimleri optimize etmenizi, yüksek hızı yakalayabilmeniz açısından öneririm.

    4. Temada Düzenleme Yapabilmek

    • Arkadaşlar özellikle de düzenleme kısmında renkleri değiştirme konusuna değinmek istiyorum. Bildiğiniz gibi temada yeşil ve mavi renkleri ağırlıklı kullandım ancak herkesten bu renkleri sevmesini bekleyemem bu yüzden temayı istediğiniz renge nasıl kavuşturabileceğinizi anlatacağım. Öncelikle style.css dosyasını açmalısınız.

    Şimdi sizlerle temada kullandığım renk tonlarını paylaşıyorum.

    #e96739, #cf4e20 = Logonun arkaplanında kullanılan turuncu kısmı oluşturan renklerdir. İlk kod üst kısımda ki, ikinci kod ise alt kısımda ki rengi temsil eder.
    #33ccff, #4cb4c7 = Metro menüde ki mavi kutucukların renk kodlarıdır.
    #ccff33, #add82e = Metro menüde ki yeşil kutucukların renk kodlarıdır.
    #add82e = Temada kullanılan yeşil renk kodudur.
    #52c0d4 = Temada üstte ki metro menü haricinde kullanılan tüm mavi renklerin kodudur.

    Bu renk kodlarını Dreamweaver veya Notepad ++ gibi yardımcı programlar sayesinde istediğiniz renk ile tek tuş ile değiştirebilirsiniz.

    Notepad ++ İle Renk Değiştirme

    Öncelikle arkadaşlar bu program ile CSS dosyamızı açıyoruz ve daha sonra CTRL+F yapıyoruz. Açılan pencerede üstte bulunan sekmeden "değiştir" sekmesine tıklıyoruz. Açılan yeni pencerede karşımıza iki tane kutucuk çıkacaktır. Öncelikle ilk kutucuğa değiştirmek istediğimiz renk kodunu yazıyoruz, ikinci kutucuğa ise değiştirmek istediğimiz rengin yerine gelmesini istediğimiz rengin renk kodunu yazıyoruz ve daha sonra tümünü değiştir tuşuna basıyoruz.

    renknotepad

    Dreamweaver İle Renk Değiştirme

    Yine aynı şekilde CSS dosyamızı programda açtıktan sonra CTRL+F yapıyoruz. Açılan pencerede ilk kutucuğa değiştirmek istediğimiz renk kodunu giriş yapıyoruz daha sonra ikinci kutucuğa ise bu renk ile değiştirmek istediğimiz rengin kodunu giriyoruz, ardından sağ tarafta bulunan "tümünü değiştir" butonuna tıklıyoruz.

    renkdreamweaver

  • Burakisci V4 Çalışmam, Yorumlarınızı Bekliyorum!

    Burakisci V4 Çalışmam, Yorumlarınızı Bekliyorum!

    Merhaba arkadaşlar Facebook üzerinden beni ekleyen arkadaşlar bilirler ki birkaç gün önce Burakisci V4 çizimine başlamıştım. Artık temanın HTML&CSS kodlamasının sonuna geldim sayılır sadece aklımda birkaç tane daha yapılması gereken eklemeler var onları düşünüyorum ancak temanın genel şablonu bu şekilde olacaktır.

    Aşağıya hem index hemde içerik sayfasının resimlerini koyuyorum arkadaşlar, yapmak istediğiniz öneriler, eksik gördüğünüz kısımlar ya da şunu da eklesen güzel olur dediğin bir özellikleri yorum olarak belirtirseniz sevinirim. Temayı ücretsiz dağıtacağım için sizlerinde yorumlarına göre temaya son şeklini vermek istiyorum. Son olarak sidebara bir metro menü eklemeye karar verdim.

    Resimlerin üzerine tıklayarak boyutlarını arttırabilirsiniz.

    burakisciv4-indexburakisciv4-icerik

    Temayı paylaşıma sundum arkadaşlar aşağıda ki linkten temaya ulaşabilirsiniz.

    Burakisci V4 SEO Uyumlu Kişisel WordPress Teması

  • Bisperso Teması İle Karşınızdayım

    Bisperso Teması İle Karşınızdayım

    Merhaba arkadaşlar uzun zamandır kafamda tasarladığım, geçtiğimiz hafta içerisinde de boşluk bulmamdan faydalanarak yapımına başladığım ve bugün entegresine başlayıp, bitirdiğim bisperso temamı sizlerin yorumlarına sunuyorum.

    Şuan da bir çok temama ek olarak bir çok özelliği ilk defa bu temam da kullanmaya başladım. Öncelikle temada ki genişlikleri yüzde şeklinde kodladım. Bu sayede tema sabit bir genişlikte olmayıp, her çözünürlükte ki monitöre tam oturmaktadır. Daha önce ki temalarda ise genişlik 960px gibi sabir bir değer olduğundan çok geniş monitörlerde tema monitörün sadece ortasına oturduğundan sitenin imajını bozmaktaydı.

    Diğer getirdiğim bir yenilik ise temayı responsive tasarladım. Yani bu ne demek oluyor derseniz, temanın responsive olması temanın telefonlar, tabletler dahil olmak üzere tüm ekran çözünürlükleriyle uyumlu olmasıdır. Genişliği 960px ve altı çözünürlüklerde tema mobil bir hale gelerek, telefon ve tabletlerin ekranına tam oturmaktadır. Mobil çözünürlükler için iki ayrı görünüm geliştirdim. Bunlardan biri tabletler, diğeri de telefonlar için. Tabi tema mobil hale geldiğinde normal görünümde ki bazı yerler çıkarılıyor ve temada ki tüm genişlikler değişiyor. Bu da size mobil ortamda temayı çok rahat kullanmanızı sağlıyor.

    Diğer bir yandan içerik sayfalarında yazı boyutunu ve satırlar arasında ki boşlukları fazla tutmaya çalıştım, bu sayede yazılar çok daha okunaklı hale geldi. Önceki temalarımda bu konu da eleştiriler gelmesi üzerine böyle bir yol izledim.

    Gördüğünüz gibi tema da beş farklı renk kullandım, bu renkler ne alaka derseniz geçtiğimiz hafta okulumuzda TUBİTAK bilim fuarı vardı benimde fuarda iki projem vardı. Almanca projem için hazırladığım bir afiş oldukça hoşuma gitti, hazır aklımda bir tema da varken bu afişte ki renkleri tema da kullanmaya karar verdim. İsteyenler olursa hazırladığım eğitim setinin bir önizlemesini yollayabilirim.

    Tema da elimden geldiğince bazı kısımlarda jquery kodları kullanmaya çalıştım. Özellikle headerın altında bulunan 5 tane kutucuk da olabildiğince jquery kullanmaya çalıştım. Aynı şekilde index kısmında da jqueryden fazlasıyla faydalandım.

    Özellikle de baharat v1 temamı kullanmaktan vazgeçtiğimden bu yana hep kullanmak istediğim ancak yaptığım diğer temalara uyduramadığım kayan barı da bu tema da tekrar kullanma fırsatı buldum. Bulunduğu kısma çok iyi oturduğunu düşünüyorum.

    Temaya özel birkaç bileşen tasarladım, bileşenlerde ki başlıkların üstüne geldiğinizde onlar da ki jquery efeklerini de görebilirsiniz. Footerı da her zamanki gibi bileşen uyumlu tasarladım. İçerik ve index sayfalarını da olabildiğince renkli tutmaya çalıştım.

    Şuan da hala temada ki bazı eksiklikleri ve kod hatalarını gidermeye çalışıyorum. Sizlerin önerileri her zamanki gibi benim için önemli. Sizlerden gelen yorumları da dikkate alarak bazı düzenlemeleri yapacağım. Henüz logolar hazır değil, bu yüzden geçici logolar koydum. Daha sonra vereceğim karara göre ya temayı ücretsiz dağıtacağım ya da satışa çıkaracağım. Bu arada tema da gördüğünüz hataları, ekran çözünürlüğünüzü  de yazarak belirtirseniz sevinirim. Elimden geldiğince çabuk hataları düzeltmeye çalışacağım.