En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Umarım bu yeni tasarımı beğenmişsinizdir.
Articles by "css"
css etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Umarım bu yeni tasarımı beğenmişsinizdir.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Bugün’ün önemi bakımından bu çekilişi 1.Nisan şakası gibi algılamak isteyen okuyucularım olabilir ancak şaka değil oldukça gerçek! Evet, hepimiz sanıyorum arkadaşlarımıza, ailemize, sevdiğimiz ve değer verdiğimiz kişilere sanırım çeşitli şakalarda bulunduk en azından ben öyle tahmin ediyorum yanılmışta olabilirim. 1 Nisan gülümseyin :)
Şu durumda siz okuyucularımı şakalarımla güldüremem ancak başlıktan da anlayabileceğiniz gibi sizlere harika hediyeler sunarak yüzünüzde bir tebessüm ve mutluluk verebileceğime eminim. TemplateMonster firmasını genel olarak duyduğunuzu düşünüyorum, eğer hiçbir fikri olmayan okuyucularım varsa onlara kısa bir açıklama yapmak isterim;
TemplateMonster 10 yılı aşkın geçmişi ile web üzerindeki en önemli online web tasarım mağazası diyebiliriz. Mağazasında 30,000 aşkın dev bir koleksiyona sahip olup web sitesi tasarımının yanı sıra hazır CMS sistemlerinin şablon ve tema’larını sunmaktadır. Bunların en önde gelenleri WordPress, Prestashop, Joomla, Opencart ve sizlere daha sayamadığım birçok içerik yönetim sistemi temalarını da bulabilirsiniz daha detaylı bilgi almak isterseniz web sitelerini ziyaret etmenizi öneririm.
Bugün sizlere bu firmadan bahsetme sebebim eğlenceli bir çekiliş yapmayı planlıyorum ve bu çekiliş sonucunda toplamda 3 şanslı okuyucuma TemplateMonster Premium ürünleri hediye edeceğim. Elbette bu ürünler sizlere ömür boyu lisans, 7/24 destek ve bir Premium tema sahibi olmanın bütün avantajları ile birlikte gelecek.
Ayrıca önemle belirtmek isterim ki projenizin ihtiyaçları doğrultusunda dilediğiniz herhangi bir TemplateMonster Premium ürününü alabileceksiniz, herhangi bir kısıtlama söz konusu olmayacaktır. Seçim yapmakta özgürsünüz.
Premium Tema Çekilişine Katılabilmeniz için Yapmanız Gerekenler
Bu harika çekilişe katılabilmeniz aslında oldukça kolay, webtegez.blogspot.com’da bir çok faydalı makaleye rastlayabilirsiniz ve dilediğiniz gibi yorumlar yazarak düşüncelerinizi belirtebilirsiniz. Ancak, sadece bu makaleye yorum yazarak Premium tema çekilişine katılma hakkı yakalıya bileceksiniz. Sizlerden istediğim şu soruya cevap vermeniz;
• Hangi TemplateMonster ürününü ve neden kazanmak istiyorsun?
Örnek cevap olarak bu kadar kolay cevaplayabilirsiniz;
• "Bir medya sayfası açmayı planlıyorum bu yüzden #48633 numaralı WordPress temasını kazanmak istiyorum."
Gördüğünüz gibi Premium tema çekilişine katılabilmeniz oldukça kolay. Şimdi hemen seçiminizi yapabilir ve yorum alanına yazarak çekilişe katılabilirsiniz.
Premium Tema Çekilişi Kuralları
• Her okuyucumuz çekilişe yalnızca bir sefer katılabilme hakkına sahiptir.
• Kazanan okuyucularıma hediyeleri e-mail yolu ile iletileceği için lütfen doğru e-posta adresleri ile katılım gerçekleştirin.
• Çekilişimiz 01/07 Nisan.2014 tarihleri arasında geçerliliğini koruyacaktır.
Şimdiden hepinize bol şanslar diliyorum!
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Merhabalar arkadaşlar;
Bugün size yarın yapacağım ufak ama eğlenceli bir yarışmadan bahsedeceğim. Yarışma Webmaster'lar için gerçekten çok önemli bir konudur. Web tasarım işine yıllarını vermiş Dünya'ca ünlü olan TemplateMonster web sitesinden sizlere bedava premium web tasarım sunacağım.
Premium tasarım ayrı ayrı olmak üzere 3 arkadaşımıza dağıtılacaktır. O şanslı 3 arkadaşımıza TemplateMonster'dan vereceğimiz promosyon kodu ile de istediği sayfadan, istediği yerden istediği tasarımı alabilecektir. Wordpress, Drupal, Flash tasarım vb. gibi istediği tasarımı alacaktır. Ama tabikide 3 arkadaşımızın her biri sadece 1 tane bedava premium tasarım alacaktır.
Yarışmanın geniş açıklamasını ve ayrıntılarını yarın akşam paylaşıp başlatacağım. Şimdiden bol şanslar diliyorum o arkadaşlara.:)
Gerçekten işinize yarayacağını webmaster arkadaşlarımız şimdiden anlamıştır zaten.
Takipte Kalın.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Bu yazımda çoğu kişinin zorlandığı arayıpta zor bulduğu bir konuyu paylaşmak istiyorum.
Herhangi iki tane yazı veya her hangi iki tane html kodu bazen görünüş veya ihtiyaç bakımından web sitemizde yan yaana yazmak isteyebilirsiniz. Yan yana derken biri tam sola diğer tam sağa gibi.
Örnek olarak aşağıya bakınız:
Soldaki Yazı
Sağdaki Yazı
Yukarıdan gördüğünüz gibi ikiside yan yana aynı hizada biri tam sola diğeri tam sağa geçmiş durumda. Aslında görünüşte çok kolay gözükebilir bunda ne var diye. Am inanın çoğu arkadaşlar bunu çok arıyorlar.
Benim bile başıma gelmişti eskilerden. Her türlü deneme yapıyordum ama olmuyordu.
Özelllikle mesela:
Soldaki Yazı <div style="align:right;">Sağdaki Yazı</div>
vb. gibi bir sürü kodlar denememe rağmen olmuyordu. Hep aşağıdaki gibi bir sonuç alırdım.
Soldaki Yazı
Sağdaki Yazı
Sağa doğru yanaştırırdım ama diğeriyle aynı hizada olmazdı. Ve bende araştırmalarım sonucunda bu sorunu buldum.
CSS kodunyla "float" ile artık herşey çok güzel olacak :)
Soldaki Yazı <div style="float:right;"></div>İşte yukarıdaki kod ile neyin sağ tarafına yazmak istiyorsanız o koddan hemen sonra <div> ile başlayan kodu yazarak istediğinizi başarıyla yapabilirsiniz.
Hepinize koaly gelsin arkadaşlar. Bundan böyle web sitenizin tasarımları bir başka güzel olacak :)
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Merhaba arkadaşlar bu yazımda sizlere blogger için nasıl tema yapabileceğinizi ve nasıl xml'ye dökebileceğinizi anlatacağım. Öncelikle Blogger'da Tema yapmak o kadar'da kolay birşey değil. Tema yapmak için bazı kodlamalar ve dilleri bilmeniz lazım.İlk olarak bize neler lazım bir onlara bakalım:
Ayrıca bazı programlar sayesinde Yukarıdaki Özelliklere sahip olmasanızda kediniz çok basit bir şekilde tema yapabilirsiniz.
Aşağıda vereceğim programda blogger için tema yapabilirsiniz ve bu program sayesinde header, footer gibi bölümleri kolayca yapabilirsiniz.
Eğer ben bu kadar uğraşamam bana daha kolay bir yolunu bulun diyorsanız. Hazır tema editleyebilirsiniz.Blogger'in kendi hazır şablonlarının kodlarına bir göz gezdirerek editleyebilir ve kendi yaptığınız tema tasarımına benzer kodları ekleyebilirsiniz.
Html Dilini Öğrenmelisiniz.
Photoshop Öğrenmelisiniz.(Photoshopta Temanızı tasarladıktan sonra kod vererek xml'ye dökerek tema haline getirebilir ve blogunuza tema yükleyebilirsiniz).
Ayrıca bazı programlar sayesinde Yukarıdaki Özelliklere sahip olmasanızda kediniz çok basit bir şekilde tema yapabilirsiniz.
Aşağıda vereceğim programda blogger için tema yapabilirsiniz ve bu program sayesinde header, footer gibi bölümleri kolayca yapabilirsiniz.
Programın adı : http://www.artisteer.com/
Eğer ben bu kadar uğraşamam bana daha kolay bir yolunu bulun diyorsanız. Hazır tema editleyebilirsiniz.Blogger'in kendi hazır şablonlarının kodlarına bir göz gezdirerek editleyebilir ve kendi yaptığınız tema tasarımına benzer kodları ekleyebilirsiniz.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Bu konumuzda Blogger vb. gibi web sitesi olan herkes bu özelliği kullanarak, sayfalarında istediği mesaj kutusunu koyarak ziyaretçilerinize güzel bir mesaj gönderebilir ve sayfalarınızda güzel bir görünüm yaratabilirsiniz.
Bu özelliği şu an WebteGez Blog sitesinde halen kullanmaktayız. Çünkü gerçekten ziyaretçileri bilgilendirmede işe yarıyor.
Kutuların İçerikleri Şu Şekildedir:
- Uyarı Kutusu
- Bilgi Kutusu
- Hata Kutusu
- Olumlu Kutusu
- İndir Kutusu
Kurulum:
1)
Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)
Blogger Panel'inizin sol menüsünden "Şablon" yazan kategoriye tıklayınız. (Sol Tarafta Gösterilen Resimdeki Kategori)
2)
Daha sonra karşınıza çıkan sayfadan "Şu Anda Blog'da" yazının altında bulunan "HTML'yi Düzenle" butonuna tıklayınız. (Sol Tarafta Gösterilen Resimdeki Buton)
Daha sonra karşınıza çıkan sayfadan "Şu Anda Blog'da" yazının altında bulunan "HTML'yi Düzenle" butonuna tıklayınız. (Sol Tarafta Gösterilen Resimdeki Buton)
3) 
Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.
Karşınıza POPUP Pencere tarzı bir pencere açılacaktır. Kodları yapıştırmaya başlamadan önce pencerenin sol üst tafından bulunan "Widget Şablonlarını Genişlet" yazısının başındaki boş CheckBox kutusunu işaretleyin.
4) Sonrasında klavyenizin "Ctrl+F" tuşuna basarak sayfa içi kelime arama kutusunu açın. Arama kutusuna "]]></b:skin>" yazısını yazarak yazıyı sayfada aratın. Kelime bulucu sol tarafta gördüğünüz resimdeki gibi size karşınıza yazdığınız kodu gösterecek. O bulduğunuz kodun hemen üstüne;.webtegezolumlu, .webtegezhata, .webtegezbilgi, .webtegezuyari, .webtegezindir {
padding-right: 10px;
padding-bottom: 10px;
font-size: 13px;
line-height: 20px;
margin-bottom: 20px;
padding-top: 10px;
background-repeat: no-repeat;
background-position: 7px center;
text-transform: uppercase;
padding-left: 50px;,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
.webtegezolumlu {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/olumlu.png);
}
.webtegezhata {
background-color: #FFECE6;
border: 1px dotted red;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/hata.png);
}
.webtegezbilgi {
background-color: #D3EEF1;
border: 1px dotted blue;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/bilgi.png);
}
.webtegezuyari {
background-color: #FFFBCC;
border: 1px dotted orange;
color: #555555;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/uyari.png);
}
.webtegezindir {
color: green;
background-color: #EBF8D6;
border: 1px dotted green;
color: #00cc00;
background-image: url(http://webtegez.3owl.com/Blogger/mesajkutusu/indir.png);
}
Kodu ekledikten sonra "Şablonu Kaydet" butonuna tıklayın ve şablonun kaydedilmesini bekleyin..
Evet arkadaşlar kodlarımız kullanılmaya hazırdır. Şimdi gelelim bu kodların kullanılışına:
Bu kodları aşağıdaki şekildeki gibi kullanabiliriz.
Bu kodları aşağıdaki şekildeki gibi kullanabiliriz.
<div class="webtegezuyari">WebteGez Uyarı Kutusu</div>
<div class="webtegezbilgi">WebteGez Bilgi Kutusu</div>
<div class="webtegezhata">WebteGez Hata Kutusu</div>
<div class="webtegezolumlu">WebteGez Olumlu Kutusu</div>
<div class="webtegezindir">WebteGez İndir Kutusu</div>
Örnek Demo Görünümleri Aşağıda Görüntülenmektedir Arkadaşlar..
WebteGez Uyarı Kutusu
WebteGez Bilgi Kutusu
WebteGez Hata Kutusu
WebteGez Olumlu Kutusu
WebteGez İndir Kutusu
İşte bu kadar kolay arkadaşlar.
Hepinize kolay gelsin.
Anlatım Tamamen Bize Aittir..!
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Başlıkta da belirttiğim gibi ayarları Blogger'a göre anlatıyorum ;
Öncelikle başlık ayarlarımızı yapıcaz. Başlık ayarları denilen şey aramalarda önce konu başlığı sonra sitenizin ismi çıkmasını sağlıyacak.
Blogger panelinizden Şablon >> Html'yi Düzenle seçeneğine tıklıyayın
Gelen penceredeki kutudan ''Widget Şablonlarını Genişlet''e tıkalamayı unutmayın...
<title><data:blog.pageTitle/></title>
Kodunu *
<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title></b:if>
Bununla değiştiriyoruz. Şimdilik bu kısım bitti.
İkinci olarak yapmamız gereken ise meta ayarlarını yapmak ( Gerekli birşey ), bu kodu bulun; ( Ctrl + F Kullanabilirsiniz )
<b:include data='blog' name='all-head-content'/>
Bununla değiştirin:
<meta content='BLOGUNUZUN KISA AÇIKLAMASI' name='description'/>
<meta content='BLOGUNUZUN ANAHTAR KELİMELERİ' name='keywords'/>
<meta content='BLOG YAZARININ ADI' name='author'/>
Ve şablonu kaydedip ziyaretçilerimizin artmasını bekliyoruz :)
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Kendi sitesine sahip veya web kodlama ile ilgilenen birçok kişinin en büyük sorunu şüphesiz ki tüm fontların kendiliğinden bulunmuyor olmasıdır.
@Font-Face sisteminin en özet açıklaması ‘Sitenize İstediğiniz Fontları Eklemenizi Sağlar’ olacaktır. Elbette ki bunun ayrıntısına indiğimizde birçok detayını keşfedeceğiz. Hadi başlayalım.
@Font-Face‘in kullanılması için oluşturulmuş en büyük kaynaklardan biri olan Google Fonts, şüphesiz ki bize en rahat Font-Face kullanım imkanını sağlamakta. En büyük kaynak olsa dahi (her ne kadar tasvip etmesek de) ücretli fontların orada bulunmaması veya kişisel fontlarınızı eklemek isteğiniz için @Font-Face yüklemeye değineceğim.
1. Google Fonts ile Yeni Fontlar
Eğer istediğiniz fontu Türkçe destekli olarak bulabiliyorsanız, bence hiç beklemeden bu yöntemi uygulayın.
http://www.google.com/webfonts adresine girip ilk olarak fontumuzu seçiyoruz, hemen ardından fontta bulunan ‘Quick Use’ butonuna tıklıyoruz. Gelen ekranda bulunan Add this code to your website:yazısındaki ‘<link>‘ tagını alıp, sitemizdeki <head> tagları arasına yapıştırıyoruz ve işlem tamam!
[Link tagı =
<link href='http://fonts.googleapis.com/css?family=Font+Adi' rel='stylesheet'type='text/css'> ]
Artık bu fontu kullanmanız için tek yapmanız gereken yukarıdaki link tagında maviye aldığım ismi bir css’e vermektir. Yani örneğin #anamenu {font-family:Font Adi;} olarak girmemiz gerekecektir. Bunun ardından #anamenu altındaki tüm fontlar Font Adı fontunda şekillenecektir.
2. Herhangi Fontu @Font-Face Yapmak
Google Fonts’ta bulamadığımız herhangi bir fontu da sitemize eklemek isteyebiliriz. Bunun için yapacağımız işlem biraz daha uzun olsa da, emin olun ki sonuçtan memnun kalacaksınız.
İlk olarak Create Your Own @Font-Face Kits sayfasına giriyoruz. Add Fonts ifadesine tıklayıp fontumuzu seçtikten sonra, EXPERT ifadesini işaretleyerek ayarları aşağıdaki gibi yapıyoruz.
İndirdiğimiz dosyalarda, aynı fonta ait dört farklı uzantıda yazı tipi olacağını göreceksiniz. Bunun sebebi tüm tarayıcının @Font-Face kullanımında aynı uzantıyı desteklememesidir.
İndirdiğimiz dört fontu temamızın içindeki /images klasörüne atıyoruz. Hemen ardından style.cssdosyamıza aşağıdaki kodları ekliyoruz.
Not: Fontlarınızı /images değilde farklı bir dizine attıysanız, aşağıdaki kodu ona bağlı olarak düzenlemeniz gerekmektedir.
Ardından istediğiniz div etiketine font-family:Font; özelliğini ekleyerek fontunuzu kullanabilirsiniz.
Keyifli Kullanımlar.
@font-face { font-family: 'Font';
src: url('images/font-webfont.eot');
src: url('images/font-webfont.eot?#iefix') format('embedded-opentype'),
url('images/font-webfont.woff') format('woff'),
url('images/font-webfont.ttf') format('truetype'),
url('images/font-webfont.svg#ABCDEFG') format('svg');
font-weight: normal; font-style: normal; }
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Disko, eğlence için oluşturulmuş mavi renge özen gösterilmiş bir tasarım. Bedava sitem için birebir uyuşmaktadır. Eski bir tasarım ama işe yarar.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
DeFacto markasının haber sitesi için oluşturulmuş profesyonel düzeyinde deninebilecek bir tasarım. Herkese kullanmasını tavsiye ederim. Çok fonksiyonlu bir tasarım. İşinize yarar. Bedava-Sitemle uyumludur. Gerekli dosyalar içindedir.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Bedava-Sitem için oluşturulmuş fakat her türlü host'ta, web sitede sıkıntısız, sorunsuz çalışmakta. Tasarım görüntü bakımından günümüz için yetersiz bir tasarım ama bu işe yeni başlayanlar için ideal bir tasarım olduğunu düşünüyorum.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Doğayı koruma ile ilgili oluşturulmuş bir tasarımdır. Tasarım oluşturulurken yeşil rengine özen gösterilmiş. Eski tasarımlardan da olsa kullanışlı bir tasarım olduğuna eminim. Hatta şu anda da bir çok bu tasarımı kullanmakta.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Havayı koruma, bulutlar, uçuş işleri vb gibi projelerde kullanılabilmek için oluşturulmuş bir gökyüzü tasarımı. Program o kadar kaliteli olmasada eminim bir çok kişinin işine yarayacaktır.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Eğer bir blog tasarımlı web site tasarımı kurmak istiyorsanız bu tasarım tam size göre. Ancak bu tasarım bedava-sitem tasarımı için düzenlendiği için en iyi bedava-sitem sitelerinden gösterilir. Normal bir web sitedede iyi gösterilir ama gerçeğiyle aynı gösterilmeyebilir. Ancak css ve html bilginiz varsa normal bir web site içinde ideal bir tasarım haline getirebilirsiniz.
Bence tasarım açısından iyi ve profesyonel bir tasarım diyebilirim. WebteGez.BlogSpot.Com Yöneticileri olarak size bu tasarımı şiddetle öneriyoruz.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Bence tasarım açısından iyi ve profesyonel bir tasarım diyebilirim. WebteGez.BlogSpot.Com Yöneticileri olarak size bu tasarımı şiddetle öneriyoruz.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Doğa tasarımı, çiçek dükkanınız için doğayı koruma gibi bir çok yararlı işlerde kullanılabilmek için oluşturulmuş bir bahçe tasarımı.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Android telefonlar için oluşturulmuş Android tasarımıdır. Tasarımda gerekli yerleri değiştirerek istediğiniz herhangi bir telefon markasınında web tasarımını oluşturabilirsiniz.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Windows Vista Yılının 2009 Yılı Halindeki CSS Tasarımıdır. Tasarım iyi haldedir. Fakat sizinde ufakta bir css bilginiz varsa bu tasarımı web sitenizde gerçek bir bilgisayar haline getirebilirsiniz.
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
Demo: Demosuna Gitmek İçin Buraya Tıklayın.
Tasarım Resmi:
Tasarımı İndir:
RAR Şifresi: webtegez.blogspot.com
Yanız Dikkat: Linkeri görebilmeniz için üye olmalısınız. Üye değil veya giriş yapmadan linke tıklarsanız sizi giriş yapma sayfasına yönlendirecektir. Oradan üye olmanız gerekmektedir. Üye olduktan sonra linklerin hepsini görebilirsiniz.
RAR Şifresi: webtegez.blogspot.com
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
CSS artık web tasarımla uğraşan herkesin ilgi alanına giriyor. Hatta web tasarımla uğraşmayan, benim gibi bir bloga sahip olan veya internet ile haşır neşir olan insanların bile günlük kullandıkları bir yapı haline geldi. WordPress temaları sanırım buna en güzel örnek olacaktır. internette birçok kaynak bulunmasına rağmen CSS’i tam anlamı ile bilmek pek mümkün olmuyor. Çünkü çok farklı teknikler gerebiliyor bazen. Bu farklı tekniklerin dışında kullanılan standart yapı içinse internette birçok kullanışlı araç yer alıyor. Form araçlarından, seçicilere onda katman yerleşimlerine kadar işe yarayadığını düşündüğüm araçları yazının devamında göreceğiz.
Alan ve Alan Yerleşim Araçları
Oluşturduğumuz alanlar bazen istediğimiz gibi olmaz. Ya ölçülerinde hata yaparız ya da float’ı kullanıdığımız yaslamalarda sorun çıkabiliyor karşımıza. Bu başlık altında zorlanmadan alan oluşturma ve yerleşimlerinin kolayca yapılmasını sağlayan servislere göz atacağız.
builder.yaml.de: Bir sitede ya da WordPress’e yakınsanız oradan örnek vereyim bir temada mutlaka header(üst kısım), sidebar(yan), content(içerik), footer(alt) kısımlar bulunur. Bu servis bütün bunları istediğimiz ölçüde ve istediğimiz hizalama ile sitemizin iskeletini oluşturmamıza olanak sağlıyor. Ayrıca servisi açtığımızda karşımıza gelen küçük pencerede yer alan “add elements” sekmesinde başlık, paragraf gibi nesneleri ekleyerek sitemizin kafamızda canlandırdığımız kısmını görmemizi de sağlıyor. Benim kesinlikle en sık başvurduğum servislerden birisidir.
Layout-o-Matic: Bu servisde Yaml’in yaptığı işlevi görüyor ancak onun kadar esneklik sağladığını söyleyemem. Yaml’den artısı ise girdiğimiz değerler karşısında ayarladığımız taslağımızı “download” butonuna bastığımız taktirde bilgisayarımıza indirmek oluyor.
CSS Creator: Yine alan oluşturabiliyor ve yerleşimini yapabiliyoruz bu servis aracılığıyla. Diğerlerinden farkı ise istediğimiz bölüme renk paleti sayesinde renk atayabilmek oluyor.
Free CSS Template Code Generator: Burada ise yine değerlerini girdiğimiz taslağı “generate” butonuna basarak önizleme yapabiliyoruz. Hazır olarak kodlarını da servis bize sunuyor.
CSS Source Ordered: istediğimiz kolon sayısına sahip taslaklar oluşturmak için birebir. Ayrıca istediğimiz sayıda footer bölgesi de ayırabiliyoruz.
QrOne CSS Desinger: Servisi ayrıcalıklı kılan özelliği diğerlerinde mevcut olmayan margin, padding, z-index(katman), yazı tipi ve position değerlerinin atanabilme yeteneğine sahip olması. Yaml’den sonra ikinci tercihim
Form Araçları
Bazen formları daha değişik tasarlamak isteriz. Ancak tasarlasak da kodlaması işkenceye dönüşebilir. Formlar için de araçlar mevcut.
JotForm: Bu servisin kullanımı ile ilgili daha önce şurada yazdığım makaleden dolayı tekrar açıklama yapmayı lüzumlu görmüyorum.
Accessible form builder: Div ve tablo seçeneklerine göre form hazırlamamıza imkan sağlayan bir servis.
Free CSS Form Layout Code Generator: Kutucuklara istediğiniz değerleri girdikten sonra formumuzun kodunu veren güzel bir servis.
Yazı Tipi Araçları
CSS Builder: Yazı tipi, rengi, dekoratifliği ve daha birçok seçeneğini isteğimize göre işaretleyebileceğimiz kullanışlı bir servis. Aynı zamanda kutu veya çerçeve de oluşturmamıza olanak sağlıyor. Ve son özelliği; liste biçiminin de ayarlanabildiği bir servis. Yine tercihlerimden birisidir kendileri
korhon Typeviewer: Yazı biçimlendirmelerini yapabileceğimiz güzel bir servis. Font, Word ve Text etiketleri için istediğimiz biçimlendirmeyi verebiliyoruz. Sitede bulunan kutucuklara istediğimiz değerleri girebildiğimiz gibi her kutucuğun üstünde yazan etiketin üzerine fare ile gelip beklediğimizde de girilebilecek değerler Dreamweaver gibi hazır olarak sunuluyor.
CSS Font and Text Style Wizard: Adı üzerinde bir sihirbazdır kendisi. Her etki etiketi için hazır değerler yer alıyor sitede. Hazır değerlere tıkladığımız zaman da sayfanın alt kısmında o etkinin ön izlemesini yapabiliyoruz. Ayrıca yazı ile resim hizalamasının yapılması da servisi ayrıcalıklı kılıyor.
Typetester: Kullandığı Ajax teknolojisi sayesinde font etkilerini listeden seçip eş zamanlı olarak alt kısımda ön izlemesini de yapabiliyoruz. Tercihlerim arasında.
Navigasyon Menü Araçları
CSS Menu Generator: Servis bünyesinde birçok hazır menüyü barındırıyor. Hem dikey hem de yatay olan menüleri “customize” linkine tıklayarak özelleştirebiliyoruz. Özelleştirme derken menü elementlerinin isimlerini kendimiz girebiliyoruz. En son işlem olarak da hazırlanan dosyayı bilgisayarımıza indirebiliyoruz.
Colly Logic CSS Rollover Generator: Kenar boşluğu, arkaplan, genişlik, yükseklik, yazı tipi ve büyüklüğü ve daha birçok değeri kendimizin seçmesini sağlayan kullanışlı bir servis. Değerleri verdikten sonra bize oluşturduğumuz menünün kodlarını teslim ediyor.
Webmaster Toolkit: Bu sayfada da birkaç biçimde dikey menüler mevcut. Bunlardan istediğimizi seçerek “proceed” butonuna basıyor ve kendi isteğimize göre biçimini ayarlayabiliyoruz. Renk, büyüklük, kenar boşluğu ve diğer temel değerleri kullanıcının ayarlamasına imkan veriyor. Hoş bir servis olduğunu söyleyebilirim.
List-O-Matic: Birkaç adımda istediğimiz gibi bir menüye sahip olmamızı sağlayan bir menü sihirbazı. Kullanımı da oldukça basit olan bu servis kendi tercihlerim arasında yer alıyor.
Optimizasyon ve Düzenleme Araçları
CSS Compressor: Mevcut CSS dosyamızın içindeki kodları kopyala yapıştır yöntemi ile sitedeki “insert CSS code” bölümüne girdiğimiz taktirde CSS dosyamızı sıkıştırıyor. Aradaki yorumları kaldırabilme özelliğine de sahip.
Tabifer CSS and HTML code Beautifier
üzensiz olarak girilen CSS veya HTML kodlarını standartlara uygun bir biçimde düzenleyerek kullanıcıya sunuyor. Yine tercihlerim arasında olan bir servis.Online CSS Optimiser: Servis yine CSS dosyamızı optimize ederek daha hızlı okunmasını sağlıyor. Diğer servislerden farkı ise bilgisayarımızda bulunan bir dosyayı yükleyerek optimize edebildiğimiz gibi internet üzerindeki herhangibir linkdeki CSS dosyasını da direkt alıp optimize edebilmesi.
Diğer Araçlar
CSS Rounded Box Generator: Oval köşeli alanlar ya da kutular web2.0 teriminin kullanılması ile birlikte yükselişe geçti. Şu an birçok sitede görmek de mümkün. Fakat hem tasarlaması hem de kodlaması bazen zaman alabiliyor. Bu servis sayesinde ne tasarım ne de kodlama için vakit kaybına uğramadan zahmetsizce oval köşeli alanlar oluşturabiliyoruz. Yine tercihlerim arasında olan bir servis.
Page Scanner Tool: istediğiniz bir site adresini servise girerek CSS yapısında kullanılan etiketlere bakabiliyoruz. Hangi tag kaç defa kullanılmış, kapatılmış mı yoksa hatalı mı olduğunu görebiliyoruz çıkan tablo sayesinde. Hataları azaltacağını düşündüğüm bir servis.
CSS Color Chart: Renk paletleri ve decimal kodlarını barındıran kullanışlı bir site. Eğer CSS’i Not Defteri gibi hazır etiketleri barındırmayan bir program ile düzenliyorsanız renkler çoğu zaman çile olmuştur. Fakat bu servis bu boşluğu fazlasıyla dolduruyor.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Formlar da web 2.0′nin değişim sürecinde büyük rol oynamış gizli kahramanlardandır aslında. internette her yerde karşımıza çıkıyor onlar. iletişim sayfalarında, yorum sayfalarında, ziyaretçi defterlerinde, forumlarda ve daha aklınıza gelebilcek binlerce yerde mevcuttur onlar. Görevleri ise ziyaretçiden aldığı bilgiyi gerek site yöneticisine gerekse sitedeki diğer insanlara duyurmak, iletmektir. Eğer web işi ile uğraşıyorsanız bir de bu formları hazırlamakla meşgul olmak durumu söz konusudur. Bazen duvara tırmandırırlar, bazen hemen oluverirler Bu yazıda tanıtacağım servis aslında form oluşturmanın hiç de zor olmadığını bizlere gösteriyor. Hatta göstermiyor direkt formu paket yapıyor Jot Form adındaki bu site ajax’ı bolca kullanmış, web programcılara ve belki de daha amatör kişilere (mesela ben(:) kolaylık sağlamak için kurulmuş. Sitede form oluştururken kullanabileceğimiz bütün nesneler yer alıyor. Siteye ilk girdiğinizde sol tarafta oluşturmak istediğiniz formun önizlemesi mevcut. Sağ tarafta ise “Toolbox” yazan kısımda; form öğeleri, “Power Tools” yazan kısımda form öğelerini güçlendirmek için kullandığımız resim, renklendirme ve buna benzer şekilmatik zımbırtıları, html kodlarını, şifre kutusunu, doğum günü öğesini koyabiliyoruz. “Payment Tools” kısmından eğer bir alışveriş sitesi için form ya da ona benzer bir form oluşturacaksanız altına ödeme şekli logosunu yerleştirebiliyorsunuz. Son olarak sol kısımda “Properties” kısmından eklediğiniz form öğesinin özelliklerini, değerlerini girebiliyorsunuz ki bu servisin en hoş tarafı da bu olsa gerek. Sürükle bırak, sürüklemeden bırak gibi yöntemler çalışıyor
. Sol tarafa eklediğiniz öğe doğal olarak ecnebice yazacağı için texte yani formda ecnebice görünen o yazıya tıklayınca o kısım aktif oluyor ve size düzeltme imkanı veriyor. Türkçe karakteri şükürler olsun ki destekliyor Sitenin form ile ilgili özellikleri bu kadar olsa da kullanılabilirlikle ilgili detaylar unutulmamış. “My Form” kısmından daha önce yapmış olduğunuz formlara erişebiliyorsunuz. Oluşturduğunuz formu diğer insanlarla paylaşma imkanı da veriyor. Böylece farklı form fikirleri de üretilmiş oluyor. Ayrıca sitede dersler de yer alıyor. Bir forum ve bloga da sahip. Form oluşturmak için çırpınanlara asprin niyetine gelebilcek bir servis. Eeee, daha ne olsun?
Servise ışınlan
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Blogger Dönen Resimlerle Menü Oluşturmak
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen altına aşağıda ki Blogger dönen resimlerle menü oluşturma kodlarını ekliyoruz.
.ch-item { width: 150px; height: 150px; border-radius: 50%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900px; -ms-perspective: 900px; perspective: 900px;} .ch-info{ position: absolute; width: 150px; height: 150px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 150px; height: 150px; border-radius: 50%; background-position: center center; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .ch-info .ch-info-front { box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3); } .ch-info .ch-info-back { -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0; } .ch-img-1 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRIsd8-OnqqwT-gn_RuaUjzj_TlCZ0hlCEBoNhIN4KUGdRXBQ2DLnPN-0FkQ6aU0KfhwhyphenhyphenHzyol7IFwbgSok_hyuauAiz5ND7aeNX_z97CA5I4_qqn2La7OnqVV9PTAtAqfySZnKb-vY/s1600/chip_cake.jpg); } .ch-img-2 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggrPshRySOKkgeiYlsZK8Nbj5WgN9KnMcdiLQV0pA-n-hP3-VAMRMyAs4MCWUgqik9gfm-l5dE21Zc8XgW-nZ5_KOZoY8jSBlzUbOqzidLUL9UMjS-yDdGDIul9XT8iMd_6WNopNOWYk/s1600/Blogger.png); } .ch-img-3 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnG-ye5rRYgIR7mAwxO43fHVYGM0rcNoy1UDWHhGSoAzs7NPzT0bX4JJbeDD-UxkIxi8dS_7xAF6nswEDeHtIIlEuZPhvCWFt6WAKwlTHFTFLolrLKU8M0A8SXHmljJyJUbtUGEpYpJM/s1600/photo-7.png); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: -10px 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);} .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: -95px; 30px; font-size: 12px;} .ch-info p a { display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;} .ch-info p a:hover { color: #fff222; color: rgba(255,242,34, 0.8);} .ch-item:hover .ch-info-front { -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); opacity: 0;} .ch-item:hover .ch-info-back { -webkit-transform: rotate3d(1,0,0,0deg); -moz-transform: rotate3d(1,0,0,0deg); -o-transform: rotate3d(1,0,0,0deg); -ms-transform: rotate3d(1,0,0,0deg); transform: rotate3d(1,0,0,0deg); opacity: 1;} .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;} .ch-grid:after, .ch-item:before { content: ''; display: table;} .ch-grid:after { clear: both;} .ch-grid li { width: 150px; height: 150px; display: inline-block; margin: 4px; }
<section class="main"> <ul class="ch-grid"> <li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"> </div> <div class="ch-info-back"> <h3> Demo </h3> <a href="http://www.webtegez.blogspot.com/">Blog Terimleri </a><br /> </div> </div> </div> </li> <li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-2"> </div> <div class="ch-info-back"> <h3> Demo</h3> <a href="http://www.webtegez.blogspot.com/"> Blogger Dersleri </a><br /> </div> </div> </div> </li> <li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-3"> </div> <div class="ch-info-back"> <h3> Demo</h3> <a href="http://www.webtegez.blogspot.com/"> Blogger Seo </a><br /> </div> </div> </div> </li> </ul> </section>
Blogger Dönen Resimli Menü Üzerinde Yapmanız Gereken Değişiklikler
- İlk kod dizini olarak ]]></b:skin> üzerine eklenecek kodlarda belirlenen Kırmızı ile yazılmış olan resim linkleri, demo örneğinde inceleyebileceğiniz gibi menünün görünür resim linkleridir. Kullanmak istediğiniz resim linkleri ile değiştirmeniz yeterlidir.
- İkinci kod dizinin de ise mavi ile yazılmış linkler resimler üzerine gelince altta beliren link yazısının gideceği sayfayı belirler.
- İkinci kod dizinin de pembe olarak verilmiş olanlar ise resim yerine gelecek menü açıklamasıdır.
- İkinci kod dizinin de kırmızı olarak yazılmış alanlar resimler yerine gelecek açıklama satırının altında yazacak olan linkin görünür metnidir.
Kaydol:
Kayıtlar (Atom)