Css3 İle Tam Ekran Background Yapımı

Sayfamızı hazırlarken arka plan resmi eklediğimizde bu resmin sayfaya tam olarak oturmasını isteriz. Tüm kullanıcıların ekran boyutlarının aynı olmadığını düşündüğümüzde eğer tarayıcımızın %100 lük kısmını kullanan bir sayfamız var ise arka plan resmimizin sayfaya tam oturması gerekir. 

Html5 ile gelen yenilikler sayesinde görsel olarak tasarımlarımızın neredeyse hepsini Css üzerinden yaptığımızı unutmamalıyız. Sayfamızın arka plan resmini oluşturuken body tagımıza css kuralı atıyoruz. Bu Css kuralımızda sayfamız ekrana tam olarak sığacağından Margin ve Padding özelliklerine 0 px vermeyi unutmamalıyız. Arka plan resmimizi tanımladıktan ve tüm istediğimiz ayarları yaptıktan sonra resmimizin sayfaya tam olarak sığmasını sağlayacak bir kaç satır kod yazma işimiz kalmış olacak.

Yazmamız gerekn kodlar şunlardır;

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

margin:0px;

padding:0px;

}

Body tagımıza eklediğimiz kodlarla birlikte body tagımız için Css kuralımız hemen hemen böyle görünecektir.

Microsoft 2019'a hazırlanıyor !...

Dünyanın teknoloji devi Microsoft teknolojinin anahtarını elinde tutmak için büyük çaba sarf ediyor. Microsoft ileriye dönük çalışmalarıyla dünyanın ileri deki teknolojisini kurmak için kollarını sıvamış ve işe başlamış durumda.

Microsoft yayınladığı video ile bizler için ileride hayatımıza girecek olan yenilikler hakkında küçük bilgiler vermekte.

İleride bizleri bekleyen katlanabilir ekranlar ve hayatımızı çok kolay bir hale getirebilecek teknolojiler bulunmakta. Gazetelerimizi okurken artık sayfalar arasında boğulmamak bu geliştirilecek teknoloji sayesinde bizlere sadece bir kaç sene kadar uzakta gibi görünüyor.

Microsoft'un 2019'da ulaşmayı hedeflediği teknolojilerin kısa bir videosunu gelin birlikte izleyelim.

Html5 İle Kullanımı Son Bulan Etiketler

Html5 teknolojisi hayatımıza girdiğinden bu güne bir çok yeni etiket kullanıma girmiş hatta bir çok yeni etiket ise hazırlanma aşamasındadır. Html5 yenilikleri henüz tam olarak yerleşmediği için bir süre daha iyileştirme çalışmaları sürecektir.

Html5 ile gelen bir çok yeni etiket Html4 ile kullandığımız bir çok etiketin kullanımına son vermiştir. Fakat kullanımdan kalkan bu etiketleri tarayıcılarımız desteklemeye devam edeceklerini unutmamalıyız.

Web sayfalarımızı oluştururken kullandığımız kod editörlerinde Html5 dosyası açtığımızda ve bu dosya üzerinde çalışma yaptığımızda kullanımı son bulan etiketlerin desteklenmediğini göreceğiz.

Bir kaç örnek vermek gerekirse;

Html5 ile kullanımı sona eren bazı görünüm etiketleri: basefont, big, center, font gibi etiketlerin yerlerine Css özellikleri tercih edilmeye başlanmıştır. Css ile çok daha fazla seçeneğe sahip olduğumuz için görünüm için Css özelliklerinden faydalanmaya başlanmıştır.

Frame, Frameset gibi erişim etiketlerininde kullanımı sona ermiş durumdadır. Fakat iframe etiketi hala kullanılmaya devam ediyor. Bu durum sonucunda Embed etiketi Html5 ile çok daha fazla kullanılmaya başlanmıştır.

a ve link etiketleri içersin de kullandığımız rev ve charset özellikleri de artık kullanılmamaktadır.

html etiketi içersin deki version özelliği de artık kullanımı sona ermiş özelliklerdendir.

Background özelliği ise Body etiketinin içersin de kullanımından kaldırılarak Css üzerinden kullanılmaya başlanmıştır.

Html5 ile gelen yenilikler ile daha önceden kullanıma açık olan fakat çok fazla kullanılmayan etiket ve özellikleri kaldırarak tüm bu etiket ve özelliklerin Css üzerinden kullanılmasını sağlamış durumdadır.

Blogger Hareketli Menü Eklentisi

Bir çoğumuz klişeleşmiş Menülerden sıkılmış durumdayız. Blogumuzu diğer bloglardan farklı gösterebilecek oldukça şık ve kullanışlı bir menüyü sizlerle paylaşmak istedim.Bir kaç Küçük değişiklik ile blogunuzda rahatça kullanabileceğiniz bir eklenti.

Öncelikle Blogger Kontrol Panelimizden Şablon >> HTML'yi Düzenle diyerek CTRL+F tuşu ile ]]></b:skin> kodumuzu aratıyoruz ve hemen üzerine aşağıdaki panelde bulunan CSS kodlarını yapıştırıyoruz.

Daha sonra Blogger Kontrol Panelimizden Yerleşim Diyoruz ve Gadget Ekle seçeneğinden HTML/JAVASCRIPT ekle diyerek yine aynı panaldeki HTML kodlarımızı ekliyoruz.

HTML kodlarımız içersinde bulunan '#' içersindeki # simgesinin yerine sayfa bağlantılarımızı eklediğimizde menümüz kullanıma hazır durumda olacaktır.

Demoyu görmek için Tıklayınız.

Blogger İletişim Formu

Blog okuyucularımızın bizimle mail yoluyla iletişim kurmaları önemli bir ayrıntıdır. Blogger için iletişim formu kurmak azda olsa bizleri uğraştırırdı ama artık blogger bize kendi iletişim formu gadget'i ile işimizi çok daha kolay ve hızlı halletmemizi sağlamakta.  

Artık farklı siteler aracılığı ile iletişim formumuzu oluşturmamıza gerek kalmadan blogger'ın bize sunduğu gadget sayesinde bir kat tıklama ile blogumuza iletişim formumuzu ekleyebiliyoruz. Bu işlemi yaparken hiç bir bilgi yada mail adresi girmemize gerek te kalmıyor. Blogger girişi için kullandığımız mail adresimize okuyucularımızın gönderdikleri mesajlar anında gönderiliyor.

Bu işlem için yapmamız gereken tek şey Blogger kontrol panelimizden yerleşim sekmesine tıklamak ve sonrasında Gadget eklemek. Açılan pencere içersinde Diğer Gadgetler sekmesine tıkladıktan sonra İletişim Formu Gatget'ini blogumuza ekliyoruz.

Blogger Açılabilen İçerik Menüsü

Blogger Açılabilen İçerik Menüsü sayesinde yazılarınızın uzun olması nedeniyle yaşadığımız sorunları biraz da olsun ortadan kaldırmamıza yardımcı olabilecek bir çalışma. Yazılarımızı bir kaç başlık altında daha az bir alan kullanarak toparlayabileceğimiz açılır bir menü ile okuyucularımızın textler arasında boğulmadan istediği başlığa hemen ulaşmasına yardımcı olabilecek basit bir dizini paylaşmak istiyorum.

BLOGUMUZA KODLARIMIZ EKLEMEK İÇİN;

Blogger kontrol panelimize giriyoruz, şablon sekmesinde HTML düzenle seçeğine tıklayıp kodlarımızı açıoruz.

CTRL+F tuşuna basarak ]]></b:skin> kodunu aratıp bulduktan sonra bu kodun hemen üzerine aşağıdaki kodları yapıştırıyoruz.

body { font: 13px Arial, Helvetica, sans-serif; color: #1e1e1e; } 
#container { width: 600px; margin: 20px auto; } 
#accordion { margin-top: 20px; } 
#accordion .item { width: 400px; height: 30px; /* height = total height of A child element */ overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } 
#accordion a { display: block; height: 20px; line-height: 20px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } 
#accordion p { height: 150px; padding: 5px; } 
#accordion div:hover { height: 180px; /* height = total height of A and P elements */ }
 #accordion div:hover a { border-bottom: 1px solid #ccc; font-weight: bold; }

Yukarıdaki korlarımızı ekledikten sonra; 

İçeriğimizin blogumuzun görmek istediğimiz herhangi bir yerinde olması için;

Blogger kontrol panelimizden yerleşim seçeneğini seçiyoruz, buradan Gadget ekle diyerek HTML/Javascript seçeneğinden aşağıdaki kodları ekleyerek blogumuza yerleştirmiş oluyoruz.

<div id="container"> 

<div id="accordion"> 

<div class="item"> 

<a href="#">Başlık - 1</a> 

<p>İçerik</p>

</div> 

<div class="item"> 

<a href="#">Başlık - 2</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 3</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 4 </a> 

<p>İçerik</p>

 </div> 

</div> 

</div>

Eğer yazı içersinde kullanmak istersek;

Yeni Yayın hazırlarken HTML kısmına bu kodları yapıştırmamız yeterli olacaktır.

Kırmızı ile yazılı yerlere başlıklarımızı;

Mavi ile yazılı yerlere ise içeriklerimizi eklememiz gerekmektedir.

HTML 5 İle Yeni Nesil SEO Çalışmaları

HTML 5 zaman ilerledikçe daha çok hayatımıza girmekte ve tasarımcılar daha fazla HTML 5 in getirdiği yenilikleri tasarımlarında kullanmaktadırlar. Dolayısıyla artık arama motorlarıda HTML 5 ile değişikliklere gidiyor. Arama motorlarının sitenizi tarayıp içeriklerinizi indexlemesinde değişiklikler olacaktır. Bu değişiklikler HTML 5 ile gelen yenilikler sayesinde ve bu yeniliklere göre oluşacak. HTML 5 öncesinde arama motoru örümcekleri sitenizin title, keywords gibi etiketlerinizi okuyarak tarama işlemi yapıyordu. HTML 5 ile bu değişikliğe uğrayacak görünüyor.

HTML 5 ile gelen bazı etiketlerin içeriğine göre arama motoru örümcekleri sitenizi okuyarak indexleme işlemini gerçekleştirecek. <article></article> etiketleri arasındaki metinlerimiz yazımızın içeriği olarak indexlenecektir. 

<header></header> etiketlerimiz arasında ki bilgilerimiz ise arama motorlarına sitemizin başlığını ve sitemizin tanımını okumasını sağlayacaktır.

En başta unutmamalıyız ki HTML 5 henüz tam olarak oturmuş bir yapıya sahip değil. Tüm internet dünyası HTML 5 in tam olarak oturması için kendilerini yenilemeye devam etmektedir.