http://www.bildirgec.org/ tr-tr 40 bildirgec.org - slayerrrr - beğendikleri slayerrrr <p><a href="http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide">Blogdesingblog.com</a> blog tasarlerken dikkat edilmesi gereken noktaları 9 parçaya ayırarak anlatıyor. Bu başlıkların Türkçe karşılıklarından çok genellikle İngilizce adlarına yatkın olunduğu için İngilizce adlarını da beraber vermek bu anlatım için daha yararlı olacaktır.<br>Bu dokuz alt başlık şöyle.</p> <p><strong>Başlık</strong> (Header)<br><strong>İçerik Alanı</strong> (Content Area)<br><strong>Birincil yönlendirici </strong>(primary navigation)<br><strong>İkincil yönlendirici</strong>(secondary navigation)<br><strong>Manşetler</strong> (Headlines)<br><strong>Yorumlar</strong> (Comments)<br><strong>Makale Sonu</strong> (Post’s Footer)<br><strong>Sayfa Altı</strong> (Footer)<br><strong>Reklamlar</strong> (Advertisements)</p> <p><strong>HEADER</strong> - başlık</p> <p>Başlık ziyaretçilerin siteye girişlerinde karşılaştıkları ilk bölge olduğu için sitenin en önemli kısımlarından biridir. blogu diğer bloglardan ayırabilecek ve öne çıkarabilecek bir yapıda olduğu için üzerinde önemle durulması gerekir. Başlık benzersiz ve hatırlaması kolay olmalıdır. Bu yüzden blog tasarımcıları başlık üzerinde son derece titiz çalışırlar, öyle ki sadece hazır bir tasarımı kullanan bloggerlar dahi başlık kısmını kendilerine uyarlamaya çalışırlar. Blog başlığı tasarımını populer kılmak için Vinh Le'nin kaleme aldığı <a href="http://www.blogdesignblog.com/blog-design/5-simple-ways-to-make-your-blog-design-pop/">şu makaleye</a> göz gezdirmekte fayda var.</p> <p><em>not: 2008 yılında yayınlamış bir makale olmasından dolayı verilen örneklerden bazılarında tasarımlar değişmiş. Ancak bu <a href="http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide">makalenin orjinalinin yayınlandığı siteye giderek</a> orada kaydedilmiş olan örnekleri inceleyebilirsiniz.</em></p> <p><strong>Birkaç mükemmel header örneği</strong></p> <p>1.<a href="http://www.octwelve.com/">Octwelve</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/octwelve.jpg' alt="octwelve" border="0"><br>octwelve</div><br>octwelve header da bir çizgi karakterin kullanıldığı iyi bir örnek. <br><!-- buradan kes --><br>2.<a href="http://www.cult-f.net/">Cult-foo</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/cultfoo1.jpg' alt="cult foo" border="0"><br>cult fo</div><br>cult foo header köşelerindeki başarılı tasarımıyla dikkat çekiyor.</p> <p>3.darkmotion<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/darkmotion2.jpg' alt="darkmotion" border="0"><br>darkmotion</div><br>darkmotion'un header tasarımı kullanıca eğlenceli görünüyor ve kullanıcıyı siteye çekiyor.</p> <p><strong>Header nasıl tasarlanmalı?</strong></p> <p>Blog tasarımına öncelikle header'dan başlayın. Photoshop'da tasarımı yapmadan önce header içerisinde vermek istediğiniz mesaj, site ismi ve slogan gibi metinlere önceden karar verin.<br>Header tasarlamanın pek çok yolu olmakla birlikte tasarım yapılırken dikkat edilmesi gereken en önemli noktalardan biri sitenin geri kalanıyla ve konusuyla ilgili olmasıdır. Header siteye ilk kez giren ziyaretçiye bile olabildiğince çabuk bir şekilde sitenin amacını aktarabilmelidir.<br>Yaratıcı olun ve farklı tasarımlar denemekten korkmayın. ilk kez denenmiş benzersiz bir tasarım her zaman ziyaretçiler tarafından hatırlanabilir.</p> <p><strong>Content Area</strong> - içerik alanı</p> <p>Content area içeriği taşıyan bölgedir. Bu sebeple bloğu ziyaret eden kullanıcıların en çok zaman harcayacakları yer de burasıdır. bu bölge ziyaretçilerin dikkatini dağıtacak tüm unsurlardan arındırılmış olmalı, içerisinde barındırdığı metinler son derece okunaklı ve gözü yormayacak olacak şekilde yerleştirilmelidir. Bu yüzden içerik alanında sadelik önemlidir.</p> <p><strong><br>Harika içerik alanlarından örnekler</strong></p> <p>1.<a href="http://www.simplebits.com/">Simplebits</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/simplebits1.jpg' alt="simplebits" border="0"><br>simplebits</div><br>simplebits okuması son derece kolay ve linklerin olduğu bölgeler yeteri kadar belirginleştirilmiş.</p> <p>2.<a href="http://www.welovewp.com/">We love wp</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/welovewp1.jpg' alt="we love wp" border="0"><br>we love wp</div><br>Karanlık temalardaki en büyük sorunlardan biri yazıların okunabilir kılınmasındaki zorluktur. Ancak we love wp bu sorunun üstesinden gelmiş.</p> <p>3.<a href="http://blog.webreakstuff.com/">we break stuff</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/webreakstuff.jpg' alt="we break stuff" border="0"><br>we break stuff</div><br>Renk kombinasyonu başarılı. Linklerin altlarını noktalarla çizme fikri güzel.</p> <p><strong>Başarılı içerik alanı nasıl tasarlanır?</strong></p> <p>Hiyerarşiye dikkat edilmeli. Vurgular başlık, metin ve geri kalan ögelere doğru azalarak inmeli. Örneğin her zaman başlıklar metinden daha vurgulu ifade edilmeli.</p> <p>İçerikler aktarılan konular açısından birbirine yakın olmalı. Okuyucu bir içerikle ilgileniyorsa yakınlarda o konuyla ilgili başka içerikleri de görebilmeli.</p> <p>Linkler yeteri kadar belirgin olmalı ancak okuyucunun dikkatini dağıtmayacak kadar da tasarımla bütünleşmeli.</p> <p><strong>Primary Navigation</strong> - Birincil Yönlendirici</p> <p>Bu yönlendirici ziyaretçileri blogun farklı bölümlerine yönlendirmek için kullanılır. Genellikle header'ın üstünde bulunur. Orada olması gerekmez ancak çoğu ziyaretçi bu yönlendiricinin orada olmasını bekler ve buna ihtiyaç duyar.</p> <p><strong>Mükemmel Primary Navigation örnekleri</strong></p> <p>1.<a href="http://www.alistapart.com/">A list a part</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/alistapart.jpg' alt="a list a part" border="0"><br>a list a part</div><br>a list a part doğru tasarlanmış navigasyon menüsü için oldukça iyi bir aday.</p> <p>2.<a href="http://www.mindtwitch.com/">Mindtwitch</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/mindtwitch.jpg' alt="mindtwitch" border="0"><br>mindtwitch</div><br>mindtwitch doku kullanarak navigasyonu öne çıkarma üzerine oldukça iyi bir örnek.</p> <p>3.<a href="http://www.jogger.pl/">Jogger</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/jogger.jpg' alt="jogger" border="0"><br>jogger</div></p> <p>jogger'in navigasyon menüsü oldukça basit ve sade fakat tasarım içerisine oldukça iyi adapte edilmiş.</p> <p><strong>Mükemmel bir primary navigation nasıl tasarlanır?</strong></p> <p>Navigasyon linklerini olabildiğince az tutun. 6-7 linki aşmamasını öneririm.<br>primary navigation linkleri için blog tasarımında biraz geniş bir alan sağlayın. Bu linklerin her sayfada görünmesi gerekmiyorsa görünmemesi gereken sayfalarda linkleri secondary navigation bölgesinde vermeyi göz önünde bulundurun.<br>Hakkında ve İletişim linkleri genellikle primary navigation bölgesinde bulunur. Diğer linkler tasarımın nasıl yapıldığına ve kullanıcıya ne verilmek istendiğine göre değişir.</p> <p><strong>Secondary Navigation</strong> - ikincil yönlendirici</p> <p>İkincil yönlendiriciler ziyaretçilerin bloğun diğer kısımlarına kolayca erişebilmesi için kullanılır. Genellikle bu linkler sidebar (yan sütun)'da verilir.<br>Birincil yönlendiricinin içermediği linkler bu bölümde sergilenir. Örneğin popüler makaleler, sayfalar, son yorumlar gibi. Siteyi ziyaret eden kullanıcıların kolayca erişmesi istenen kısımlara bağlantı sağlar.</p> <p><strong>Mükemmel secondary navigation örnekleri </strong></p> <p>1.<a href="http://www.elitistsnob.com/">elitistsnob</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/elitistsnob2.jpg' alt="elitistsnob" border="0"><br>elitistsnob</div></p> <p>temiz tasarımı sayesinde elitistsnob'un navigasyon menülerini okumak çok kolay.</p> <p>2.<a href="http://www.mancub.net/">Manclub</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/mancub1.jpg' alt="manclub" border="0"><br>manclub</div></p> <p>navigasyon menüsü içerik alanının arkasından kayarak çıkıyor ve tüm bölümler rahatlıkla ayırt edilebiliyor.</p> <p>3.<a href="http://wp-themes.designdisease.com/">desingdisease</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/designdisease1.jpg' alt="desingdisease" border="0"><br>desingdisease</div></p> <p>desingdisease turuncu rengin farkı tonlarını navigasyon menüsünde farklı bölgeleri ayırmak için kullanıyor.</p> <p><strong><br>Mükemmel second navigation bölümü nasıl tasarlanır?</strong></p> <p>Primary navigation da olduğu gibi burada da olabildiğince az link verilmesi yararlı olacaktır.<br>farklı linkler için secondary navigation alanını bölün. Bu algılamayı ve kullanımı kolaylaştıracaktır.<br>Secondary navigation alanını karmakarışık yapmayın. Okuyucu için gerçekten gereken nesneler hariç ne varsa çıkarın. Takvim güzel görünebilir ancak gerçekten işlevsel bir amacı yoksa (örneğin rezervasyon tarihi belirleme gibi) hiçbir okuyucunun buna ihtiyacı yoktur.</p> <p><strong>Headlines</strong> - manşetler<br>Manşetler kullanıcının dikkatini ilgili blog yazılarına çekmek için kullanılır. Yazarın ziyaretçiyi diğer blog yazılarından alıp ilgili yazıya yönlendirmek için kullandığı yöntemlerden biridir. Bu yüzden manşetler belirgin yapıda olmalıdır. Bunu yapmanın pek çok farklı yaratıcı yolu var.</p> <p><strong><br>Mükemmel manşet örnekleri</strong></p> <p>1.<a href="http://henryjones.us/">Henry Jones</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/henryjones.jpg' alt="henry jones" border="0"><br>henry jones</div><br>Henry sade tasarımı ve manşetleriyle kullanıcın ilgisini manşete çekebiliyor. ayrıca sevimli ikonlar kullanarak tarih ve yorum bölümüne de dikkat edilmesini sağlamış.</p> <p>2. <a href="http://www.ilovetypography.com/">I love typography</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/ilovetype.jpg' alt="i love typograpy" border="0"><br>i love typograpy</div><br>Bu font ve renkleri kullanarak nasıl ilgi çekici bir manşet yaratabileceğinizi gösteren mükemmel bir örnek.</p> <p>3.<a href="http://blogsolid.com/">blogsolid</a><br><div class="imajorta"><br><img src='http://www.bildirgec.org/imaj/maxhoper/blogsolid1.jpg' alt="blog solid" border="0"><br>blog solid</div><br>Blog solid başlık kenarında garip bir tasarım kullanarak kullanıcın ilgisini başlığa çekiyor.</p> <p><strong>Manşetler nasıl dikkat çekici yapılır?</strong></p> <p>Bunu yapmanın en kolay yolu manşet renklerini ana metin renginden farklı seçmektir. İçerik ve manşet için farklı fontlar kullanılabilir. Genellikle manşetler için serif fontlar ve içerik için non-serif fontlar kullanılır.</p> <p>Daha büyük puntolar kullanmak manşetleri belirginleştirir. içerikle aynı büyüklükte fontlar içerikle manşetin ayırt edilmesini zorlaştırır. Manşet puntoları içerik puntosundan büyük olmalıdır.</p> <p>Manşetleri belirginleştirmek için kullanılabilecek bir başka yol makale gönderim tarihi gibi bilgileri manşetin dışında bırakmaktır. (Bu makalenin orjinalinin bulunduğu blog bunu kullanmaktadır)</p> <p><strong>Comments</strong> - yorumlar</p> <p>Yorum sekmesi blog içerisindeki iletişimi güçlendirmek için oldukça önemli yer tutar. Yorum kenarlarına numara vermek. Yorumcuların birbirlerini kolayca tanımlamalarını sağlar.<br>Yazarın yorumlarını daha belirgin yapmak bir ziyaretçiye yazarın yorumlarını sayfa içinde hızla ararken kolaylık tanıyacaktır.</p> <p><strong><br>Mükemmel yorum sekmesi tasarım örnekleri<br></strong></p> <p>1.<a href="http://www.shiflett.org/">Chris Shifflet</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/f.jpg' alt="chris shifflet" border="0"><br>chris shifflet</div><br>Chris'in yorum alanını okumak oldukça kolay. Sade tasarımı ve yazarla yorumunu farklı bölümlere ayırması ilgi çekici.</p> <p>2.Darkmotion<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/fr.jpg' alt="darkmotion" border="0"><br>darkmotion</div><br>Yazar bilgilerinin ayrı tutulması oldukça hoş. Ayrıca yorum alanları da birbirinden ayrı görünüyor. Genel olarak sanki birisiyle sohbet halindeymiş gibi bir izlenim uyandırıyor.</p> <p>3.<a href="http://www.blogdesignblog.com/">Blog Desing Blog</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/fra.jpg' alt="blog desing blog" border="0"><br>blog desing blog</div><br><em>(Bu makalenin orjinalinin yer aldığı bloga ait olan yorum paneli. Makale yazarı ziyaretçilerinden oldukça olumlu eleştiriler aldığı için kendi bloğunun yorum bölümünü de makalesine eklemiş)</em></p> <p><strong>Mükemmel yorum bölümü tasarımı nasıl yapılır?</strong></p> <ol> <li>Yorumları birbirinden ve ana alandan ayırmanın en kolay yolu tasarımı alt alta gelen yorumları farklı renklerde olacak şekilde yapmaktır.</li> <li>Yazarın yorumlarının diğer ziyaretçilerin yorumlarından daha belirgin kılınması faydalı olacaktır. Ancak bu yapılırken bütünlüğü bozacak kadar belirginleştirme yapmak da negatif yönde etki edecektir. Renklerde küçük değişiklikler bu belirginleştirme işi için ideal olacaktır.</li> <li>İsim, tarih gibi bilgileri esas yorum metninden ayırmak ziyaretçilerin yorumları gözleriyle hızla tararken rahat etmesini sağlayacaktır. Böylece istediklerini daha hızlı bir şekilde bulabilirler.</li> </ol> <p><strong>Post's footer</strong> - içerik sonu</p> <p>post's footer bölgesi içerikten sonra yorum bölümü başlamadan önce ziyaretçilere bir takım refereans linkler verebileceğeniz bir bölgedir. Bu bölüm gülünç bir şekilde sıklıkla tasarımcılar tarafından atlanır. Aslında oldukça kıymetlidir. Ziyaretçilerin içeriği okuduktan sonra dikkatini diğer önemli makalelere çekmesi için bir şans verir.<br>İnsanlar bloglarında diğer elementlerin dizaynı için oldukça zaman harcarlar ancak sıra page's footer a geldiğinde şablon temanınkine benzer sıradan bir dizayn hazırlayıp geçerler. Bu yeterli olmaz.</p> <p><strong>Mükemmel post's footer örnekleri<br></strong></p> <p>1.<a href="http://www.freelanceswitch.com/">Freelanceswitch</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/freelanceswitch2.jpg' alt="freelanceswitch" border="0"><br>freelanceswitch</div><br>Oldukça keskin, temiz ve okuyucunun dikkatini okuyucu içeriği okuduktan sonra nazikçe burada sergilenen linklere çekiyor.</p> <p>2.<a href="http://www.psdtuts.com/">PSDTuts</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/psdtuts.jpg' alt="psdtuts" border="0"><br>psdtuts</div><br>okuyucaların oylayabilecekleri ve eğer makaleyi beğendilerse paylaşım ağlarına gönderebilecekleri linklerin mevcut olduğu bir post's footer tasarlanmış. Farklı renk kombinasyonu kullanılarak kullanıcının dikkati içeriği okuduktan sonra buraya kaydırılıyor.</p> <p>3.Standarts of Life<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/standardsforlife2.jpg' alt="standarts of life" border="0"><br>standarts of life</div><br>Oldukça temiz bir post's footer bölgesine sahipler. Benzeri makalelere verilen linklerin bulunduğu bölgede linkleri birbirinden ayırmak için alt alta gelen linklerin arkası farklı renklerde tasarlanmış.</p> <p><strong>Mükemmel post's footer nasıl tasarlanır?</strong></p> <p>Footer's post içeriğin sergilendiği bölümden kesin bir farklılıkla ayrılmalı. Okuyucu bunun içeğe ait olmadığını, ona yardımcı olmak için sayfaya eklenmiş olduğunu ilk görüşte anlayabilmeli. Bunun için farklı bir arkaplan rengi kullanmak farklılığı yaratabilmek için ideal yollardan birisidir.<br>Tasarıma başlamadan önce post's footer bölümünde ne istediğinize karar verin. Böylece bu bölgenin çöplük haline gelmesini önlemiş olursunuz ayrıca tasarımınız da daha hoş görünür.<br>Post's footer a koyabileceğiniz en iyi içeriklerden biri "benzer sayfalar" linkleridir. bu okuyucuya ilgilendiği konuyla ilgili daha çok makaleye kolayca ulaşma imkanı sağlar. Kullacının blogda sıkılmadan daha fazla vakit geçirmesi için önemlidir.</p> <p><strong><br>Footer</strong> - taban</p> <p>Pek çok insan footer'ı sadece klasik telif hakkı yazısı için kullanır. Ancak footer sidebar'ı dolup taşırmadan fazladan link verebileceğiniz önemli bir alandır. daha çok secondary navigation linki burada tutulabilir. Ziyaretçiler makaleyi bitirip sayfanın altına indiklerinde sayfa sonuyla karşılaşacaklar. Burası aslında onları blogdaki diğer makalelere yönlendirmek için verimli bir alan olabilir. Buradaki secondary navigation linklerinde popüler makaleler, son makaleler, öne çıkan makaleler gibi farklı dallarda linkler vererek ziyaretçileri sitede yayınlanan diğer ilginç içeriklere gönderebilirsiniz.</p> <p><strong>Mükemmel footer tasarımlarına örnekler </strong></p> <p>1.<a href="http://www.designshack.co.uk/">Desingshack</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/designshack.jpg' alt="desingshack" border="0"><br>desingshack</div><br>Sidebar kullanmadan secondary navigation linklerini footera aktarmayı denemişler. İncelenebilir.</p> <p>2.<a href="http://www.webdesignerwall.com/">Web Desingner Wall</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/webdesignerwall2.jpg' alt="webdesingnerwall" border="0"><br>webdesingnerwall</div><br>Nick sanırım header tasarımına harcıdığı zaman kadar footer da zaman ayırmış. Footer tasarımındaki detaylar dikkat çekici.</p> <p>3.<a href="http://shiflett.org/">Chriss Shiflett</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/shiflett1.jpg' alt="Chriss Shiflett" border="0"><br>Chriss Shiflet</div></p> <p>Gerçekten temiz ve işlevsel bir footer için iyi bir örnek. Tam olarak yapması gerekeni yapıyor.</p> <p><strong>Mükemmel footer tasarımı nasıl yapılır?</strong></p> <p>Footer'ı tasarımın geri kalanına biraz daha karşıt şekilde tasarlayın. Bu kullanıcının footer bölümüne geldiğini ve sayfanın sonuna yaklaştığını hissettirir.</p> <p>Okuyucuların gerçekten nelerden hoşlanacağını tahmin ederek okuyucaları o konulara yönlendirmeye çalışın. Burayı gereksiz bilgilerle doldurmak okuyuculara yardımcı olmaz.<br>Basit ve kullanışlı olmayı burada da sürdürün. Kullanıcıların kolayca algılayabileceği şekilde tasarlayın.</p> <p><strong>Advertisement</strong> - reklam</p> <p>reklamlar pek çok blogger için oldukça önemlidir. Ancak reklamlar çoğu zaman sayfanın korkuç gözükmesine yol açar ve bu kullanıcıların içeriği okuyamamasıyla sonuçlanabilir. Bir süre sonra kullanıcılar sitenizi ziyeret etmeyi bırakacaklardır. <br>Eğer reklamları doğru şekilde yerleştirmeyi başarır ve makaleyi reklamdan daha önde tutmanın yolunu bulursanız bu sorunu ortadan kaldırabilirsiniz. Sitenizi ziyaret etmeye devam eden kullanıcılar da böylece daha çok para kazanmanızı sağlar.</p> <p><strong>Mükemmel reklam bölümü tasarım örnekleri</strong></p> <p>1.<a href="http://www.copyblogger.com/">Copyblogger</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/copyblogger.jpg' alt="copyblogger" border="0"><br>copyblogger</div><br>copyblogger 125*125 boyutlarında oldukça büyük bir banner ı sayfasının üstüne yerleştirmiş fakat sponsorlarımız bölümü altında ve içeriğe dahil olmadığı kolayca ayırt edilecek şekilde konumlandırmış. İçeriği okumada her hangi bir sıkıntı yaratmıyor.</p> <p>2.<a href="http://www.webdesignerwall.com/">webdesingerwall</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/webdesignerwall1.jpg' alt="webdesingerwall" border="0"><br>webdesingerwall</div><br>webdesingerwall standart bir reklam görüntülemiyor. Ayrıca bunu içeriğin yanına eklemiş. ancak içerikle arasında bir ayıraç kullanarak bu reklamın içeriğe dahil olmadığını fark ettiriyor. böylece kullanıcıyı rahatsız etmemeyi amaçlamış.</p> <p>3.<a href="http://www.problogger.net/">problogger</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/maxhoper/problogger.jpg' alt="problogger" border="0"><br>problogger</div></p> <p>problogger kendi logosu yanında standar bir reklam banner'ı kullanıyor. Ancak bu hem logosunun hem de içeriğinin gerisinde kalıyor ve ziyaretçinin dikkatini dağıtmıyor.<br><strong><br>Reklam bölümü nasıl tasarlanır?</strong></p> <p>Eğer blogunuza reklam koymayı düşünüyorsanız, blogunuzun tasarımı daha taslak halindeyken reklamları nereye yerleştireceğinizi tasarlayın. Bu blogunuza daha fazla esneklik kazandıracaktır.<br>reklam vermekte en popüler yöntemlerden biri 125*125 boyutlarında google adsense bannerlerını kullanmaktır. google adsense pek çok farklı boyutta ve şekilde reklam veriyor olsa da 125*125 pixel boyutlarındaki reklamlar sidebar için uygundur.</p> <p>Reklam almadan önce reklamların sitede nasıl görüneceğini anlamak için bir kaç reklam örneği bulup bunları siteye ekleyerek deneyebilirsiniz.<br>Reklamlar görülecek kadar dikkat çekmeli ancak içeriğin önüne geçecek kadar da dikkat toplamamalı. Sidebar reklamları konumlandırmak için en iyi yerlerden birisidir. fakat sidebar'daki navigasyon menülere ulaşımı engellememelidir.</p> <p>Bol tasarımlı günler...</p> <p><em>not: ingilizceden türkçeye çevirileri birebir yapmak yerine yeni cümleler kurdum. Bazı noktalarda ek bilgiler verdim. Bu yüzden bire bir çeviri değildir. Makalenin orijinalini ziyaret ederek orijinali de incelenebilir.</em></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/blog-tasarimi-nasil-yapilir ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 01 Feb 2011 09:08:00 GMT 242815@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/blog-tasarimi-nasil-yapilir slayerrrr <p>Bu yazıda 30 adet sağlam <a href="http://www.bildirgec.org/etiket/css">css</a> örneği ve tekniği bulacaksınız. Galeriler, butonlar, menüler ve dahası...</p> <p><a href="http://sonspring.com/journal/hoverbox-image-gallery">1.Hoverbox Resim Galerisi</a><br>Güzel ve kullanışlı bir Hoverbox galeri.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/01-hoverbox-image-gallery.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.webdesignerwall.com/tutorials/advanced-css-menu/">2.Advanced CSS Menu</a><br>Yaratıcı ve kullanışlı, gelişmiş bir menü örneği.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/04-advanced-css-menur.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.cssplay.co.uk/menu/gallery3l">3.Açılır Galeri</a><br>Akordiyon efektli hoş bir galeri.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/22-sliding-photograph-gallery.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://bitesizestandards.com/bites/supercharge-your-image-borders">4.Lightbox</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/19-lightbox-slides.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.wubbleyew.com/tests/dropshadows.htm">5.Gölgelendirme</a><br>Açıkçası tam anlayamadım:) sanırım resme gölge efekti veriyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/09-drop-shadow-on-an-image.jpg' alt="\"\"" border="0"><br></div><br><a href="http://sixrevisions.com/images/04-24-2008_css_code_snipplets/09_drop_shadow_on_an_image.jpg">6.Güzel bir galeri</a><br>Hovering-over menü örneği.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/21-cross-browser-image-galler.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.simplebits.com/notebook/2003/08/22/css_photo_zoom.html">7.CSS Foto Zoom</a><br>Tek bir resmin üzerine gelince resmin büyümesini sağlayabilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/20-css-photo-zoom.jpg' alt="\"\"" border="0"><br></div><br><a href="http://dnevnikeklektika.com/en/css-gallery-layout-en">8.Bir Galeri Daha</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/29-gallery-smells-like-a-table.jpg' alt="\"\"" border="0"><br></div><br><a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">9.Yapışkan Alt Kısım</a><br>Sitenin alt kısmı için...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/36-sticky-footer.gif' alt="\"\"" border="0"><br></div><br><a href="http://www.xs4all.nl/~peterned/csshover.html">10.Windows Menü</a><br>Windows Başlat Menüsü benzeri menüler yapmak için...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/25-whatever-hover.gif' alt="\"\"" border="0"><br></div><br><a href="http://www.cssnewbie.com/css-only-accordion/">11.Akordiyon Css Efekti</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/33-css-only-accordion.gif' alt="\"\"" border="0"><br></div><br><a href="http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors">12.Css Buton</a><br>Renk değiştiren butonlar.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/32-scalable-buttonsgif.gif' alt="\"\"" border="0"><br></div><br><a href="http://mikecherim.com/gbcms_xml/news_page.php?id=31#n31">13.Css Buton-2</a><br>Seçilen butonun renginin değiştiği bir buton örneği.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/26-pushbutton-links.gif' alt="\"\"" border="0"><br></div><br><a href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html">14.Css Tablo</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/12-scrollable-table-with-fixed-header.jpg' alt="\"\"" border="0"><br></div><br><a href="http://snook.ca/archives/html_and_css/content_overlay_css/">15.İçeriğe Çerçeve</a><br>İçeriğin üstüne geldiğiniz de belirlediğiniz yazı açılıyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/28-content-overlay-with-css.jpg' alt="\"\"" border="0"><br></div><br><a href="http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/">16.Css Tablo-2</a><br>Güzel bir tablo örneği...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/13-css-styled-table-version-2.jpg' alt="\"\"" border="0"><br></div><br><a href="http://sonspring.com/journal/png-overlay">17.Kaplama</a><br>Resmin etrafına kaplama yapabilirsiniz.<br><a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html">18.Linklere Şekil Verin</a><br>İcon vs. ile linklerinizi değiştirin.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/31-showing-hyperlink-queues.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html">19.Css Yuvarlak Köşeler</a><br>Tabloların köşelerini yumuşatmak ister misiniz?<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/17-simple-rounded-corner-css-boxes.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html">20.Ağaç Menü</a><br>Güzel bir ağaç menü.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/23-sitemap-celebration.gif' alt="\"\"" border="0"><br></div><br><a href="http://bitesizestandards.com/bites/easy-cross-browser-transparency">21.Saydamlık</a><br><a href="http://www.bildirgec.org/etiket/jacascript">Javascriptde</a> kullanarak saydamlık-matlık efektleri.<br><a href="http://www.htmldog.com/examples/images3_3.html">22.Yuvarlak Köşeler-2</a><br>Yine köşeler yine yuvarlak...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/16-curved-corner-2.gif' alt="\"\"" border="0"><br></div><br><a href="http://www.maxdesign.com.au/presentation/percentage/">23.Yüzdelik Arkaplanlar</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/02-creating-a-graph.jpg' alt="\"\"" border="0"><br></div><br><a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55">24.Css Barlar</a><br>Örnekteki gibi barlar yapmak için...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/06-css-bar-graph-example.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.pmob.co.uk/pob/animated.htm">25.Menü Üzerinde Mouse Takip Eden Efekt</a><br>Farkındayım, karışık bir başlık ama baktığınızda anlayacaksınız.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/03-animated-roll-over.jpg' alt="\"\"" border="0"><br></div><br><a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/">26.Css Form</a><br>Güzel bir css form.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/27-css-based-form-template.gif' alt="\"\"" border="0"><br></div><br><a href="http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm">27.Resim Üzerine Yazı</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/35-css-image-text-wrap.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.cssplay.co.uk/opacity/fadein.html">28.Css Resim Efekt</a><br>Resmin üzerine geldiğinizde yazı yerini resme bırakıyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/08-fade-in-effects.jpg' alt="\"\"" border="0"><br></div><br><a href="http://sixrevisions.com/images/04-24-2008_css_code_snipplets/08_fade_in_effects.jpg">29.Css POP-up</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/11-pure-css-pop-ups.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">30.Css Yazı Efekti</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/05-css-text-gradient.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://sixrevisions.com/css/30_css_techniques_examples/">kaynak</a><br>umuyorum işinize yarar.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/30-olaganustu-css-ornegi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 16 Jun 2008 12:10:00 GMT 147841@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/30-olaganustu-css-ornegi slayerrrr <p>Artık herkes onu kullanıyor! <a href="http://www.bildirgec.org/etiket/ajax">AJAX</a>! Eğer güzel bir websitesi yapmak istiyen ve ajaxtan hoşlananlar ve öğrenmek isteyenler için güzel bir kaynak olacak umarım.</p> <p>1.<a href="http://www.ibm.com/developerworks/library/x-ajaxrss/">Ajax RSS Reader</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/02-01-ajax-rss-reader.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.bildirgec.org/etiket/ajax">Ajax</a>,<a href="http://www.bildirgec.org/php">PHP</a> ve <a href="http://www.bildirgec.org/etiket/mysql">MySQL</a> ile yapılmış bir Rss okuyucusu.<br><a href="http://www.musestorm.com/tutorials/ajax/">2.Ajax Desktop Tutorial</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/chuckie/02-02-ajax-desktop.gif' alt="\"\"" border="0"><br></div><br>Bu ders size adım adım nasıl masaüstüne benzeyen bir sayfa yapacağınızı anlatıyor.Demosu <a href="http://www.musestorm.com/examples/desktop.html">burada.</a><br><a href="http://www.ibm.com/developerworks/library/x-ajaxxml8/">3.Ajax For Chat</a><br>JavaScript, XML, ve PHP ile birlikte basit bir chat uygulaması yaratabilirsiniz.<br><a href="http://www.ibm.com/developerworks/edu/wa-dw-wa-aj-space.html">4.Ajax ve del.icio.us ile kendi bilgi alanınız</a><br>Bu teknik ana hatlarıyla Ajax ve <a href="http://www.bildirgec.org/etiket/api">API</a> yi birlikte kullanmayı öğretiyor.<br><a href="http://www.insideria.com/2008/03/ultralightweight-charts-for-aj.html">5.Ajax İçin Harita</a><br>Ajax ve <a href="http://www.bildirgec.org/etiket/flash">flash</a> kullanarak "windows gezgini" benzeri uygulama üretebilirsiniz. Biraz daha ayrıntı<a href="http://www.tricedesigns.com/portfolio/ajaxcharts/srcview/"> burada</a>.<br><a href="http://evolt.org/node/60673">6.Ajax ve PHP ile Takvim</a><br><a href="http://ajax.phpmagazine.net/2006/04/howto_integrate_google_calenda.html">7.Google Takvimi' ni Sitenize Ajax İle Entegre</a><br><a href="http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-library/15/">8. Edit In Place with AJAX Using jQuery</a><br><a href="http://www.progressive-coding.com/tutorial.php?id=6">9.Ajax İle Oylama</a><br><a href="http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html">10.Ajax İle Dosya Upload</a><br><a href="http://www.sitepoint.com/article/use-ajax-php-build-mailing-list">11.Ajax ve PHP ile mail list oluşturmak</a><br><a href="http://15daysofjquery.com/safer-contact-forms-without-captchas/11/">12.CAPTCHA ile iletişim formu</a><br><a href="http://waelchatila.com/2005/12/18/1134960510669.html">13.Ajax' ı captcha ile kullanın</a><br><a href="http://www.chazzuka.com/blog/?p=174">14.Ajax Login Form</a><br><a href="http://woork.blogspot.com/2008/03/nice-ajax-effect-for-message-box-using.html">15.Yazılar için Ajax efekti</a> | Demosu <a href="http://woork.bravehost.com/chainMootools/index.html">burada</a>.<br><a href="http://nodstrum.com/2007/09/19/autocompleter/">16.Form Tamamlayıcı </a> | Demo<a href="http://res.nodstrum.com/autoComplete/index.htm"> burada</a> <br><a href="http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/">17.Auto-populating Select Boxes using jQuery & AJAX</a> | Demo <a href="http://remysharp.com/wp-content/uploads/2007/09/select-chain.php">burada.<br></a><br><a href="http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu">18.Ajax Açılır Menü</a><br><a href="http://boonage.pjss2.net/2007/02/12/ajaxphp-shoutbox-tutorial/">19.Ajax/PHP shoutbox</a><br><a href="http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/">20.Ajax Tab Menü</a><br><a href="http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/">21.How to Load In and Animate Content with jQuery</a><br><a href="http://particletree.com/features/the-hows-and-whys-of-degradable-ajax/">22.The Hows and Whys of Degradable Ajax</a><br><a href="http://www.ibm.com/developerworks/web/library/wa-aj-resttip.html?S_TACT=105AGX08&S_CMP=EDU">23.Ajaxın yarattığı gereksiz trafikden kurtulun</a><br><a href="http://www.ajaxonomy.com/2007/web-design/a-better-ajax-back-button-solution">24.Geri butonu</a><br><a href="http://juicystudio.com/article/making-ajax-work-with-screen-readers.php">25.Ekran okuyucuları</a></p> <p>Bu dersler ingilizce olduğu için anlayamayanlar olacaktır. Ancak örneklere ve kodlara bakmanız halinde de fikir sahibi olacağınızı düşünüyorum.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/25-ajax-dersi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 16 Jun 2008 08:29:00 GMT 147715@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/25-ajax-dersi slayerrrr <p>css web Tasarımını hızla değiştirmeye devam ederken, geçen hafta yazmış yolduğum <a href="http://www.bildirgec.org/yazi/onlarsiz-yapamadigimiz-53-css-teknigi">onlarsız yapamadığımız 53 css tekniği</a> başlıklı yazımın çok tutulması sebebiyle bu konuda daha derin bir kaynak araştırması yapma gereği duydum, eminim bu yazıyı tutan bir çok arkadaş elinin altında böylesine önemli ve işe yarar <a href="http://www.canliweb.com/derledigim-css-ve-javascript-ornekleri.html">css örnekleriyle</a> dolu bir kaynağın bulunmasından çok hoşnut olmuşlardır bunları bu şekilde listeleyip <a href="http://www.bildirgec.org">bildirgec</a>'e yazmamın asıl amacı , bulduğum döküman tarzı kaynakların sıkkullanılanlar listemde kaybolup gitmesidir... Neyse fazla uzatmadan <strong>CSS Tekniklerine kaldığımız yerden devam edelim...</strong><em></em><br>işte <strong>Her zaman Kullanılacak 101 Css Tekniği...</strong><br><strong>101 - 1</strong>:web sitenizin kısa haber köşelerinde <a href="http://www.noupe.com/design/www.alistapart.com/articles/sprites">css Cinleri</a> oluşturmak.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-cini.gif' alt="Css Cinleri - (css sprites)" border="0"><br>Css Cinleri - (css sprites)</div><br>101 - 2: <a href="http://www.schillmania.com/content/projects/even-more-rounded-corners/">Css ile Kıvrımlı Köşeler oluşturmak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css9.jpg' alt="Css kıvrımlı köşeler" border="0"><br>Css kıvrımlı köşeler</div><br>bu uygulamanın demosu için <a href="http://www.schillmania.com/projects/dialog2/">buraya</a>bakabilirsiniz.<br><strong>101 - 3:</strong><a href="http://www.tjkdesign.com/articles/tip.asp">Resim Yenileme tekniği</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css3.gif' alt="resim yenileme tekniği" border="0"><br>resim yenileme tekniği</div><br>bu tekniğin açıklaması için <strong>Dave Shea</strong><em></em>'nin yazdığı şu <a href="http://www.mezzoblue.com/tests/revised-image-replacement/">makale</a>'ye bakabilirsiniz. <br><strong>101 - 4:</strong><a href="http://www.alistapart.com/articles/slidingdoors2/">CSS ile Geçişli Kapılar oluşturmak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css4.gif' alt="css sliding doors tekniği" border="0"><br>css sliding doors tekniği</div><br><strong>101 - 5:</strong> <a href="http://www.vertexwerks.com/tests/sidebox/">Css ile Rounded Box oluşturmak</a><br>benim en çok hoşuma giden uygulama bu oldu. kaynak <a href="http://www.vertexwerks.com/tests/sidebox/">kodu</a>na da aynı <a href="http://www.vertexwerks.com/tests/sidebox/">sayfadan</a> ulaşılabilmesi çok iyi.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css7.gif' alt="css rounded box " border="0"><br>css rounded box </div><br>evet yazımın diğer örneklerine <a href="http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html">buradan </a> ulaşabilirsiniz . Siz bunları incelerken ben 2.Bölüm için hazırlıklarımı yapıyor olacağım yorumlarınız için şimdiden teşekkürler umarım beğenirsiniz...</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/101-css-teknigi-bolum-1 ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 14 Jun 2008 19:02:00 GMT 147394@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/101-css-teknigi-bolum-1 slayerrrr <div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/csstec.png' alt="53 CSS Tekniği" border="0"><br>53 CSS Tekniği</div><br><a href="http://www.w3.org/Style/CSS/">CSS</a> çok önemli ve gün geçtikçe kullanımı artmakta. Cascading Style Sheets bizlere tablodan bağımsız tasarımlar ve kodlamaların yazı sıra kendine has seçici ve belirleyici , arayüz efektleriyle XHTML diline yeni başlayan arkadaşların çoğunun henüz tanışmadığı fakat bu işle biraz uğraşmış bir çok webtasarımcı arkadaşın kullanmadan yapamadığı bir çok tekniği içerisinde saklamaktadır. <p>Geçen bir kaç yıl içinde <a href="http://www.altiustutasarim.com/notdefteri/arsiv/2007/02/turkce_css_kaynaklari_ve_yazil.php">CSS üzerine bir çok makale</a> yazıldı çoğu HTML dilinin tablolardan ayıklanmması ya da tablosuz tasarımda büyük bir websisteminin tasarımının tek bir dosya ile nasıl saniyler içerisinde değiştirilebileceğini anlatan makalelerdi .</p> <p>bütün bunların yanı sıra CSS'e derinlemesine değinen tasarımcı arkadaşlar da var elbet fakat benim için en önemlisi web programcılarının CSS'e nasıl baktıkları ve ne yönde kullandıklarıdır, biliyorum ki onlar css'in tasarım yönüyle değil kendilerine yani webprojelerine neler getirebildikleriyle ilgilenecektir işte bu notada biraz yabancı kaynakları araştırmak hepimizin önünü açacaktır, webprogramcılarının rahat durmayıp CSS'i de bir <a href="http://tr.wikipedia.org/wiki/PHP">php</a> , <a href="http://www.aspnedir.com/">asp</a>, yada <a href="http://www.javascriptindir.com/">Javascript</a> gibi kullanmaya çalışmaları kaçınılmaz oldu. :)</p> <p>Sonunda <a href="http://www.csspage.com/">CSS</a>'i yakın geçmişte de olsa programlama adına kullanmak için bir çok teknik geliştirdiler . işte vazgeçemeyeceğimiz <a href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/">53 temel CSS tekniği</a> . <br>1- <a href="http://www.nundroo.com/navigation/">CSS tabanlı Navigasyon</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0000.gif' alt="css Navigasyon tekniği" border="0"><br>css Navigasyon tekniği</div><br>2 - <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/">Css ile Matrix Loader Navigasyon</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0001.gif' alt="css Matrix Navigasyon tekniği" border="0"><br>css Matrix Navigasyon tekniği</div><br>3 - <a href="http://exploding-boy.com/images/cssmenus/menus.html">CSS Tab Menu Tekniği</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0002.gif' alt="css tab Menu tekniği" border="0"><br>css tab Menu tekniği</div><br>4 - <a href="http://www.khmerang.com/index.php?p=118">CSS Bar Grafikler</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0003.gif' alt="css Bar grafikler" border="0"><br>css Bar grafikler</div><br>5 - <a href="http://www.flog.co.nz/lab/ARC/ARC.htm">Adam'ın CheckBox ve Rodyo Butonu Tekniği </a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0005.gif' alt="Adam'ın Checkbox ve radio buton tekniği" border="0"><br>Adam'ın Checkbox ve radio buton tekniği</div><br>6 - <a href="http://24ways.org/2006/css-production-notes">CSS ile production Notları yaratmak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/mglass/css-techniques0052.gif' alt="css production notes" border="0"><br>css production notes</div><br>daha fazla kalabalık yapmamak adına ben sadece bir kaçını yazıma ekledim, diğer 47 Css tekniğini kaynağından incelemek için <a href="http://www.smashingmagazine.com/category/css/">tıklayın</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/onlarsiz-yapamadigimiz-53-css-teknigi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 09 Jun 2008 20:55:00 GMT 146356@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/onlarsiz-yapamadigimiz-53-css-teknigi slayerrrr <p><a href="http://www.netzgesta.de/glossy/">Glossy.js 1.2</a>, web sitenizdeki resimlerinize, köşe ekleme, gölge etkisi sağlama gibi özellikleri, kolayca eklemenizi sağlıyor. Kod kalabalığı olmadan, tek bir tag ile çalışan bir <a href="http://tr.wikipedia.org/wiki/JavaScript">javascript</a>.</p> <p><a href="http://www.getfirefox.com">Mozilla Firefox 1.5+</a>, <a href="http://www.opera.com">Opera 9+</a>, <a href="http://www.microsoft.com/ie">IE6+</a> ve <a href="http://www.apple.com/safari">Safari </a>gibi bilinen tüm internet gezginleri ile problemsiz çalışıyor.</p> <p>yapmanız gereken, <a href="http://www.netzgesta.de/glossy/glossy.zip">glossy.js</a> dosyasını indirmek ve <a href="http://www.netzgesta.de/glossy/">şuradaki </a>işlemleri uygulamak.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/glossy-js ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 26 Jun 2007 13:45:00 GMT 95861@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/glossy-js slayerrrr <p>Windows XP kullanıcıları makinanızda ASP ve PHP aynı anda çalışmasını istiyorsanız (Tabi XP Professionalda geçerli). ASP için IIS kurmuş olmanız gerekli bunu bilmeyeniniz yoktur sanırım. Gelelim PHP ye, PHP çalıştırmak için öncelikle en iyi programı <a href="http://www.appservnetwork.com/">buradan</a> indirebilirsiniz. Program içerisinde Apache, MySQL, phpMyAdmin, PHP5 gibi olmassa olmaz eklentilerde mevcut ve opsiyonel olarak kurulumu soruluyor. Programı kurarken localhost 80 portu yerine 90 belirterek localhost:90/ şeklinde PHP dosyalarınızı localhost/ yada localhost:80/ şeklinde asp dosyalarınızı çalıştırmanız mümkündür. <a href="http://sourceforge.net/project/showfiles.php?group_id=37459">Buradan</a> PHP programının ek yamalarını indirerek <a href="http://www.phpbb.com/">PhpBB</a>, <a href="http://www.wordpress.com">WordPress</a> , <a href="http://www.phpnuke.org/">PhpNuke</a> gibi portalların sorunsuz çalışmasınıda sağlamak mümkün.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/windows-xp-platformda-asp-ve ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 06 Oct 2006 08:31:00 GMT 16074@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/windows-xp-platformda-asp-ve slayerrrr <div class="imajsol"><img src='http://www.bildirgec.org/imaj/htufekcilerli/ride-me.gif' alt="Project RIDE-ME" border="0"><br>Project RIDE-ME</div><br><a href="http://www.microsoft.com/windows/">Windows</a> tabanlı <a href="http://www.rubyonrails.org/">Rails</a> <a href="http://en.wikipedia.org/wiki/Integrated_development_environment">geliştirme ortamı</a> istiyorsanız <a href="http://www.projectrideme.com/">Project RIDE-ME</a> ilginizi çekebilir. <a href="http://msdn.microsoft.com/vstudio/">Visual Studio</a> havasında olan uygulama <a href="http://www.opensource.org/licenses/mit-license.php">MIT lisansı</a> ile dağıtılıyor.<p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/windows-ta-rails-surun ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 22 Aug 2006 05:46:00 GMT 12906@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/windows-ta-rails-surun slayerrrr <p><a href="http://www.mypicklist.com">Mypicklist.com</a> ve <a href="http://www.favoritethingz.com/">favoritethingz.com</a> sevidiğimiz şeylerin listelerini yapıp bunlardan para kazanmamızı sağlayan iki site.listelerimizi oluştup web sitemize koyuyoruz,yada başkalarına gönderiyoruz ve listedeki ürünlere tıklandığında,kullanıcı, bağlantılı sponsor sayfalara yönlendiriyor.ve bizim yönlendirdiğimiz kullanıcının yaptığı alışverişten komisyon alıypruz paypal'la ödemeler yapılıyor.sitem böyle çalışıyor ama gerçekte ne kadar kullanılablilir tartışmaya açık</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/sevdigimiz-seyler-bize-para-kazandirir ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 08 Aug 2006 17:43:00 GMT 11992@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/sevdigimiz-seyler-bize-para-kazandirir slayerrrr <p><a href="http://www.dynamicajax.com/">Dynamic Ajax</a>'ta <a href="http://www.dynamicajax.com/fr/AJAX_Tutorials-271_275.html">Ajax tutorialları</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/slayerrrr">slayerrrr</a> tarafından <a href=" http://www.bildirgec.org/yazi/ajax-tutorials ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 08 Aug 2006 04:47:00 GMT 11965@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/ajax-tutorials