Daniel’ın blogunu buradan görebilirsiniz, ve kendi feed’inizin nasıl göründüğünü merak ediyorsanız:

http://www.minimali.se/ ‘den sonra profil ID’nizi yazın.

Mesela benimkisi: http://www.minimali.se/114825361896934861723/

Kaynaklar: CenterNetworks, Daniel Treadwell.

Burada neler yapabilirim?

Bir kod paylaşabilir, kodu kategorize edebilir, etiket ekleyebilirsiniz. Eğer hesabınızı upgrade ederseniz de kodunuzu gizli (private) yapabilirsiniz. Aynı zamanda favori geliştiricilerinizi takip edebilirsiniz. Ve ana sayfanızda yaptıkları son güncellemeleri görebilirsiniz. Yapılan paylaşımları yorumlayabilir ve beğenebilirsiniz.

Aynı zamanda kod paylaşmanın yanı sıra, kodunuzda bir problem varsa, soru olarak paylaşabilir ve diğer geliştiricilerden cevap alabilirsiniz.

Hesabımı upgrade edince yalnızca gizli paylaşımlar mı yapabilirim?

Şimdilik evet, ancak ilerde eklenecek bazı yeni özellikler şöyle:

• Private chat system (özel chat sistemi)
• Live Demo area (canlı demo alanı)
• Share private codesnipp.its (gizli codesnipp.its’lerinizi paylaşabilme)

Bu yeni özellikler de gelince oldukça güzel bir şey olacağa benziyor.

Arayüz hakkında:

Bu servise giriş yaptığınızda ilk göze çarpan ve benim hoşuma giden şeyler, kategori ve etiket sistemi. Kesinlikle bu tür bir serviste en önemli şeyler bunlar. Ayrıca tasarımın sadeliği, hiçbir yerde reklam olmaması ve her şeyin alaşılabilir olması, buna benzer diğer servislerden bir farkı da bu.

Son olarak…

Son olarak, codesnipp.it bence oldukça güzel bir servis, upgrade ücreti yıllık 10 dolar, şimdilik gerekli olmayabilir, ama bahsedilen yeni özellikler geldiğinde  belki.

Güncelleme: Ek olarak bu servisin aynı zamanda bir API’a sahip olduğunu da söyleyeyim.

Ben de henüz alpha sürümünde olan jsFiddle’ı blogum için kullanmaya başladım. Önceden, yazmış olduğum bazı yazılar için demo sayfaları hazırlıyordum, jsFiddle ile ise bunu yapmama gerek kalmıyor. Gerekli kodları jsFiddle’a ekliyor, ve embed koduyla bloguma ekliyorum. Böylece ayrı bir demo sayfası hazırlamama gerek kalmıyor. İşte birkaç örnek yazı:

• CSS3 ve jQuery ile Şık Tab Menü Yapımı
• jQuery ScrollTo Posts Eklentisi
• jQuery ile İletişim Formunuza Esneklik Katın

Peki bu anlattıklarımın Feykin ile ne ilgilisi var? Nedir bu Feykin? Açıklayayım hemen:

Feykin, FriendFeed’in Türkiye’deki popülerliğinden yola çıkarak hazırlanmış (daha doğrusu hâlâ hazırlanan) bir sosyal ağ. Henüz geliştirilmesi devam ediyor. Aynı zamanda bu uygulama açık kaynak hazırlanıyor ve herkesten gelen yardımları kabul ediyor. Eğer siz de bu girişime katkıda bulunmak istiyorsanız Feykin sizleri bekliyor.

Website veya Blog oluşturmak için öncelikle bir Hosting (*) ve Domain (Alan adı) sahibi olmanız gerekir. Ben her ne kadar kullanmıyor olsam da domaini almak için GoDaddy firmasını kullanmanızı tavsiye ederim. 45 milyon domain barındıran GoDaddy dünyanın en fazla tercih edilen domain firmasıdır. Domaini nasıl alacağınızı hemen şurdaki GoDaddy’den Domain Almak başlıklı yazıdan öğrenebilirsiniz. Domaininizi alırken GoDaddy Promo Code (GoDaddy Promosyon Kodu) kullanmayı unutmamanızı tavsiye ederim. Godaddy Promo Code sayesinde domaininizi veya hostinginizi daha ucuza alabilirsiniz.

Hosting alırken ise birçok kişi tarafından en fazla tercih edilen yabancı firma olan Hostgator firmasını öneririm. Hostgator için de en iyi Türkçe online destek servisi olan hostgatorturkey.com’u mutlaka ziyaret etmenizi tavsiye ederim. Ve nasıl host alacağınızı da Hostgator’dan Hosting Satın Almak başlıklı yazıdan öğrenebilirsiniz.

Şimdi sıra geldi blog açacaklar için ipuçları vermeye;

Öncelikle kendinize bir CMS (içerik yönetim sistemi) seçmeniz gerekli. Dünyada en yaygın olarak kullanılan ve döküman desteği bakımından en zengin olan içerik yönetim sistemi WordPress’i tercih etmenizi öneririm. Ama tabii ki Drupal ve Joomla gibi sistemleri de deneyebilirsiniz. Bu sistemler ile ilgili (kurulum v.b.) tüm dökümanları resmi web sitelerinde bulabilir ve kolayca kendi blogunuza uygulayabilirsiniz.

Örneklendirmenin zor olmaması için kendi tab menümün kodlarını birebir sizlere vereceğim.

Öncelikle aşağıdaki kodları Sidebar.php dosyamıza (veya tab menünün görünmesini istediğiniz yere) yerleştiriyoruz.

<!-- tab menu starts -->
<ul class="tabNav">
	<li class="current"><a href="#">Kategoriler</a></li>
	<li><a href="#">Popüler Yazılar</a></li>
	<li><a href="#">Son Yorumlar</a></li>
</ul>
<div class="tabContainer">
 
    <!-- 1st tab -->
<div class="tab current">
<ul>
Kategoriler sekmesi...</ul>
</div>
<!-- 2nd tab -->
<div class="tab">
<ul>
Popüler Yazılar Sekmesi...</ul>
</div>
<!-- 3rd tab -->
<div class="tab">
<ul>
Son Yorumlar sekmesi...</ul>
</div>
</div>
<!-- tab menu ends -->

Sonrasında da tab menüye şekil vermek için CSS dosyamıza birkaç ekleme yapıyoruz.

ul.tabNav {float:left;list-style:none;width: 100%;}
ul.tabNav li {float:left;margin: 0 4px 0 0;padding: 4px 0 0;}
ul.tabNav li.current {padding-top:0;}
ul.tabNav a {background:#EEE;border:2px solid #CCC; border-width: 1px 1px 0; color:#333;display: block;padding: 4px 4px 5px 4px;text-decoration: none;}
ul.tabNav li.current a {background:#EEE; border-top: 2px solid #CCC;border-right: 2px solid #CCC;border-left: 2px solid #CCC;padding: 6px;}
div.tabContainer {clear:both;float:left;width:100%;}
div.tabContainer div.tab {background:#FFF;border:2px solid #CCC;color:#000;display:none;padding:10px;}
ul.tabNav a:hover {text-decoration:none;background:#F5F5F5;}
div.tabContainer div.current {display:block;background:#FFF;}
div.tab p:last-child {margin-bottom:0;}
div.tabContainer ul li {background:#FFF;padding:0px;margin-left:15px;margin-bottom:1px;list-style-type:square;list-style-image:url(img/li.png);list-style-position:outside;}

Ve son olarak da buradan indireceğiniz dosyadaki jquery.js ve tabs.js dosyalarını ana dizine atıyoruz. Ve header.php’ye aşağıdaki gibi iki kod ekliyoruz.

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="tabs.js" type="text/javascript"><!--mce:1--></script>

İşte bu kadar basit. Ama son bir hatırlatma da yapayım, CSS kodları kendi tasarımıma göre kodlanmış olduğundan sizin tasarımınıza tam olarak oturmayabilir. Tabii ki isteğinize göre düzenlemekte özgürsünüz. Kolay gelsin.

Öncelikli E-postalar özelliğinde Gmail, geçmişe bakarak, hangi tür e-postaları daha çok okudunuz, hangilerine yanıt verdiniz, kısacası hangi e-postalar ile daha çok ilgilendiğinize bakarak gelen kutunuzdaki e-postaları düzenleyecek. Böylece öncelikli okunacak olan e-postalarınızı ayırmakta zorlanmayacaksınız.

Gelen e-postalar, önemli ve okunmamış, yıldızlı ve diğer her şey olmak üzere Gmail tarafından bölümlere ayrılacak. Dilerseniz bu bölümleri kendinize göre değiştirebileceksiniz. Ayrıca Gmail’in size gelen e-postaları ayırt etme özelliği gün geçtikçe daha da gelişecek ve böylece zaman geçtikçe en iyi hizmeti alacaksınız.

Son olarak, bu özelliği haftaya kullanabileceğiz. Daha ayrıntılı bilgi almak için Google yardım sayfasına göz atabilirsiniz.

Her neyse, yaklaşık 4 günlük bir çalışmanın ardından temayı bitirebildim. Şu anda da gördüğünüz gibi bir tema oldu. Beğenmeyenler olacak mutlaka. Kendi zevklerime göre tasarlanmış bir tema oldu, tabii ziyaretçilerimi de düşündüm. Çok fazla görselliğe gerek duymadım. Bu ilk versiyonunda olabildiğince sade tasarladım. Yazının devamında da tasarımı oluştururken yararlandığım kaynakları ve tema hakkında biraz bilgi vereceğim.

Temada pek bir özellik yok aslında, yine de kaynak göstermeden edemeyeceğim bazı şeyler var, bu kaynaklardan önce şunu söylemeliyim ki, tasarımı yaparken “Sandbox” adlı WordPress.org’da yer alan altyapı (framework) temasını kullandım. Yani tüm dosyaları tek tek kodlamadım. Ki bence en kolay yöntem de bu zaten. Yararlandığım kaynakları sıralayayım şimdi de:

• Yan taraftaki sekmeli menüyü Trevor Davis’in blogundaki bir yazıdan yararlanarak oluşturdum.
• Ana Sayfada yazıların altında yer alan bilgi bölümünü, eburhan.com’dan esinlenerek oluşturdum.
• Yazı altındaki bilgi bölümünde yer alan ikonları da famfamfam’ın silk icons ikon paketinden aldım.
• Yukarıda da belirttiğim gibi altyapı olarak sandbox adlı temayı kullandım. Bunun gibi birkaç altyapı teması da WordPress’in resmi sitesinde mevcut. Eğer siz de blogunuz için bir tasarım yapmayı düşünüyorsanız diğer altyapı temalarına buradan ulaşabilirsiniz.

Bunların dışında kaynak göstererek yaptığım yer de yok. Zaten genel olarak bakıldığında tasarımda pek fazla özellik bulunmamakta. İlgiyi olabildiğince içeriğe çekebilmek için sadeliğe önem verdim. Tabii zamanla temayı geliştirmeyi düşünüyorum. Ama şimdilik bu kadar yeterli olur sanırım.

Ayrıca Internet Explorer 6 denilen o berbat tarayıcıyı da kınıyoruz. Kendisi için hazırladığım bir uyarı metni var. IE6 ile giriş yaparsanız karşılaşırsınız. Ancak 6 ve sonrasındaki sürümlerde ve ayrıca Opera, Safari ve Google Chrome gibi tarayıcılarda da sorunsuz şekilde çalışıyor.

Bunun dışında da tasarım ile ilgili söyleyebileceğim bir şey yok. Umarım hoşunuza gitmiştir. Bu arada, bir önceki tasarımımı da paylaşacağımı söylemiştim. Ancak onunla hiç ilgilenemedim. En kısa zamanda onu da paylaşacağım sizlerle. Son olarak; Tema hakkındaki yorumlarınızı ve eleştirilerinizi bekliyorum, gerçekten temayı geliştirmek adına benim için çok önemli.

Eklentiyi buradan indiriyoruz. Dosyaları wp-content/plugins klasörüne yolluyor ve eklentiyi aktifleştiriyoruz. Daha sonra da, ister bileşen (widget) olarak yan menüde gösterebilir, isterseniz de yeni bir sayfa şablonu oluşturup aşağıdaki PHP fonksiyonunu oraya yazarak linkleri bir sayfa altında listeleyebilirsiniz. Ve istediğiniz kadarını göstertip, listelemeyi rastgele yapabilirsiniz.

Dipnot: Şu sıralar yazılarımı sürekli kısa tutuyorum ama bu durum pek fazla uzun sürmeyecek, yeni yıl ile beraber içerik trafiğinde önemli değişiklikler yapmayı düşünüyorum. Yeni yıldan sonra daha uzun ve faydalı yazılarla karşılaşabilirsiniz

Evet isterseniz yeni bir özellik olan Post Thumbnail özelliğinin nasıl kullanılacağına bir göz atalım. Madde madde ve mümkün oludğunca anlaşılır bir şekilde yazmaya çalıştım:

1.  Özelliği aktif etmek:

Öncelikle bu özelliği aktif etmek için temanızın functions.php dosyasına aşağıdaki kodu eklememiz gerekiyor.

add_theme_support('post-thumbnails');

2. Yazınıza Post Thumbnail ekleyin:

İlk adımı tamamladıktan sonra, yazı editörünün sağ kısmında “Post Thumbnail” kutucuğu çıkacaktır.

Kutucuğun içindeki Set thumbnail linkine tıklıyoruz. Böylece Medya Kütüphanesinden yazdığınız yazı için thumbnail seçebileceğiz. Ve seçimi yaptıktan sonra veya yeni bir imaj ekledikten sonra Use as thumbnail linkine tıklıyor ve yazınıza bir Thumbnail eklemiş oluyorsunuz.

3. Bu özelliği temanızda gösterin:

Bu özelliği aktif ettik, herhangi bir yazıya ekledik ancak temamızdaki index.php dosyasında bu özelliği bir fonksiyon ile çağırmazsak hiçbir anlamı kalmayacaktır. Bu yüzden hemen aşağıdaki kodu Post Thumbnail’ın görünmesini istediğimiz kısma ekliyoruz:

Ayrıca göstermek istediğiniz boyutu da kendiniz ayarlayabilirsiniz:

Ayrıca CSS ile de Thumbnail’ı düzenleyebilirsiniz:

.wp-post-image {border: 2px solid #CCC;}

Hizalama ayarı yapmak içinse:

 'alignleft' )); ?>

kodundaki alignleft kısmını ayarlayarak yapabilirsiniz…

İşlem bu kadar. Ayrıca birkaç tane daha madde yer alıyordu ancak onların gereksiz olduğunu düşündüm ve yazmadım. Dilerseniz kaynak olarak kullandığım yazıya bakarak onlara da göz atabilirsiniz. Umarım anlaşılır bir şekilde yazabilmişimdir.

Kaynak: Kremalicious

• jQuery Resize Kullanımı
• 5 Basit ve Kullanışlı CSS Özelliği
• 5 Ortak Ajax Problemi ve Çözümleri
• WordPress 2.9 ile Gelen “Post Thumbnail” Özelliğinin Kullanımı
• ‘Wp-content’ Klasörünü Yeniden Adlandırmak
• Basit ve Kullanışlı bir PHP Resim Galerisi
• PHP ile İlgili 15 İpucu
• Serbest ve Profesyonel Tasarımcılar için 50 Kullanışlı Mac Uygulaması
• Temiz ve Sematik Web Şablonları Oluşturmak
• Photoshop ile Zoom Efekti Oluşturmak

• 22 Gelişmiş CSS Yazı Efekti ve Web Tipografi İpuçları
• Basit ve Şık “Image Caption” Alanı Oluşturmak
• 18 CSS Sıkıştırma Aracı ve Tekniği
• HTML ve CSS ile Yazıya Gölge Efekti Vermek
• Web Sitenizde En Son Twitter Güncellemelerinizi Göstermek
• 22 Tane Az Bilinen WordPress Hilesi
• Web Tasarımcıların Mutlaka Görmesi Gereken 30 Generator
• HTML’de Oluşturulmuş Listeleri CSS ile Şekillendirmek
• Tipografiyle Kartvizit Tasarımı Yapmak
• Tasarımcı ve Geliştiricilere Alınabilecek 25 Harika Hediye

Öncelikle yorum aparatını alacağımız servislerden bir tanesi –aralarından en iyisi– olan DISQUS’a üye oluyoruz. Üyelik işlemi çok basit, site URL ve İsmini yazarak formu tamamlıyor ve ikinci aşamaya geçiyoruz. İkinci aşamada bize kullandığımız altyapıyı soruyor, Tumblr’ı seçip ileriki aşamaya geçiyoruz. O aşamada ise size blogunuz için bir kısa isim veriyor, daha sonra o ismi, Tumblr hesabınıza giriş yapıp tema düzenleme kısmından gerekli yere ekliyorsunuz. İşlem bu kadar.

Hız konusunda hiç şüphesiz çok iyi diyebilirim. Yaklaşık üç gündür kullanıyorum, ve OpenDNS hizmetinden daha da iyi. Ancak akıllarda soru işareti de bıraktı Google. Neden? sorusu herkesin aklına ilk olarak kişisel bilgilerimiz geliyor. Ben bu yönden hiç bakmadım olaya, ama sabah Google Reader’da Siberkültür’de gördüğüm yazıyı okuduktan sonra anladım ki Google için kesinlikle ilk olarak hız geliyor.

Öncelikle, Twitter’da Settings bölümüne giriyoruz. More Info URL kısmına yani web sitemizi yazdığımız kısa geliyor ve hemen altında “(You can also add Twitter to your site here)” yazan bölüme tıklıyoruz. Karşımıza Widget seçenekleri çıkıyor, dilerseniz web siteniz haricinde Facebook ve MySpace profilinize de eklemeniz için size seçenekler sunulmuş. Biz ilk sıradaki My Website seçeneğini seçiyor ve açılan menüden Profile Widget’ı seçiyoruz.

Artık son aşamadayız, boş kutucuğa kullanıcı adımızı yazıyor ve Preferences, Appearance ve Dimensions menülerinden de gerekli ayarlamaları yaptıktan sonra Finish & Grab Code butonuna tıklayarak karşımıza çıkan kodu kopyalıyor ve blogumuzda görünmesini istediğimiz yere yapıştırıyoruz.

Sonuç; İşlem tamamlanmılştır. Artık tasarımınıza uygun renkler ve boyutlarda hazırladığınız Twitter aparatınız son güncellemelerinizi gösterecektir.

• CSS İle Seçilen Metnin Artalan Rengini Değiştirmek
• CSS 3 Hakkında Mutlaka Bilmeniz Gereken 7 Şey
• 50+ Yeni CSS Teknikleri, Dersleri ve Kaynakları
• WordPress’de Gravatar Özelleştirmek için 10 Kod Parçası
• Web Formları için 12 Kullanışlı Stil
• WordPress için 20 Kullanışlı İletişim Formu Eklentisi
• CSS3 ve jQuery ile Toolbar Yapmak
• jQuery ve MooTools ile Resim Yansıma Efekti
• Tasarımlarınızda Kullanabileceğiniz 30 Harika Font
• Web Sitenizdeki Resim Galerilerinin Görünümünü Geliştirmek

WPtouch Resmi Eklenti Sayfası, WPtouch WordPress Eklenti Sayfası

• CSS’de Kabarcık Efekti
• HTML5’de Yardımcı Olacak 15 Kullanışlı Kaynak
• jQuery İle Resim Açıklamalarının Gösterimi
• 66 Photoshop Web Tasarım Şablonu Dersi
• Tek Sayfalık Portfolyo Tasarımlarıı İçin 10 İpucu
• Web Tasarımcılar İçin Twitter İkon Setleri
• Etkili Web Formu Oluşturmanın 9 Kuralı
• Web Tasarım ve Geliştiriciler İçin 34 Cheat Sheet
• Tasarımcılar İçin 15 Stok Fotoğraf Kaynağı
• iPhone Geliştiricileri İçin Kaynaklar