Blogger için Temel CSS eğitimi

CSS yani en basit haliyle, web sitelerinde ki elemanlara stil eklemek için kullanılan bir tanımlama denebilir.
cod

 

Biraz daha ansiklopedik tanımlamaların dışına çıkarsak bundan önceki bölümüzde anlattığımız HTML ile DİV kullanarak oluşturduğumuz bölümlerin arka plan rengi,yazı rengi,kenar boşlukları gibi , daha bir çok tanımlamayı CSS ile yapıyoruz.

Sırası ile Blogger Kumanda paneliŞablon  yolunu takip ederseniz, blog’unuzun tasarımını değiştirebileceğiniz , kullandığınız şablon’u bilgisayarınıza yedekleyebileceğiniz veya blogger’ın hazır şablonlarından birini seçebileceğiniz sayfa sizi karşılayacaktır.

 

HTML’yi düzenle yazan butona bastığınızda , diğer tüm bölümlerde ve şablon düzenleyicisini kullanarak yaptığınız değişiklikleri kodlanmış olarak görebildiğiniz bir modül açılacaktır.

 


css-kodları

 

Klavyenizdeki CTRL ve F tuşuna aynı anda basarak açılan arama formunda <b:skin> terimlerini aratın, bulduğunuz bu kod ile başlayıp </b:skin> ile biten tüm kodlar blog’unuzun CSS kodları oluyor.(daha fazla ayrıntıyı ilk yazımızda bulabilirsiniz.)

 

 

 

Hangi bölümü düzenlemek isterseniz o bölümün kodlarını bulup , kulaklı parantez {  } içerisine alınan kodlar üzerinde değişiklikleri uygulayabilirsiniz.

 

2012-01-18_193617

 

Aşağıda bulunan kodlarda tasarımınızı özelleştirirken, en sık değişiklik yapmaya ihtiyaç duyacağınız kodlardan bazıları. Bu kodları inceleyerek kendi şablonunuz üzerinde uygularsanız size daha fazla fikir verebileceği gibi pratikte kazandıracaktır.

 

Kodlar

Örnekler

Renkler(color)

color:blue; Bu metin mavidir.
background:yellow; Buda  sarı renkli bir arka plana sahiptir.

Burada çok sık kullanılan renkler (mesela kırmızı, yeşil, sarı) gibi renkleri İngilizce isimleri ekleyebilir  ya da daha büyük bir renk aralığı (örn. # 0033AA) için onaltılık kodları kullanabilirsiniz.

  <<-- On altılık renk kodlarını görebilmek için  tıklayın. .

Borders(kenarlık,sınır çizgisi)
border:solid 1px red;
Bu metnin kırmızı renkli  bir sınırı vardır.

Bir sınır çizgisi, düz(solid), noktalı(dotted) veya kesik(dashed) çizgilerden oluşabilir. Burada genişliği piksel (px) olarak belirtilir. Rengiyse İngilizce adı veya onaltılık kodlar şeklinde olabilir. Sadece bir tarafta sınır çizgisi içinse , border-top(yukarıda), border-bottom(altta), border-right(sağda), ya da border-left(solda) şeklinde kullanılır.

Fontlar
font-family:"Times New Roman",Serif; This is in a serif font.
font-family:Verdana,Sans-Serif; Bu sans-serif fonttur.

Yazı tipini belirleyebilmek için bir liste oluşturabilirsiniz. Bu sayde blog ziyaretçilerinizin bilgisayarlarında olan fontlara göre yazıların şekillerini belirtir.

font-size:18px; Bu metin 18 piksel büyüklüğünde

Yazı boyutlarını px olarak belirlediğiniz değerle oynayarak düşürebilir veya yükseltebilirsiniz.

font-weight:bold; Bu metin kalındır.

Seçimleri kalın(bold) veya normal olarak yapabilirsiniz.

text-decoration:underline; Bu metin altı çizili.

Metinlerinize çeşitli efektler uygulayabilirsiniz. underline(altı çizili), line-through(üstü çizili),

text-align:right;
Bu metin sağa hizalanmış.
Hizalama sağ(right), sol(left) ya da justify(ortalamak)

Kenar boşlukları(margin) ve İçerden(padding) boşluk vermek

margin:15px;
Bu çizginin etrafında 15px boşluk vardır.
padding:15px;
Bu alanda 15px boşluk vardır.

Kenar boşluğu(margin) veya  alanı içinde boşluk miktarını belirtmek için padding kullanılır(Sınır burada sadece örnek olması içindir.)

 

Sınır olduğu gibi, margin-left(soldan), padding-top(yukarıdan),vs  tek seferde de ayarlayabilirsiniz, ayrıca   bir tarafı belirtmek margin: 1px 2px 3px 4px; sırayla  üst, sağ, alt sol olarak ta ayarlayabilirsiniz



Son olarak CSS konusunda kendisini daha fazla geliştirmek isteyenler için birde kaynak belirtelim.

Fatih hayri oğlu’nun not defteri CSS, XHTML ve Javascrip konusunda kendini geliştirmek isteyenler için  bulunmaz bir kaynak.
Ayrıca Fatih Hayrioğlu'nun PDF formatında hazırladığı  CSS’e başlangıç kitabı’nı bilgisayarınıza indirerek  incelemenizi de tavsiye ederim.
Paylaş !

14 yorum:

  1. İnternetteki kaynalardan bayadır çözemediğim bi olaydı şimdi yaptım oldu teşekkürler

    YanıtlaSil
  2. Gerçekten çok yardımcı oluyorsunuz bizlere öncelikle bunu belirtmek isterim. Hocam ben bu temayı yükledim ancak üst tarafdaki kayan resimler çıkmadı sorun ne olabilir acaba
    http://www.dhetemplate.com/2012/01/holiday-travel-blogger-template.html

    Şablonlara HTML/JavaScript olarak "Featured Posts Coolbthemes" başlıklı bir bölüm geldi ancak içi boş buraya kod mu yazmalıyız. Yoksa sideshow ile alakalı bir durummu, cevabınızı bekliyorum

    YanıtlaSil
    Yanıtlar
    1. resimlerin bağlantıların linklerini yazmalısın..

      Sil
  3. Tayfun bey,
    Blog açıklamamın header resmimin üzerinde görünmesini önermiştiniz.Tasarım sayfasındaki üst bilgi bölümünden header resmimin yerleşim şeklini "başlık ve tanımın arkasında" olarak işaretlediğimde blog başlığımın yazısı resmin en solunda gözüküyordu. Şimdi sizden text align komutu ile yazıyı ortalamayı öğrenmiş oldum.
    Biraz daha değişiklik yapıp şu anda header resmimde gözüken yazının tam üstüne gelecek şekilde bir ayarlama yapmak mümkün müdür? Eğer bunu yapabilirsem header resmimdeki yazıyı photoshopta silip yerine h1 taglı blog başlığımı kullanmak istiyorum.

    YanıtlaSil
    Yanıtlar
    1. Nalan hanım üst bilgi olarak resim kullansanız da h1 tagı arama motorları tarafından görünür, ama siz yinede ben h1tagını kullanmak istiyorum diyorsanız, text-align stilini silip margin vermeyi deneyin örnek:
      .Header h1 { margin:0 0 0 20px;}

      soldan 20px'lik uzaklaştırır bu şekilde 20px değeriyle oynayarak soldan istediğiniz kadar boşlu verebilirsiniz.

      Sil
    2. .Header h1 { margin:0 0 0 300px;}
      .Header h1 { padding-top:100px;} komutlarıyla tam da istediğim konumu elde ettim. Şimdi yazı fontumu değiştirmeyi deneyeceğim, resimdeki yazı karakteri monotype corsiva, sanırım bu fontu kullanamam değil mi?

      Sayenizde ilk css bilgilerimi edinmiş oldum. Hem makalelerinizdeki anlatım tarzı hem de yorumlarla gelen sorulara verdiğiniz cevaplar, konu ile ilgili hiç bir bilgisi olmayan kişilerin dahi anlayabileceği şekilde net. Tekrar teşekkür ederim emekleriniz için.

      Sil
    3. bu font gurubunu veya her hangi bir font grubunu kullanabilirsiniz fakat şöyle bir sakıncası var bu fontlar sizin bilgisayarınızda olduğu için sorunsuz olarak görüntülenir ama blogunuzu ziyaret edenlerin bilgisayarında bu fontlar bulunmuyorsa muhtemelen arial olarak görüntülenir.

      şöyle bir şey yapabilirsiniz googlenin bu tarz sorunları ortadan kaldırmak için hazırladığı http://www.google.com/webfonts'an kullanmak istediğiniz fontlara yakın olan bir fontu seçip kodlarını şablonunuza eklerseniz tüm bilgisayarlarda sorunsuz olarak görüntülenir.

      Not:Google font apiden kodları alırken kodu hatalı olarak verebiliyor siz bir deneyin yapamazsanız istediğiniz fontun adını yazın kodlarını ben düzeltirim.

      Sil
    4. Yaptım çok sağolun:)

      Sil
  4. Merhabalar,size boşluklarla ilgili bir sorum var yanıtlarsanız memnun kalırım,Blog'a çerçeve kodu ekledim ve yazıları çerçeve içerisine aldım ana sayfada her şey yolunda gözüküyor fakat yazının içerisine girildiğinde çerçeve ile yazılar sıfırlanmış şekilde bitişik gözüküyor sağdan ve soldan boşluk bırakmam için hangi değerleri girmem gerekiyor acaba?

    Sitemdeki bahsettiğim sorunu inceleyebilmeniz için blog adresimi yazıyorum.
    http://turkiyemodayazarlari.blogspot.com
    Yardımlarınızı bekliyorum,İyi çalışmalar...

    YanıtlaSil
    Yanıtlar
    1. Merhaba..

      Sırası ile Kumanda Paneli ➜ Şablon ➜ HTML’yi Düzenle ➜ Devam et yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle gidin.


      Klavyenizdeki Ctrl ve F tuşuna aynı anda basarak açılan arama formunda ]]> terimlerini aratın ve hemen üstüne gelecek şekilde aşağıdaki kodları ekleyin.

      .post{
      padding-top:5px;
      padding-right:5px;
      padding-bottom:5px;
      padding-left: 5px;
      }


      eklediğiniz kod sırası ile yukarıdan,sağdan,aşağıdan ve soldan 5px değerinde boşluk verecektir siz isterseniz 5px değerini yükseltip azaltıp boşluğu artırabilir veya azaltablirsiniz,

      zaten hangisinin hangi yönde boşluk verdiğinide anlamışsınızdır(yukarıdan aşağıya doğru saat yönünde)

      Sil
    2. aratacağınız kod çıkmamış oda şöyle ]]></b:skin>

      Sil
  5. Tekrar Mehabalar,verdiğiniz kodları direk eklediğimde ana sayfada gözüken kısa postlara kenar boşluğu bırakıyordu, benim sorunum ise devamını oku butununa tıklandığında açılan postun diğer bölümündeki çerçeve sorunuydu hocam,verdiğiniz yolu izlediğimde ilk etapta sorunu çözemedim fakat kodlarda ufak bir değişiklik yaparak halletmiş oldum

    Değişikliği .post-body { şeklinde yaparak sorunumu çözdüm mantığı anlattığınız için teşekkür ederim.
    Saygılar iyi çalışmalar.

    YanıtlaSil
    Yanıtlar
    1. aslında verdiğim kodların işe yaraması gerekirdi, fakat özelleştirilmiş bir şablon olduğu için bloggerın kendi kodları görünmüyor veya şablonu tasarlıyan kendine göre tasarladığı için tam olarak kodlar denk gelmiyor olabilir.

      yaptığın işlemde doğru fakat tamamen ana sayfadaki gibi görünmesi için başlıklar içinde padding değeri atamalısın başlıklar kenar çizgisi ile bitişik kalmış.

      bu görsele bakarakta hangi kodlar üzerinde işlem yapman gerektiğini daha rahat görebilirsin.

      Sil
  6. Merhabalar. Sitem hakkında düşünceleriniz nelerdir lütfen paylaşın. Buyrun; http://sakalladam.blogspot.com.tr

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz