CSS (Cascading Style Sheets) türkçe anlamıyla Stil Şablonları, web sitelerine sitil vermek ve tasarımını güzelleştirmek için kullanılan bir markup dilidir. Sayfaların ve sayfa öğelerinin renk, boyut, font, konum gibi özelliklerini belirlemek için kullanılırlar. Web sitelerini çekici kılan en temel unsur CSS’dir. CSS olmadan HTML ile web siteleri oluşturulabilir ancak görsel açıdan CSS’in verdiği özellikleri elde etmek mümkün değildir.
Web sitesi tasarlayan ve kullanan herkesin kendi sitesini diğerlerinden farklılaştırmak için CSS kullanmayı hedeflemektedir. CSS bir programlama dili olmadığından öğrenilmesi zor olan bir dil değildir. Temel birkaç CSS özelliğini öğrenerek blogunuz için dilediğiniz stil ve tasarımları oluşturabilirsiniz.
Blogger bloga CSS eklemek için temel olarak 5 farklı yöntem bulunmaktadır. Bunlardan herhangi birini veya birkaçını seçebilir ve bu yöntemleri kullanarak CSS kodlarını tüm siteye yada sitenin belli elemanlarına uygulayabilirsiniz. Bu elemanlar “sidebar”, “footer, “gadget” veya tek bir “yayın” (makale) olabilir veya bir sayfanın tümü olabilir.
Şimdi maddeler halinde CSS’i nasıl uygulayabileceğimizi görelim:
1. Blogger tema tasarımında “CSS Ekle” kutusuna CSS kodlarını ekleyebilirsiniz
Bloga yeni başlayanlar için en uygun seçenek olarak bu yöntemi kullanmaktır. Herhangi bir hata alma endişesi olmadan CSS kodlarını buradan blogger temasına uygulanabilir. Bu ekrana ulaşmak için şu aşamaları takip edin:
Blogger Yönetim Ekranı>>Tema>>Özelleştir>>Gelişmiş>>Css Ekle
Blog tema kodlarının doğrudan içine CSS kodlarını ekleyebilirsiniz.
Blogger Yönetim Ekranı>>Tema>>HTML’yi düzenle
Bu adımları izledikten sonra açılan yüzlerce satır kod arasından, CTRL + F ile bulduğunuz ]] ></b:skin> kod ifadesinin üstüne uygulamak istediğiniz CSS kodunu yapıştırarak blogunuzun neredeyse her tarafını değiştirebilirsiniz. Stil Şablonlarının (CSS) bir tag adıyla başladığını ve { } parantezlerinin içine yazıldığına dikkat edin. Aşağıdaki örnekte olduğu gibi:
body {
font-family: ”Arial”,Serif;
background: #ffffff;
color: 123456;
border: solid 2px black;
}
|
Kodları bu şekilde ekledikten sonra önizlemesine bakın ve ardından kaydedin. Bu ekranda CSS kodlarını ayrıca <style></style> tagları arasına da yerleştirebilirsiniz.
3.Gadgetlerin içine CSS kodlarını yerleştirmek
Bu yöntem, hata yapma riskinizin olmadığı bir yöntemdir.
Blogger Yönetim Ekranı>>Yerleşim>>Gadget Ekle>>HTML/JavaScript
Açılan ekrana aşağıdaki gibi kodları yerleştirin.Temanızın yerleşim ekranında sitenizin stil vermek istediğiniz footer, sidebar, header gibi herhangi bir bölgesine aşağıdaki gibi kodları uygulayın.
<style type="text/css">
/* CSS kodlarını buraya yapıştırın */
</style>
|
4. Link vererek harici CSS dosyasını bloga eklemek
Blog temasına HTML kodlarına CSS eklemek gibi bu yöntem de bloggerların zorlandığı bir yöntemdir. Başka bir yerde barındırılan CSS dosyasını çağırma mantığına dayanan bu yöntem için aşağıdaki adımları izleyin.
- Temanızın “HTML’yi düzenle” ekranını açın ve <head> tagının altına ya da </head> tagının üstüne, harici css dosyasına bağlantıyı sağlayan aşağıdaki kodları yapıştırın. Bu şekilde girilen URL ile bir web sitesinde uygulanan CSS dosyasını blogunuza uygulamış olursunuz.
<link type="text/css" rel="stylesheet" href="harici-dosya-adı.css">
5. Sayfalara ya da blog yayınlarına (makalelere) CSS eklemek
Bu yöntemle sayfalara veya sadece belirlemiş olduğunuz blog yayınlarınıza CSS verebilirsiniz. Yayın ekranındaki HTML sekmesinden stil vermek istediğiniz elemanı belirleyip aşağıdaki kodda olduğu gibi CSS kodlarını uygulayabilirsiniz. style özelliği CSS etiketidir ve birçok HTML etiketinde kullanarak stiller oluşturabilirsiniz.
<span style="CSS kodları buraya">makalenizin içeriği buraya </span>
Belirli bir yayın şablonu oluşturup CSS kodlarını uygulayarak daha sonraki yazılarınızda da bu şablonu kullanabilirsiniz.
Hiç yorum yok:
Yorum Gönder