http://www.bildirgec.org/ tr-tr 40 bildirgec.org - supermeg - beğendikleri supermeg <p>Wordpress hakkında söylenecek çok şey, yazılacak çok yazı var. Wordpress'e aşık olmamak elde değil çünkü wordpress bir blog sisteminden çok daha öte bir şey.. devamı bu yazıda gizli.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wordpress.jpg' alt="\"\"" border="0"><br></div><br>Bu yazıda wordpress'i nasıl bir e-ticaret sistemi olarak kullanırız sorusunun yanıtını arıyacağız.</p> <p>Eğer daha önce bir e-ticaret sistemi geliştirmedi iseniz bu yazı sayesinde temel bilgileri edineceksiniz. Bir e-ticaret sitesinde olması gerekenleri en temel ve basit şekliyle hazırlayacağımız sisteme dahil edeceğiz. İsterseniz hemen başlayalım.<br><strong><br>Ana Kaynağımız: Wp e-Commerce</strong><br>Wordpress için hazırlanmış birçok e-ticaret eklentisi mevcut ama biz bu yazımızda basit ve kolay kullanıma sahip <a href="http://getshopped.org/">WP e-Commerce</a> eklentisini kullanacağız.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wp-e-commerce-tutorial.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Eklentinin Kurulumu</strong><br>Eklentiyi <a href="http://wordpress.org/extend/plugins/wp-e-commerce/">wordpress eklenti dizininden</a> ya da e<a href="http://www.getshopped.org/">klentinin resmi websitesinden</a> indirin. Eklentiyi yönetim panelinizden aktifleştirdikten sonra Comments (Yorumlar) sekmesinin altına Pruducts (Ürinler) sekmesinin geldiğini göreceksiniz. <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress.jpg' alt="\"\"" border="0"><br></div>O sekmeye tıklayın ve bazı düzenlemeler ve ürün ekleme gibi işlemleri yapmaya başlayalım.<br><strong><br>Ayarlar > Genel</strong><br>İlk sekme genel sekmesi. Ürünlerini sattığınız ülkeleri, o ülkelerde uygulayacağınız vergi oranı vs gibi ayarları bu sekmeden yapıyoruz.</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-1.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Tanımlamalar</strong><br>Sisteminizdeki genel tanımlamaları; buton görünümü, tıklanma sayıları gibi ayarları bu sekmeden yapıyoruz. Ayrıca daha detaylı ayarlamalar yapmak için bu sekmede biraz daha fazla zaman harcamanızı öneririm.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-2.jpg' alt="\"\"" border="0"><br></div> <p><strong>Ayarlar > Admin<br></strong><br>IP engelleme, müşterilere özel mesajlar gönderme gibi işlemleri admin sekmesinden yapıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-3-1.jpg' alt="\"\"" border="0"><br></div><br>Aşağıdaki gibi değişikler yaparak da müşterilerinizi farklı sayfalara yönlendirebiliyorsunuz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-3-2.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Kargo</strong><br>Kargo-nakliye ayarlarını bu bölümden yapıyoruz. Ağrılığa veya boyuta göre farklı ücretlendirmeler yapabiliriz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-4.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Ödeme Seçenekleri</strong><br>Kuşkusuz bir e-ticaret sisteminin en önemli bölümü ödeme kısmıdır. Bu eklenti bize 3 farklı ödeme seçeneği sunuyor. Paypal, Google Checkout veya kapıda ödeme seçenekleri.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-5.jpg' alt="\"\"" border="0"><br></div><br>Ödeme seçeneklerine dikkat etmenizi öneriyoruz.<br><strong><br>Ayarlar > Ödeme</strong><br>Kullancı ürünü almadan önceki son ekranda hangi iletişim bilgilerine ihtiyaç duyduğumuzu ayarladığımız bölüm. <div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-7.jpg' alt="\"\"" border="0"><br></div><br>Ayarları burada noktalıyoruz. Şimdi de ürün ekleme, kategori oluşturma gibi işlemleri yapalım.<br><strong><br>Ürün Grupları ve Kategorileri Oluşturma</strong><br>Bu yazıda tişört satan bir mağaza oluşturuyoruz. Bunun için de gruplama yapmaya ihtiyaç duyacağız; cinsiyet, beden, renk vs...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/ekran-alintisi-2.JPG' alt="\"\"" border="0"><br></div><br>Yeni bir grubu aşağıdaki gibi oluşturuyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-groups-1.jpg' alt="\"\"" border="0"><br></div><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-2.jpg' alt="\"\"" border="0"><br></div><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-groups-3.jpg' alt="\"\"" border="0"><br></div><br><strong><br>İlk Ürünümüzü Ekleyelim</strong><br>Wordpress yönetim panelimizdeki sol kısımda bulunan menüden Products>Products yolunu izliyoruz. Wordpress'in yazı editörüne benzer bir editör olan WYSIWYG editör bizi karşılıyor ve ürünlerimizi ekliyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-1.jpg' alt="\"\"" border="0"><br></div><br>Ürünümüze ait stok adedi, fiyat gibi bilgileri girdikten sonra kategori, ürün gurubu, etiketleme işlemlerini aşağıdaki gibi yapıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-2-2.jpg' alt="\"\"" border="0"><br></div><br>İlk ürünümüzü ekledikten sonra sitemizin görünümü aşağıdaki gibi olacaktır.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wordpress-e-commerce-store.jpg' alt="\"\"" border="0"><br></div></p> <p>Bu yazıyı burada noktalıyoruz. Kullanabileceğiniz e-ticaret temaları <a href="http://webloti.org/wordpress-e-ticaret-temalari/">burada</a> listelenmiş.</p> <strong>Not:</strong> Bu yazı <a href="http://www.1stwebdesigner.com/tutorials/create-e-commerce-websites-wordpress/">buradan</a> Türkçeleştirilimiş ve özetlenmiştir.<br><br><strong>Ayrıca bakınız;</strong> <ol> <li><a href="http://www.bildirgec.org/yazi/web-tasarimci-ve-gelistiriciler-icin">Web Tasarımcı ve Geliştiriciler için En İyi Açık Kaynak Kodlu Yazılımlar</a></li> <li><a href="http://www.bildirgec.org/yazi/flash-gelistiriciler-icin-10-harika">Flash Geliştiriciler için 10 Harika Flash Framework</a></li> <li><a href="http://www.bildirgec.org/yazi/en-iyi-5-online-resim">En İyi 5 Online Resim Düzenleme Aracı</a></li> <li><a href="http://www.bildirgec.org/yazi/birbirinden-kullanisli-modal-window-iletisim">Birbirinden Kullanışlı Modal Window (İletişim Penceresi) Eklentileri</a></li> <li><a href="http://www.bildirgec.org/yazi/twitter-da-arkadaslarinizi-nasil-bulabilirsiniz">Twitter'da Arkadaşlarınızı Nasıl Bulabilirsiniz?</a></li> </ol><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/worpdress-ile-e-ticaret ">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, 28 Sep 2010 14:33:00 GMT 240461@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/worpdress-ile-e-ticaret supermeg <p><strong>SlickGallery</strong>, oldukça kolay kullanılabilen ve birçok özelliği bulunan bir jquery & php galeri uygulamasıdır. Tamamen interaktif olarak hazırlanmış bir galeri uygulaması olan <strong>SlickGallery</strong> ile resimlerinizi kategorilize edebilir, Slayt gösterileri ile ziyaretçilerinize gösterebilir ve bunun gibi birçok işlemi yönetim panelinden kolaylıkla kontrol edebilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/angelsdemos/slickgallery.PNG' alt="\"\"" border="0"><br></div> <p>Slayt gösterisi, atlı karınca modu gibi özellikleri sayesinde ziyaretçilerinizi etkilyebileceğiniz bu uygulama <strong>PHP5 & MySQL 4+</strong> üzerinden çalışıyor. <a href="http://bildirgec.org/ara/tooltip">Tooltip</a> özelliği sayesinde resimlerin büyük ve normal ölçülerinde görebiliyorsunuz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/angelsdemos/slickgallery-preview-1.jpg' alt="\"\"" border="0"><br></div> <p>Atlı karınca görünümü, küçük resim görünümü ve slayt gösterisi görünümüne sahip <strong>SlickGallery</strong>, Sürükle ve bırak gibi özelliklere de sahip. Atlı karınca modu sayesinde ziyaretçileriniz resimlerin biraz daha büyük hallerini ve altındaki birçok resmi görebilirken, slaty gösterisi sayesinde ziyaretçilerinze fotoğraflarınızı tek tek gösterebilir ve kararma efekti sayesinde ise ziyaretçilerinizin sadece fotoğrafa yönelmelerini sağlayabilirsiniz.</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/angelsdemos/slickgallery3-2.PNG' alt="\"\"" border="0"><br></div> <p>Gelişmiş yönetim paneli ile kategori oluşturma-silme, fotoğrafları sıralı yükleme, sürekle-bırak özelliği sayesinde kolay kontrol gibi birçok özellik bulunmakta. Ayrıca <a href="http://bildirgec.org/ara/google analytics">Google Analytics</a> içinde bir özellik eklenen bu uygulamayı kolaylıkla kullanabilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/angelsdemos/slickgallery2.PNG' alt="\"\"" border="0"><br></div> <p>IE7+, Firefox, Safari, Google Chrome, Opera desteğine sahip olan SlickGallery'i <a href="http://www.zinescripts.com/products/slickgallery/">buradan</a> inceleyebilir, demo sayfasına <a href="http://demo.zinescripts.com/slickgallery-1.0/#">buradan</a>, yönetim panelinin demo sayfasına <a href="http://demo.zinescripts.com/slickgallery-1.0-admin/admin/">buradan</a> ulabilirsiniz.</p> <strong>Ayrıca Bakınız ;</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/muhtesem-html5-ve-css3-uygulamalari">Muhteşem HTML5 ve CSS3 Uygulamaları</a></li> <li><a href="http://www.bildirgec.org/yazi/reel-ile-3-boyutlu-gercekci">reel ile 3 Boyutlu Gerçekçi Görüntüler</a></li> <li><a href="http://www.bildirgec.org/yazi/etkiliyici-slaytlar-icin-aeron-slideshow">Etkiliyici Slaytlar için: aeron slideshow</a></li> <li><a href="http://www.bildirgec.org/yazi/photoshop-ile-3d-yazi-efektleri">Photoshop ile 3D Yazı Efektleri</a></li> <li><a href="http://www.bildirgec.org/yazi/html5-video-oynatici-video-js">HTML5 Video Oynatıcı: Video JS</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-popeye-ile-interaktif-gorseller">jQuery.popeye ile interaktif görseller</a></li> <li><a href="http://www.bildirgec.org/yazi/web-gelistiricileri-icin-cevrimici-araclar">Web Geliştiricileri için Çevrimiçi Araçlar</a></li> <li><a href="http://www.bildirgec.org/yazi/grunge-tarzi-wordpress-temalari">Grunge Tarzı Wordpress Temaları</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-ile-hazirlanan-oyun-uygulamalari">jQuery ile Hazırlanan Oyun Uygulamaları</a></li> </ul> <p><strong>angelsdemos</strong>: <a href="http://angelsdemos.bildirgec.org/">Blog</a> | <a href="http://friendfeed.com/bildirgec">FriendFeed</a> | <a href="http://twitter.com/bildirgec">Twitter</a> | <a href="mailto:angelsdemos@gmail.com">Email</a> | <a href="http://angelsdemos.bildirgec.org/rss.xml">RSS</a></p> <p><strong>Kaynak</strong> : <a href="http://www.zinescripts.com/products/slickgallery/">SlickGallery</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/interaktif-galeri-uygulamasi-slickgallery ">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, 05 Oct 2010 06:32:00 GMT 240458@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/interaktif-galeri-uygulamasi-slickgallery supermeg <p>Blog dediğin wordpress gibi olur...</p> <p>Blog denilince ilk akla gelen blog platformu wordpress için birbirinden güzel temalar mevcut ama bu temaları görmedi isenizi güzel tema gördüm demeden önce biraz düşünseniz iyi edersiniz. Şunu da belirtelim ki bu temalara sahip olmak için küçük bir ücret ödemeniz gerekiyor.</p> <p>İşte birbirinden harika ve yeni 8 wordpress teması.</p> <p><strong>1. <a>Iridium</a></strong><br>Harika tasarımı ile ön plana çıkan iridium teması Rocket Theme tarafından hazırlanmış güzel bir wordpress 3.0 teması.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/iridium.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>2. <a href="http://templatic.com/ecommerce-themes/emporium">Emporium</a></strong><br>Eğer çok şık bir e-ticaret teması arıyorsanız bu tema tam size göre. <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/emporium.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>3. <a href="http://themeforest.net/item/photon-the-ultimate-photography-showcase-template/116402">Photon</a></strong><br>Eğer bir tasarımcı, model ya da fotoğrafçıysanız ve portfolionuzu sergileyebileceğiniz bir tema arıyorsanız bu tema tam size göre... Oldukça çekici bir tema.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/photon.jpg' alt="\"\"" border="0"><br></div></p> <p><!-- buradan kes --></p> <p><strong>4. <a href="http://www.woothemes.com/2010/03/cinch/">Chinch</a></strong><br>Chinch, Tumblr tarzında çalışan bir Wordpress 3.0 teması.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/cinch.jpg' alt="\"\"" border="0"><br></div><br><strong>5. <a href="http://www.studiopress.com/themes/genesis">Genesis</a></strong><br>Oldukça güzel bir wordpress 3.0 teması. Arama motoru optimizasyonu (SEO) ile sizi arama motorlarında üst sıralara çıkaracaktır.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/genesis.jpg' alt="\"\"" border="0"><br></div><br><strong><br>6. <a href="http://www.woothemes.com/2010/06/coda/">Code</a></strong><br>Yaptığı birbirinden güzel wordpress temaları ile tanınan WooThemes tarafından hazırlanmış, jquery tabanlı slider'a sahip ve gelişmiş bileşen yönetimi ile oldukça başarılı bir tema.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/coda.jpg' alt="\"\"" border="0"><br></div><br><strong><br>7. <a href="http://standardtheme.com/">Standard Theme</a></strong><br>İsminin standart tema olmasına aldanmayın aslında oldukça sıra dışı bir tema. Kodlama kalitesi, arama motoru optimizasyonu, Google analytics optimizasyonu, geniş reklam yönetim sistemi ile ticari kullanımlar için oldukça uygun bir tema.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/standard.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>8. <a href="http://ithemes.com/purchase/iteam-sports-premium-wordpress-theme/">iTeam</a></strong><br>Eğer bir spor takımının sitesi için tema arıyorsanız iTeam'dan daha iyisini bulamayabilirsiniz. Video ve foto galari desteği ile takımınızın başarılarını herkese gösterebilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/iteam.jpg' alt="\"\"" border="0"><br></div></p> <br><br><strong>Ayrıca bakınız;</strong> <ol> <li><a href="http://www.bildirgec.org/yazi/web-tasarimci-ve-gelistiriciler-icin">Web Tasarımcı ve Geliştiriciler için En İyi Açık Kaynak Kodlu Yazılımlar</a></li> <li><a href="http://www.bildirgec.org/yazi/flash-gelistiriciler-icin-10-harika">Flash Geliştiriciler için 10 Harika Flash Framework</a></li> <li><a href="http://www.bildirgec.org/yazi/en-iyi-5-online-resim">En İyi 5 Online Resim Düzenleme Aracı</a></li> <li><a href="http://www.bildirgec.org/yazi/birbirinden-kullanisli-modal-window-iletisim">Birbirinden Kullanışlı Modal Window (İletişim Penceresi) Eklentileri</a></li> <li><a href="http://www.bildirgec.org/yazi/twitter-da-arkadaslarinizi-nasil-bulabilirsiniz">Twitter'da Arkadaşlarınızı Nasıl Bulabilirsiniz?</a></li> </ol><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/en-yeni-ve-siradisi-wordpress ">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, 27 Sep 2010 11:51:00 GMT 240221@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/en-yeni-ve-siradisi-wordpress supermeg <div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/multimedia-editors.jpg' alt="free online multimedia editor / ücretsiz online multimedya editörü" border="0"><br>free online multimedia editor / ücretsiz online multimedya editörü</div>Hepimiz Photoshop'un, GIMP'in, Audacity'nin, Adobe Premier'in ne kadar kullanışlı ve vazgeçilmez olduğunu biliyoruz. Fakat her bilgisayarda bu programlara ulaşmamızın imkanı yok ki. Bu gibi durumlarda online editörler imdadımıza yetişiyor.<br>Son birkaç yılda iyice popüler olan online multimedya (ses, fotoğraf, video) editörlerinin en başarılı olanlarını sizler için inceledik: <p><strong>fotoğraf/imaj/görsel editörleri:</strong></p> <p><a href="http://www.flauntr.com/">flauntr</a><br>bu sitemiz online olarak birkaç resmi aynı anda düzenlememizi, birleştirmemizi sağlarken aynı zamanda resimleri düzenlememize, paylaşmamıza, saklamamıza, bastırmamıza da olanak veriyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/flauntr.jpg' alt="flauntr online resim editörü / free online image editor" border="0"><br>flauntr online resim editörü / free online image editor</div></p> <p><a href="http://www.picture2life.com/">picture2life</a>:<br>güçlü bir yapıya sahip ama çok kolay ve kullanışlı bir uygulama. picture2life sayesinde size özgü kolajlar hazırlayabilir ve gif animasyonlar tasarlayabilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/picture2life.jpg' alt="picture2life online resim ve gif editörü / free online image and gif editor" border="0"><br>picture2life online resim ve gif editörü / free online image and gif editor</div></p> <p><a href="http://www.improveyourimages.com/">improveyourimages</a>:<br>adından da anlaşılacağı gibi görüntüsü iyi olmayan (bulanıklık, ışık, kontrast) imajlarımızı iyileştirmek için kullanacağımız bir ücretsiz online resim düzenleme programı.</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/improveyourimages.jpg' alt="improveyourimage online resim iyileştirme editörü / free online image improve editor" border="0"><br>improveyourimage online resim iyileştirme editörü / free online image improve editor</div> <p><a href="http://www.lookwow.com/">lookwow</a>:<br>bu servis; zenginleştirme, kesme, boyutlandırma, berraklaştırma, kontrast ayarlama, kırmızı göz bölgesi temizleme gibi temel fotoğraf işlemlerini yapabiliyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/lookwow.jpg' alt="lookwow online fotoğraf düzenleme editörü / free online photo editor" border="0"><br>lookwow online fotoğraf düzenleme editörü / free online photo editor</div></p> <p><a href="http://www.makeagif.com/">makeagif</a>:<br>tam da dediği gibi! haydi bir gif yapalım. bu yazılıma karaleri teker teker "upload" ediyorsunuz ve sizin yerinize birleştirip bir gif ortaya çıkarıyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/makeagift.jpg' alt="online ücretsiz gif yapma programı / free online gif maker editor" border="0"><br>online ücretsiz gif yapma programı / free online gif maker editor</div></p> <p><a href="https://www.photoshop.com/">photoshop.com</a>:<br>bu site resimlerinizi düzenlemenizi, ve paylaşmanızı sağlıyor. fakat hepsi bu kadar değil.. size sağladığı 2gb hosting alanına resimlerinizi "upload" edip organize edebiliyor, düzenleyebiliyor saklayabiliyor ve istediğiniz zaman paylaşıma açabiliyorsunuz da.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/photoshop.jpg' alt="online ücretsiz fotoğraf organizatörü / free online photo maker and editor" border="0"><br>online ücretsiz fotoğraf organizatörü / free online photo maker and editor</div></p> <p><a href="http://www.onlinephototool.com/">online photo tool :</a><br>bu yazılım webdeki paintiniz.. daha çok screenshotlarınızı (ekran resimleri) düzenlemede kullanmanızı önerebiliriz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/onlinephototool.jpg' alt="online ücretsiz resim editorü / free online image maker and editor" border="0"><br>online ücretsiz resim editorü / free online image maker and editor</div></p> <p><a href="http://www.72photos.com/">72photos</a><br>özellikle ilginç fotoğraf ve fotoğraflar için. fotoğraflarınızı yükleyip organize edebiliyor saklayabiliyor veya paylaşabiliyorsunuz. 200mb alan ve 10gb aylık gösterim imkanı sunuyor. ücretli paketini satın alarak bandwidth limitini kaldırabiliyor online storage (çevrimiçi saklama alanınızı) 5gb'a yükseltebiliyorsunuz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/72photos.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><a href="http://drpic.com/">drpic.com</a>:<br>resimlerinizi kesebilir, metin ekleyebilir ve dr.pic in size sağladığı özel efektleri kullanarak yeni bir görsel ortaya çıkarabilirsiniz. ayrıca resimlerinizi host da ediyor dr.pic.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/drpic.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><a href="http://fotoflexer.com/">fotoflexer</a><br>bu yazılım dünyada çok tercih edilen bir yazılım. fotoğraf düzenlemede başı çeken tüm özelliklerin yanında arkaplan önplan webcam nesneleri ekleyebiliyor. ayrıca animasyon ve özel efektlerde çok başarılı.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/fotoflexer.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><a href="http://www.picnik.com/">picnik</a><br>eleştirmenlerden özellikle kolay kullanımıyla artı not almış bir editör. çerçeve arkaplan ve ön plan nesneleri yanında layer'larla (katman) da çalışabiliyorsunuz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/picnik.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><a href="http://www.sumopaint.com/home/">sumopaint</a><br>özellikle shape (şekilli kutu) bakımından zengin bir editör. yine profesyonel çalışmak isteyenlerin en büyük yardımcısı..<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/sumopaint.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><strong>son olarak <a href="http://www.splashup.com/">splashup</a> ı tanıtarak fotoğraf ve imaj editörlerimizi sonlandırıyoruz.</strong><br>bu program oldukça gelişmiş ama kolay kullanımlı. aynı anda birçok imajla çalışabiliyorsunuz. shap'e nesneleri ve metinler ekleyebiliyorsunuz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/splashup.jpg' alt="free online image editor / ücretsiz resim fotoğraf düzenleyiciler" border="0"><br>free online image editor / ücretsiz resim fotoğraf düzenleyiciler</div></p> <p><strong>ücretsiz online ses düzenleyiciler</strong></p> <p><a href="http://remixer.clubcreate.com/v1/scion/launch.html?scion">electro house blender</a><br>muhteşem ses klipleri ve remiksler oluşturmanızı sağlayan ve hatta kendi enstrumental müziklerinizi de rahatlıkla yapabileceğiniz bir online ses editörü.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/electro-house-blender.jpg' alt="free online audio editor / ücretsiz ses düzenleyiciler" border="0"><br>free online audio editor / ücretsiz ses düzenleyiciler</div></p> <p><a href="http://aviary.com/tools/myna">Aviary myna auido editor</a><br>kullanışlı-gelişmiş bir ses mikseri.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/myna.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><a href="http://www.looplabs.com/">looplabs</a><br>aynı anda birçok müzikle çalışmanıza olanak sağlayan bir mikser platformu.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/dubstep.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><a href="http://www.jamglue.com/">jamglue</a><br>kullanıcıları için upload ettikleri müzikleri mikselemelerini sağlayan bir site.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/jamglue.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><a href="http://madringtones.org/">mad ring tones</a>:<br>müziklerinizden veya youtube videolarınızdan güzel zil sesleri ortaya çıkarabilirsiniz. onları zil seslerine dönüştürür.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/mad-creator.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><a href="http://www.chirbit.com/">chirbit</a><br>bu editörümüzde artı olarak ses kayıt özelliği mevcut. evet evet online ses kaydı yapabiliyorsunuz!<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/chirbit.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><strong>ses editörü reyonumuzu da gelişmiş bir editörle kapıyoruz.</strong><br><a href="http://www.soundation.com/">soundation</a><br>bu editörümüz de oldukça gelişmiş bir yapıya sahip. birçok dosyayı mikslerken web tabanlı kütüphanesinden zil sesleri ve ses klipleri eklemenizi sağlarken aynı zamanda lokal sesler ve başka sitelerdeki sesleri de ekleme imkanı sunuyor.<br>gerçek manasıyla bir stüdyo ortamı sağladığını söyleyebiliriz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/soundation.jpg' alt="free online audio editor / ücretsiz ses mikser ve editörleri" border="0"><br>free online audio editor / ücretsiz ses mikser ve editörleri</div></p> <p><strong>ücretsiz online video düzenleme araçları:</strong><br><a href="http://captiontube.appspot.com/">caption tube</a><br>çok tatlı youtube videoları oluşturmanızı sağlıyor. elbette ücretsiz!<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/captiontube.jpg' alt="free online video editor / ücretsiz video mikser ve editörleri" border="0"><br>free online video editor / ücretsiz video mikser ve editörleri</div></p> <p><a href="http://animoto.com/">animoto</a><br>resimlerini güzel orkestra müzikleriyle süslemek ve bir video haline getirmek ister misiniz? elbette kendi ses kliplerinizi de ekleyebilirsiniz..<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/animoto.jpg' alt="free online video editor / ücretsiz video mikser ve editörleri" border="0"><br>free online video editor / ücretsiz video mikser ve editörleri</div></p> <p><a href="http://photobucket.com/">photobucket</a><br>hepimizin bildiği bu sitenin bir de video remiks aracı sunduğunu biliyor muydunuz?<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/photobucket.jpg' alt="free online video editor / ücretsiz video mikser ve editörleri" border="0"><br>free online video editor / ücretsiz video mikser ve editörleri</div></p> <p><a href="http://jaycut.com/">jaycut</a><br>limitsiz "upload" alanıyla bir video düzenleme sitesinden çok, bir film yapma sitesi olarak kullanabilirsiniz. <div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/jaycut.jpg' alt="free online video editor / ücretsiz video mikser ve editörleri" border="0"><br>free online video editor / ücretsiz video mikser ve editörleri</div></p> <p><a href="http://www.onetruemedia.com/">one true media</a><br>resimlerinizi göz alıcı slideshow'lara (özel geçişli gösteri) döüştürebilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/erenzade/onetruemedia.jpg' alt="free online video editor / ücretsiz video mikser ve editörleri" border="0"><br>free online video editor / ücretsiz video mikser ve editörleri</div></p> <p>---son--<br>yazı kaynağın birebir aynı değildir..kaynaktaki açıklamaları yetersiz gördüğümden, sitelerin çoğunu kendim inceledim ve bu doğrultuda naklettim..<br><a href="http://www.hongkiat.com/blog/30-free-online-multimedia-photo-audio-video-editors/">kaynak</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/ucretsiz-online-multimedya-editorler-resim ">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, 27 Sep 2010 09:22:00 GMT 240220@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/ucretsiz-online-multimedya-editorler-resim supermeg <p><a href="http://www.bildirgec.org/etiket/web-tasarımcı">web tasarımcı</a>lar ve "geliştiriciler" için kullandıkaları "araç" ve "gereçler" her daim ellerinin altında olmasını ister, bu "bildiri"de tasarımcılar için gerektiğinde kullanabileceği <a href="http://www.bildirgec.org/etiket/araçlar">araçlar</a>ı bir arada bulabilirsiniz.</p> <p>01- <a href="http://www.conceptfeedback.com/">tasarımlarınızı profesyonellerle paylaşın</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/conceptfeedback-com.jpg' alt="\"\"" border="0"><br></div><a href="http://www.bildirgec.org/etiket/tasarım">tasarım</a>larınızı başkaları ile <a href="http://www.bildirgec.org/etiket/paylaş">paylaş</a>abileceğiniz <a href="http://www.bildirgec.org/etiket/sosyal-ağ">sosyal ağ</a> sitesi.</p> <p>02- <a href="http://www.wix.com/ ">wix</a> ile ücretsiz flash web sitenizi oluşturun<div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/wix-com-2.jpg' alt="\"\"" border="0"><br></div></p> <p>03- <a href="http://www.uizard.org/">online html ve javascript editörü</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/uizard-org.jpg' alt="\"\"" border="0"><br></div>demosuna <a href="http://www.uizard.org/UIzard/uizard.php?action=newProject">şuradan</a> ulaşabilirsiniz.</p> <p><!-- buradan kes --></p> <p>04- <a href="http://www.desktop-reporting.com/polaris.html">site istatistiklerini masaüstünüzde görüntüleyin</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/polaris.jpg' alt="\"\"" border="0"><br></div><a href="http://www.bildirgec.org/etiket/desktop-reporting">desktop reporting</a> firmasının <a href="http://www.bildirgec.org/etiket/web-sitesi">web sitesi</a> sahipleri ve <a href="http://www.bildirgec.org/etiket/web-geliştiriciler">web geliştiriciler</a>i için geliştirdiği <a href="http://www.desktop-reporting.com/polaris.html">polaris</a> ile sitenizin 8 standart istatistik bilgisini masaüstünüze görüntüleyebilirsiniz.</p> <p>05- <a href="http://www.htaccesseditor.com/en.shtml">online .htaccess editor</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/wikirank-com.jpg' alt="\"\"" border="0"><br></div><a href="http://www.htaccesseditor.com/en.shtml">.htaccess</a> editor ile dosyalarınızı düzenleyebilir, bir çok yeni özellik ekleyebilirsiniz.</p> <p>06- <a href="http://www.bildirgec.org/etiket/flickr">flickr</a> için <a href="http://www.bildirgec.org/etiket/ajax">ajax</a> <a href="http://www.bildirgec.org/etiket/arama-motoru">arama motoru</a>:<a href="http://www.compfight.com">compfight</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/compfight-com.jpg' alt="\"\"" border="0"><br></div></p> <p>07- <a href="http://www.quarkbase.com/">web sitesi ile ilgili bilmek istediğiniz herşey</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/quarkbase-com.jpg' alt="\"\"" border="0"><br></div><a href="http://www.quarkbase.com/">quarkbase</a> ile bir web sitesi ile ilgili tüm detaylı bilgilere ulaşabilirsiniz.</p> <p>08- yazı tipini beğen css kodunu al:<a href="http://www.typechart.com">typechart</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/typechart-com.jpg' alt="\"\"" border="0"><br></div></p> <p>09- web siteniz için kaliteli sesler:<a href="http://www.soundsnap.com/">soundsnap</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/soundsnap-com.jpg' alt="\"\"" border="0"><br></div></p> <p>10- <a href="https://adwords.google.com/select/KeywordToolExternal">google anahtar kelime aracı</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/googleanahtarkelime.jpg' alt="\"\"" border="0"><br></div></p> <p>11- <a href="http://280slides.com/">online sunum, slide, prezentasyon oluşturma</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/280slides.png' alt="\"\"" border="0"><br></div></p> <p><strong>ilginizi çekebilir:</strong></p> <p><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/reng-renk-kampanya-siteleri">rengârenk kampanya siteleri</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/reng-renk-kampanya-siteleri-2">rengârenk kampanya siteleri 2</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/turkiye-nin-interaktif-web-ajanslari">türkiye'nin interaktif web ajansları</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/35-kore-web-sitesi-tasarimi">35 kore web sitesi tasarımı</a></strong></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasarimcilar-icin-11-arac ">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, 04 Sep 2009 13:46:00 GMT 222512@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasarimcilar-icin-11-arac supermeg <p>CSS ve JQuery ile hazırlanmış farklı tarzlardaki menüleri sizler için derledim. menülerin nasıl hazırlandığını menünün linkine tıklayarak öğrenebilirsiniz, isterseniz kodları direkt indirerek sitenize entegre edebilirsiniz.</p> <p>1- Kutu dışında <a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/">JQuery Navigasyon Menü</a> - <a href="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/all-examples.html">demo</a> - <a href="http://nettuts.s3.amazonaws.com/358_jquery/example%20files.zip">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/outside-box-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>2- gösterişli <a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">drop down menü jquery & css</a> - <a href="http://www.sohtanaka.com/web-design/examples/drop-down-menu/">demo </a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/sexy-jquery-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div><br><!-- buradan kes --></p> <p>3- Yukarıdan Aşağı Açılır <a href="http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw">Menü Oluşturmak</a> - <a href="http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html#">demo</a> - <a href="http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdownimages.zip">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/fanciest-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>4- <a href="http://www.cssplay.co.uk/menus/circular-sub.html">dairesel alt menü yapımı</a> - <a href="http://www.cssplay.co.uk/menus/circular-sub.html">demo</a> - <a href="http://iconeden.com/icon/free/get/milky-a-free-vector-iconset">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/circular-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>5- <a href="http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/">Olağan dışı Navigasyon menü yapımı</a> - <a href="http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo/index.html">demo</a> - <a href="http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo.zip">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/different-jquery-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>6- <a href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/">Twitter'deki gibi Açılır login penceresi yapımı</a> - <a href="http://aext.net/example/twitterlogin/">demo</a> - <a href="http://www.box.net/index.php?rm=box_download_shared_file&file_id=f_320140222&shared_name=ye9y3j1kvs">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/twitter-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>7- <a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">Sürgülü menü yapımı</a> - <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html#">demo</a> - <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip"> download</a> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/sliding-jquery-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>8- <a href="http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools">Mootool ssürgülü menü yapımı</a> - <a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/">demo</a> - <a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/tabslideV2-mootools.rar">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/fancy-sliding-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>9- <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx">vimeo tarzı navigasyon menü yapımı</a> - <a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/">demo</a> - <a href="http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip">download</a></p> <p>10- <a href="http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html">Dinamik php/css menü yapımı</a> - <a href="http://www.roscripts.com/uploads/articles/216">demo</a> - <a href="http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/php-css-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>11- <a href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/">JQurery Animasyonlu menü yapımı</a> - <a href="http://clarklab.net/blog/articles/dropdown/example.html">demo</a> - <a href="http://clarklab.net/blog/articles/dropdown/animateddropdown.zip">download</a> <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/animated-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>12- <a href="http://labs.makotokw.com/s/jquery/menu">JQuery Header Menü Yapımı</a> - <a href="http://labs.makotokw.com/s/jquery/menu">demo</a> - <a href="http://labs.makotokw.com/js/jquery/jquery.ui.potato.menu.js">download</a> <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/potato-ui-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p> <p>13- <a href="http://abeautifulsite.net/notebook.php?article=58">Çoklu Dosya Gösterimi</a> - <a href="http://abeautifulsite.net/notebook_files/58/demo/">demo</a> - <a href="http://abeautifulsite.net/notebook.php?article=58#download">download</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/jquery-tree-drop-down-multi-level-menu-navigation.jpg' alt="\"\"" border="0"><br></div></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/farkli-tarzlarda-jquery-ve-css ">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, 07 Sep 2009 16:47:00 GMT 222511@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/farkli-tarzlarda-jquery-ve-css supermeg <p><a href="http://www.bildirgec.org/etiket/wordpress">wordpress</a>in binlerce site sahibi tarafından kullanılan bir içerik yönetim sistemi olmasının bir nedeni de istenildiği kadar kişiselleştirilebilir bir esnekliğe sahip olması. wordpress'in mevcut yapısına eklemeler yapabileceğiniz çeşitli uygulamalar.</p> <strong>kendi sitenize özel bir <a href="http://en.gravatar.com/">gravatar</a> resmi</strong> <ul> <li><a href="http://codex.wordpress.org/Using_Gravatars">gravatar kullanımı</a></li> <li><a href="http://en.gravatar.com/site/signup">gravatar'a üye olun</a></li> <li><a href="http://www.problogdesign.com/general-tips/how-to-make-your-own-default-avatar-in-5-minutes/">5 dakikada kendi avatarınızı oluşturun</a></li> <li><a href="http://buildinternet.com/2009/02/how-to-change-the-default-gravatar-in-wordpress/">wordpress'in mevcut gravatar'ını değiştirme</a></li> </ul> örnekler:<br><div class="imajorta"><a href="http://www.myinkblog.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/myinkblog.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://buildinternet.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/buildinternet.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://10steps.sg/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/10steps.jpg' alt="\"\"" border="0"><br></a></div><br><strong>yayıncı yorumlarını diğer yorumlardan farklı gösterme</strong> <ul> <li><a href="http://rmarsh.com/plugins/highlight-comments/">yazar yorumlarını belirginleştirme eklentisi</a></li> </ul> <p><!-- buradan kes --></p> <ul> <li><a href="http://www.wprecipes.com/how-to-style-author-comments-in-wordpress-27">wordpress'te yazar yorumlarını biçimlendirme</a></li> <li><a href="http://www.problogdesign.com/how-to/style-author-comments-differently/">yazar yorumlarını farklı olarak gösterme</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.brianyerkes.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/brianyerks.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.noupe.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/noupe.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://thinkdesignblog.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/thinkdesign.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>"hakkında" sayfanız için yapabileceğiniz çalışmalar</strong> <ul> <li><a href="http://www.problogger.net/archives/2005/03/23/random-blog-tip-include-an-about-page/">blogunuza hakkında sayfası ekleyin</a></li> <li><a href="http://www.smashingmagazine.com/2009/07/01/best-practices-for-effective-design-of-about-us-pages/">hakkında sayfası için yapabileceğiniz çalışmalar</a></li> <li><a href="http://writetodone.com/2009/05/18/five-tips-and-a-bonus-on-how-to-write-a-fantastic-about-page/">hakkında sayfası yazımı için 5 ipucu</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.fudgegraphics.com/about/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/fudgegraphics.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.intuitivedesigns.net/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/intuitivedesigns.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://mattbrett.com/about/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/mattbrett.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>blogunuzun "footer" bölümünü etkin kullanın</strong> <ul> <li><a href="http://www.reencoded.com/2009/07/07/20-great-wordpress-footer-designs-for-inspiration/">20 örnek wordpress footer tasarımı</a></li> <li><a href="http://net.tutsplus.com/tutorials/wordpress/dont-ignore-your-wordpress-footer/">wordpress footer bölümünü gözardı etmeyin</a></li> <li><a href="http://www.sueblimely.com/add-widget-ready-sidebars-to-wordpress-footers/">footer bölümüne site bileşenleri eklemek</a></li> <li><a href="http://lorelle.wordpress.com/2007/09/30/customizing-your-wordpress-theme-footer/">footer bölümünü kişiselleştirmek</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.bcandullo.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/bcandullo.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.blog.spoongraphics.co.uk/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/spoon.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.assaultblog.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/assaultblog.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>404 bulunamadı sayfası</strong> <ul> <li><a href="http://www.smashingmagazine.com/404">Smashing Magazine'in bu sayfaya dair ipuçları ve örnekleri</a></li> <li><a href="http://themeplayground.com/2007/tutorials/for-wordpress-users/customize-your-404-page/">404 sayfanızı kişiselleştirin</a></li> <li><a href="http://wphacks.com/wordpress-tip-customizing-404-page/">wordpress ipucu: 404 sayfasını düzenlemek</a></li> <li><a href="http://www.alistapart.com/articles/perfect404/">A List Apart'tan mükemmel 404 sayfası</a></li> <li><a href="http://www.makeuseof.com/tag/build-a-great-website-404-page-20-examples/">404 sayfası yapımı ve 10 örnek</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.inspirationbit.com/404"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inspirationbit.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.problogger.net/404/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/problogger.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://veerle.duoh.com/404"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/veerle.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>wordpress'i çeşitli sosyal siteler ile bütünleştirmek</strong> <ul> <li><a href="http://eightface.com/wordpress/flickrrss/">flickr rss eklentisi</a></li> <li><a href="http://www.ericlightbody.com/2009/07/19/tweetiepie-for-wordpress/">TweetiePie eklentisi</a></li> <li><a href="http://wordpress.tv/2009/07/24/twitter-selfhosted/">yan menüye twitter güncellemelerini eklemek</a></li> <li><a href="http://mcbuzz.wordpress.com/2008/07/08/wordpress-tutorial-how-to-add-flickr-photo-widget-sidebar/">flickr fotoğraf bileşenini eklemek</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://kailoon.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/loon.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.leemunroe.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/leemunroe.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.ilovecolors.com.ar/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/ilovecolor.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>yazar veya site sahibini belirgin hale getirmek</strong> <ul> <li><a href="http://www.dagondesign.com/articles/posts-by-author-plugin-for-wordpress/">yazı sahibi eklentisi</a></li> <li><a href="http://wordpress.org/extend/plugins/multiple-authors/">birden fazla yazar eklentisi</a></li> <li><a href="http://gabediaz.com/blog/displaying-author-pic-and-bio-in-your-wordpress-post/">gravatar olmadan yazı altında yazar hakkında bilgi ve resim göstermek</a></li> <li><a href="http://themeshaper.com/how-to-add-gravatars-for-the-post-author-in-wordpress/">yazı sahiplerine gravatar eklemek</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.tutorial9.net/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/tutorial9.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://fuelyourcoding.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/fycoding.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://line25.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/line25.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>okuyucular ile bütünleşmek</strong> <ul> <li><a href="http://sexybookmarks.net/">Sexy(?)Bookmarks eklentisi</a></li> <li><a href="http://push.cx/sociable">Sociable eklentisi</a></li> <li><a href="http://anidandesign.com/wordpress/social-media-and-wordpress/">sosyal siteler ve wordpress</a></li> <li><a href="http://www.johntp.com/2006/05/25/10-ways-to-engage-readers-on-your-blog/">blogunuzu ve okuyucularınızı birbirine bağlamanın 10 yolu</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://wellmedicated.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/wellmedicated.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://colorburned.com/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/colorburned.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.nikibrown.com/designoblog"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/designoblog.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>kapsamlı bir arşiv sayfası hazırlamak</strong> <ul> <li><a href="http://wphacks.com/how-to-create-an-archive-page-for-your-wordpress-blog/">wordpress blogunuzun için arşiv sayfası hazırlama</a></li> <li><a href="http://www.pearsonified.com/2006/11/wicked-wordpress-archives-in-one-easy-step.php">kolay bir adımla arşiv sayfası</a></li> <li><a href="http://www.wpbeginner.com/wp-tutorials/how-to-create-an-archives-page-in-wordpress/">wordpress'te arşiv sayfası nasıl oluşturulur</a></li> <li><a href="http://www.geekwithlaptop.com/about/projects/clean-archives">Clean Archives eklentisi</a></li> <li><a href="http://www.prelovac.com/vladimir/wordpress-plugins/snazzy-archives">Snazzy Archives eklentisi</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://sixrevisions.com/all-articles/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/sixrevisions.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.prelovac.com/vladimir/archive-spec?layout=1&fx=0"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/snazzy.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.jankoatwarpspeed.com/archive.aspx"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/janko.jpg' alt="\"\"" border="0"><br></a></div></p> <strong>wordpress giriş bölümünü kişiselleştirme</strong> <ul> <li><a href="http://www.bittbox.com/wordpress/handy-wp-plugin-customize-your-wordpress-login-page/">Handy WP eklentisi: wordpress giriş bölümünü kişiselleştirin</a></li> <li><a href="http://www.binarymoon.co.uk/2007/07/wordpress-tips-and-tricks-custom-login-page/">kişisel giriş sayfası</a></li> <li><a href="http://onemansblog.com/2007/01/17/customizing-the-wordpress-user-login-screen/">10 adımda kullanıcı giriş bölümünü düzenleme</a></li> </ul> <p>örnekler:<br><div class="imajorta"><a href="http://www.flickr.com/photos/prisca_eyedea/2912930538/in/pool-bm-custom-login"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/login1.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.flickr.com/photos/theenglishguy/2859975321/in/pool-bm-custom-login"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/login2.jpg' alt="\"\"" border="0"><br></a></div><br><div class="imajorta"><a href="http://www.flisterz.com/2007/08/28/custom-wordpress-login-page/"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/login3.jpg' alt="\"\"" border="0"><br></a></div></p> <p><a href="http://www.problogdesign.com/wordpress/10-ways-to-customize-and-personalize-your-wordpress-blog/">kaynak</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/wordpress-duzenleme-ve-kisisellestirme-yollari ">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 Sep 2009 14:32:00 GMT 222509@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/wordpress-duzenleme-ve-kisisellestirme-yollari supermeg <p><a href="http://www.bildirgec.org/ara/takvim">Takvim</a>, popüler bir form elemanıdır. İnsan hatasını en az seviyeye düşürmeye yardımcı olur. Bunun yerine tipi belirlenmiş formatta tarih ile kullanıcılarınıza seçim imkanı verebilirsiniz. Bu biçimlendirme sorununu ortadan kaldırır. Kullanıcı dostu ve anlaşılması kolaydır.</p> <p>Bu yazıda 10 <a href="http://www.bildirgec.org/ara/jquery">Jquery</a> ve <a href="http://www.bildirgec.org/ara/mootool">MooTool</a> <a href="http://www.bildirgec.org/ara/takvim%20eklentisi">takvim eklentisi</a> yer almaktadır ve bazıları çok iyi bir şekilde tasarlanmıştır.</p> <p><strong>Jquery</strong></p> <p>1. <a href="http://arshaw.com/fullcalendar/">Full Calendar</a> | <a href="http://arshaw.com/fullcalendar/">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c1.gif' alt="\"\"" border="0"><br></div> <p>2. <a href="http://tedserbinski.com/jcalendar/index.html#about">jCalendar</a> | <a href="http://tedserbinski.com/jcalendar/index.html#demo">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c2.gif' alt="\"\"" border="0"><br></div><br><!-- buradan kes --> <p>3. <a href="http://www.jqueryui.com/demos/datepicker/">jQuery UI Datepicker</a> | <a href="http://www.jqueryui.com/demos/datepicker/#inline">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c3.gif' alt="\"\"" border="0"><br></div> <p>4. <a href="http://www.redredred.com.au/projects/jquery-week-calendar/">jQuery Week Calendar</a> | <a href="http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_demo.html">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c4.gif' alt="\"\"" border="0"><br></div> <p>5. <a href="http://www.bytecyclist.com/projects/jmonthcalendar/">jMonthCalendar</a> | <a href="http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c5.gif' alt="\"\"" border="0"><br></div> <p>6. <a href="http://www.eyecon.ro/datepicker/">Date Picker</a> | <a href="http://www.eyecon.ro/datepicker/">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c9.gif' alt="\"\"" border="0"><br></div> <p>7. <a href="http://teddevito.com/demos/calendar.php">Simple jQuery Date Picker</a> | <a href="http://teddevito.com/demos/calendar.php">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c10.gif' alt="\"\"" border="0"><br></div> <p><strong>MooTool Framework</strong></p> <p>8. <a href="http://dansnetwork.com/mootools/events-calendar/">Event Calendar</a> | <a href="http://dansnetwork.com/mootools/events-calendar/demo/">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c6.gif' alt="\"\"" border="0"><br></div> <p>9. <a href="http://www.electricprism.com/aeron/calendar/">Calendar</a> | <a href="http://www.electricprism.com/aeron/calendar/">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c7.gif' alt="\"\"" border="0"><br></div> <p>10. <a href="http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html">Vista-like Ajax Calendar</a> | <a href="http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html">Test</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/c8.gif' alt="\"\"" border="0"><br></div> <p>ayrıca aşağıdaki yazıda ilginizi çekebilir.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/7-ilginc-jquery-takvim-eklentisi">7 İlginç Jquery Takvim Eklentisi</a></li> </ul> <p><strong>kaynak:</strong> <a href="http://www.queness.com/post/656/10-beautiful-jquery-and-mootool-calendar-plugins">queness.com</a></p> <p>yazılarımı takip edebilirsiniz.</p> <ul> <li><a href="http://lebron.bildirgec.org/">blog</a> | <a href="http://twitter.com/lebron5">twitter</a> | <a href="http://friendfeed.com/lebron5">friendfeed</a> | <a href="http://delicious.com/lebron5">delicious</a> | <a href="http://feeds.feedburner.com/lebron">rss</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/10-guzel-jquery-ve-mootool ">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> Thu, 10 Sep 2009 06:29:00 GMT 222508@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/10-guzel-jquery-ve-mootool supermeg <p>Hayatı kolaylaştıracak <a href="http://www.bildirgec.org/etiket/css">CSS</a> tekniği nasıl mı olur? İşte cevabı... <a href="http://www.bildirgec.org/etiket/css3">CSS3</a> birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin <a href="http://www.bildirgec.org/etiket/yuvarlak-k%C3%B6%C5%9Fe">Yuvarlak Köşeler</a> (<a href="http://www.bildirgec.org/etiket/rounded-corner">rounded corners</a>) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.</p> <p><strong>1. Yuvarlak Köşeler</strong><br>jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını <a href="http://www.bildirgec.org/yazi/css-sprite-larin-kullanis-alanlari">CSS Sprite</a> tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/corners.jpg' alt="rounded corners" border="0"><br>rounded corners</div> <code> border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; </code> <p><strong>2. Eleman Gölgesi</strong><br>Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow'u aslında <a href="http://www.bildirgec.org/etiket/jquery">jQuery</a>'nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.<br><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/shadow.jpg' alt="box shadow" border="0"><br>box shadow</div> <code> box-shadow: 5px 5px 2px black; -moz-box-shadow: 5px 5px 2px black; -webkit-box-shadow: 5px 5px 2px black; </code> <p><strong>3. Yazı Gölgesi</strong><br>CSS ile yazı gölgesi yapabilmek için eskiden iki divi üst üste getirip, araya çok ufak bir <em>top margin</em> ve <em>left margin</em> koyuyorduk. İki div'de farklı renklerde aynı yazının bulunmasına da önem gösteriyorduk. CSS3 ile yazı gölgesi desteği de geldi.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/textshadow.jpg' alt="text shadow" border="0"><br>text shadow</div> <p><strong>Eski tip yazı gölgesi</strong><br><code> &lt;style type="text/css"&gt; .font { font-size: 20px; color: #2178d9; } .fonts { position: relative; } .fonts .font { position: absolute; z-index: 200; } .fonts .second { top: 1px; color: #000; z-index: 100; } &lt;/style&gt; &lt;div class="fonts"&gt; &lt;span class="font"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt; &lt;span class="font second"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt; &lt;/div&gt; </code></p> <p><strong>Yeni tip yazı gölgesi</strong><br><code>&lt;style type="text/css"&gt; .font { font-size: 20px; color: #2178d9; } .font { text-shadow: 0 1px 0 #000; } &lt;/style&gt; &lt;span class="font"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt; </code></p> <p><strong>4. Font Desteği</strong><br>Cufon, <a href="http://www.bildirgec.org/etiket/sfir">sIFR</a>, <a href="http://www.bildirgec.org/etiket/flir">FLIR</a> gibi servisleri sırf CSS'in desteklemediği fontlar için kullanmadık mı? Hala çok popüler olan bu servisler gelecekte tarihin tozlu sayfalarında yerlerini alacaklar. Çünkü CSS3 ziyaretçinin bilgisayarında bulunmayan fontları indirerek gösterime izin vermekte.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/font.jpg' alt="font face" border="0"><br>font face</div> <p><strong>Yaşasın @<a href="http://www.bildirgec.org/ara/font-face">font-face</a></strong><br><code>&lt;style type="text/css"&gt; @font-face { font-family: 'Loyal'; src: url('loyal.ttf'); } .font { font-family: Loyal; font-size: 20px; } &lt;/style&gt; &lt;span class="font"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt; </code></p> <p><strong>5. Opaklık</strong><br>Zaman zaman png dosyaları ile sağladığımız, zamanla css'nin de içine sızan opacity'i CSS3 ile tüm tarayıcılar destekleyecek.</p> <p><strong>Eski usul opaklık ayarlama</strong><br><code>&lt;style type="text/css"&gt; .box { opacity: .6; // all modern browsers (this is CSS3) -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8 filter: alpha(opacity=60); // IE 5-7 } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code></p> <p>CSS3 ile opaklık ayarlama<br><code>&lt;style type="text/css"&gt; .box { opacity: .6; } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code></p> <p><strong>6. RGBA Desteği</strong><br>Herkes RGB'nin red, green ve blue (kırmızı, yeşil ve mavi) olduğunu bilir. Ama nedir bu A harfinin anlamı? A harfi Alpha'nın baş harfidir. Alpha ise transparanlık değerini belirlemektedir. Daha önce php ile sağlanan rgba desteği artık CSS3 ile server tabanlı bir uygulama olmaktan kurtuluyor.<br><strong>CSS3 kullanımı</strong><br><code>&lt;style type="text/css"&gt; .box { background: url(rgba.php?r=239&g=182&b=29&a=.25); } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code></p> <p><strong>7. Arkaplan Resmi Boyutu</strong><br>Arkaplan resmini Windows'taki döşeme usulü kutumuzun içine yapıştıran CSS'e resmin boyutlarını belirtmek için bol satırlı tanımlamalar yapardık.<br><code>&lt;style type="text/css"&gt; .box { position: relative; overflow: hidden; } .box img { position: absolute; top: 0; left: 0; width: 50%; height: 50%; z-index: 100; } .box .content { position: absolute; z-index: 200; } &lt;/style&gt; &lt;div class="box"&gt; &lt;div class="content"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; &lt;img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" /&gt; &lt;/div&gt; </code></p> <p>Fakat dediğimiz gibi CSS3 hayatı kolaylaştırıyor.<br><code>&lt;style type="text/css"&gt; .box { background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat; -webkit-background-size: 50%; /* Safari */ -o-background-size: 50%; /* Opera */ -khtml-background-size: 50%; /* Konqueror */ } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code></p> <p><strong>8. Çoklu Arkaplan Resmi</strong><br>Bir içeriğin arkaplanına iki resim üst üste atayabilmek için, iç içe iki div tanımlamalı, bir de üsttteki resmin arkaplanını transparan yapmak zorunda kalırdık. Çok şükür ki CSS3'e gelen özellik ile bir elemana birden çok arkaplan resmi tanımlayabilecek, bunları sıralayarak hangisinin daha üstte görüneceğini belirleyebileceğiz.</p> <code>&lt;style type="text/css"&gt; .box { width: 200px; height: 150px; background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x; } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code> <p><strong>9. Hücreler</strong><br>bir paragrafı iki hücre halinde sayfaya yansıtmak için çok kez javascript'e başvurduk, sayfalarımızı gereksiz kodlarla doldurduk. CSS3 bu uğraşımıza çare bulmuş ve nihayet hücrelendirmeyi bünyesine katmış.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/columns.jpg' alt="hücrelendirme" border="0"><br>hücrelendirme</div> <code>&lt;style type="text/css"&gt; .columns { -moz-column-count: 2; -webkit-column-count: 2; } &lt;/style&gt; &lt;div class="columns"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt; &lt;/div&gt; </code> <p><strong>10. Kenarlık Resmi</strong><br>Border olarak tanımladığımız ve sadece çizgiden ibaret olan bu elemanlar sizin de canınızı sıkmadı mı? Eğer cevabınız evet ise, CSS3 kullanarak borderlarınıza istediğiniz resimleri koymanızda hiçbir sakınca yok!</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/border.jpg' alt="border'a resim koymak css3 ile mümkün olacak" border="0"><br>border'a resim koymak css3 ile mümkün olacak</div> <code>&lt;style type="text/css"&gt; .box { border-width: 20px; -webkit-border-image: url(images/border.png) 27 round; -moz-border-image: url(images/border.png) 27 round; border-image: url(images/border.png) 27 round; } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code> <p><strong>11. Animasyonlar</strong><br>jQuery ile yapabildiğimiz animasyonlar Webkit'li tarayıcılarda hiç javascript kodu yazmadan görülebilecek.</p> <code>&lt;style type="text/css"&gt; .box { position: relative; -webkit-transition: top 300ms linear; } .box:hover { top: 20px; } &lt;/style&gt; &lt;div class="box"&gt; &lt;!--CONTENT--&gt; &lt;/div&gt; </code> <p><strong>Sözün Özü</strong><br>Yakın gelecekten CSS3'ün iyice yaygınlaşması ile bir işe ayrılan zamanda azalmalar olacaktır. Her ne kadar IE başta olmak üzere tarayıcıların birbirleriyle olan uyumsuzluğuna bir çare bulunamasa da CSS3, birkaç popüler uygulama için bu uyumluluğu sağlayacak gibi görünüyor.</p> <p><strong>Not:</strong> Bu yazının orjinali <a href="http://net.tutsplus.com">Nettuts </a>sitesinde <a href="http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/">11 Classic CSS Techniques Made Simple with CSS3</a> başlığı ile yayınlanmış olup, bildirgeç için Tükçe'ye çevrilmiş ve yazar tarafından yorumlanmıştır.</p> <p><strong>İlgilinizi çeker mi?</strong></p> <ol> <li><a href="http://www.bildirgec.org/yazi/firefox-3-5-ile-web">firefox 3.5 ile web geliştiricileri sevinecek</a></li> <li><a href="http://www.bildirgec.org/yazi/css-ile-sekil-cizmek-cok">CSS ile şekil çizmek çok kolay!</a></li> <li><a href="http://www.bildirgec.org/yazi/css-sprite-larin-kullanis-alanlari">CSS Sprite'ların kullanış alanları</a></li> <li><a href="http://www.bildirgec.org/yazi/yeni-html5-tag-leri-ve">yeni html5 tag'leri ve kullanım şekilleri</a></li> <li><a href="http://www.bildirgec.org/yazi/css-sprite-kullanmak-artik-daha">CSS Sprite kullanmak artık daha kolay!</a></li> </ol> <p><strong>Beni takip edin</strong><br>basarozcan: <a href="http://www.bildirgec.org/rss/uye/basarozcan/yazi.xml">RSS</a>, <a href="http://twitter.com/basarozcan">Twitter</a>, <a href="http://friendfeed.com/basarozcan">FriendFeed</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/hayati-kolaylastiracak-11-css3-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> Thu, 10 Sep 2009 09:03:00 GMT 222507@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/hayati-kolaylastiracak-11-css3-teknigi supermeg <p><a href="http://www.bildirgec.org/etiket/web-tasarımcı">web tasarımcı</a>lar belirli bir standart <a href="http://www.bildirgec.org/etiket/tasarım">tasarım</a> <a href="http://www.bildirgec.org/etiket/stil">stil</a>i içinde kalmak yerine; farklı tasarım stillerini denemeyi tercih ederler. farklı tasarım stilleri ortaya koymak için farklı kültür deneyimi ve iyi bir gözlem gerekir. bu sayede çeşitli kaynaklardan yararlanarak bunu yaptığı çalışmalarına yansıtmaya çalışır. ABD ve Avrupa tasarımları birbirine çok benzerken <a href="http://www.bildirgec.org/etiket/uzak-doğu">uzak doğu</a> kültürü olan "<a href="http://www.bildirgec.org/etiket/kore">kore</a>" "<a href="http://www.bildirgec.org/etiket/web-site">web site</a>" tasarımları farklılık gösteriyor. tasarımlarınızda farklılık için için kore web sitesi stillerinden sonsuz <a href="http://www.bildirgec.org/etiket/ilham">ilham</a> alabilirsiniz.</p> <p>korece sitelerde, alfabenin farklı olmasından dolayı, font problemi varmış gibi algılanabilir, ancak bir süre sonra bu fontlar sitedeki grafiklerle bütünlük gösteriyor. sitede font yerine ayrı birer grafikmiş gibi duruyor.</p> <p><a href="http://www.wjthinkbig.com/">wjthinkbig</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/wjthinkbig-l.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://campaign.naver.com/opencast/">naver</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/campaign.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://chess.gojls.com/">chess</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/chess.jpg' alt="\"\"" border="0"><br></div><br><!-- buradan kes --></p> <p><a href="http://www.cubedbox.co.kr/">cubedbox</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/cubedbox.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://event.kt.co.kr/ktvalley/ktwebzine/sabo/200506/main/main.html">event</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/event.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://gcglobal.co.kr/main/main.htm">gcglobal</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/gcglobal.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.gimgane.co.kr/">gimgane.co.kr</a><br><a href="http://www.hangame.com/">hangame.com</a><br><a href="http://www.innisfree.co.kr/index.jsp">innisfree.co.kr</a><br><a href="http://www.isky.co.kr/index.sky">isky.co.kr</a><br><a href="http://money.kbstar.com/quics?asfilecode=5023&_nextPage=page=YoungKB">kbstar</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/kbstar.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://mid.lluon.com/event.asp">lluon</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/mid-lluon.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://nurimbo.co.kr/">nurimbo.co.kr</a><br><a href="http://pomm.daum.net/">pomm.daum.net</a><br><a href="ttp://www.shi.samsung.co.kr/Kor/webzine/epartner_200902/epartner_00.">shi samsung</a><br><a href="http://www.yeppbrandshop.co.kr/">yeppbrandshop</a><br><a href="http://happybean.hangame.com/">happybean</a><br><a href="http://webzine.hankooktire.com/200812/index.asp">webzine</a><br><a href="http://www.paintclub.co.kr/index.asp">paintclub</a><br><a href="http://www.pandadog.co.kr/">pandadog</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/jurnal/pandadog-l.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.samil-kids.com/">samil-kids</a><br><a href="http://www.bluecanyon.co.kr/">bluecanyon</a><br><a href="http://www.elastine.co.kr/">elastine</a><br><a href="https://www.kebi.com/">kebi</a><br><a href="http://lib.bu.ac.kr/">lib bu</a><br><a href="http://www.pocarisweat.co.kr/main.asp">pocarisweat</a><br><a href="http://www.samlipgf.co.kr/event/20071017/event_main.asp">samlipgf</a><br><a href="http://www.seorakwaterpia.co.kr/irsweb/waterpia/index.asp">seorakwaterpia</a><br><a href="http://www.zipless.net/">zipless</a><br><a href="http://www.zimmoah.net/">zimmoah</a><br><a href="http://www.the-story.kr/">the-story</a><br><a href="http://thedesigninspiration.com/articles/top-35-inspirational-korean-websites/">kaynak</a><br><strong>ilginizi çekebilir:</strong></p> <p><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/reng-renk-kampanya-siteleri">rengârenk kampanya siteleri</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/reng-renk-kampanya-siteleri-2">rengârenk kampanya siteleri 2</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/reng-renk-kampanya-siteleri">web tasarımcılar için 11 araç</a></strong><br><strong>+</strong> <strong><a href="http://www.bildirgec.org/yazi/turkiye-nin-interaktif-web-ajanslari">türkiye'nin interaktif web ajansları</a></strong></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/supermeg">supermeg</a> tarafından <a href=" http://www.bildirgec.org/yazi/35-kore-web-sitesi-tasarimi ">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> Thu, 10 Sep 2009 11:30:00 GMT 222506@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/35-kore-web-sitesi-tasarimi