Blogger ve Temel HTML eğitimi (bölüm 1)

HTML Çoğu blogger şablonunda kullanılan HTML etiketi ve CSS terimleri çeşitli nitelikler alabilir ve gerektiğinde farklı fonksiyonlar sunabilirler. Bu farkları anlamanız ve nerede, hangi türü kullanmanız gerektiğini bilmeniz, blog’uğunuzu tasarlarken çok işinize yarayacaktır.

 

Ayrıca JavaScript sayesinde daha gelişmiş fonksiyonlara ve görsel efektlerine sahip olmanız da mümkün. 

Yazılara başlamadan önce HTML’in ne olduğu hakkında biraz bilgi vermekte fayda var.

 

 

“HTML kısaca internnette gezdiğiniz websitelerini yorumlamak ve tarayıcınız vasıtasıyla bigisyarınızın ekranına getirmesini sağlayan anadildir”

 

Yani oluşturduğunuz websitesi ister bloggerda bir blog olsun isterse Facebook gibi karmaşık yapılara sahip olsun sonuç olarak görüntülenebilmesi için HTML diline ihtiyaç duyar.

 

Blogger yazılarınızı her hangi bir web tarayıcısı aracılığı ile  yeniden eskiye doğru ve üst üste yayınlayabilmeniz için oluşturuluş bir scriptir. Kullanıcılarının kendi bloglarını oluşturduktan sonra tasarımlarını özelleştirebilmelerini kolaylayştırak için özel şablonlar kullanır ve bu şablonlar temelinde diğer websitlerinden pekte farklı değildir ama bazı özellikler için çeşitli özel kodlar kullanılıştır.

 

HTML öğrenmeye başlamadan önce konumuzun daha anlaşılabilir olması için ilk etapta bir şablonda bulunan kod yapısını inceliyerek,hangi kodun ne olduğu ve ne işe yaradığını daha kolay bir şekilde anlayabileceksiniz.

 

..sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenleyolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyoruz.

 

Bu bölüm bizim daha önce Tasarım bölümünde şablon düzenleyicisini kullanarak yaptığımız ayarların kodlanmış olarak görebildiğimiz bölüm.

 

Burada bulunan kodları tanımanız her kodun nerede olduğunu bilmeniz blog’uğunuzu özelleştiriken çok işinize yarayıcağını unutmayın.

 

Seçtiğiniz şablon hangisi olursa olsun değişmeyecek bazı kodlar bulunuyor değişen kodlarda genellikle şablonunuzdaki sayfa başlığı,yazı bölümü, veya kenar çubuğuna ait kodlar bu kodları her tasarımcı kendisine göre adlandırabiliyor.

 

html1

 

bu bölümü ilk açtığınızda kodlarınızın en tepesinde  W3C’nin standartlarına uygun şekilde, HTML 4.01 olduğunu tanımlıyor ve sayfamızın bir HTML sayfası olduğunu belirtiyor sayfanın sonunda diğer tagler gibi </html> larak kapanıyor.

 

 

<head>

bu tag şablonumuzdaki en önemli iki temel koddan biridir bu kod arasına yazılan diğer kodlar tarayıcı tarafından okunur fakat sayfaya yansımaz.

 

yani biz bu bölüme HTML etiketleriyle oluşturduğumuz bölümleri şekillendirecek CSS kodlarını veya javascript kodlarını yazabiliriz.

 

head tagı yine diğer taglar </head> gibi kapatılmak zorundaddır.

 

Sayfamızı aşağı doğru kaydırmaya devam ettiğimizde <head> tagının hemen altında blog başlığımıza ait kodlar bulunuyor.

html2 Buradaki kodlar ayarlar bölümünde bunan başlık ve açıklama olarak girdiğiniz bölümü blog’uğunuza yansıtmaya yarıyor.

 

Ayrıca bu başlığı arama motorları ile daha fazla nasıl uyumlu hale getirebileceğiniz hakkında birde yazı paylaşmıştık.

 

Konuyu fazla dağıtmadan diğer kodlara göz atmaya devam ediyoruz.

<b:skin> etiketiyle başlayıp </b:skin> etiketiyle biten bölümdede blog’uğumuzun CSS kodları bulunuyor .

 

Buradaki CSS kodları ve anlamları ayrı bir yazı konusu olduğu için ona daha sonra Temel CSS eğitimi adlı yazımızda değineceğiz.

html3

Yinede burada bazı kodlardan bahsetmekte fayda var <b:skin> etiketinin hemen altında yer alan kod kullandığımız şablonun Minima olduğu ve tasarımının blogger timine ait olduğu gibi bilgilerin yer aldığı imza.

 

html4

 

İmzamızın hemen altındada /* Variable definitions’la başlayıp yıldızla  */ biten bölümdeki kodlarda daha önce Şablon Tasarımcısı’nı kullanarak blog’uğunuzun arka plan rengi, link rengi, yazı başlıklarının boyyutu gibi yaptığımız bazı değişikliklerin uygulanabilmesini sağlayan kodlar bulunuyor .

html5

 

/* Use this with templates/template-twocol.html */  başlayıp </b:skin> tagıyala biten bölümde bizim müdhallerde bulunup blog’uğumuzun genel tasarımını değiştirebileceğimiz CSS kodları bulunuyor yukarıda da belirtiğim gibi bu bölümde bulunan kodları farklı bir yazıda inceliyeceğiz.

html6

 

Head tagıyla başlayıp içine aldığı kodları tanıtarak </head> tagımızı kapattığımız bu yazımız ile şablonumuzda yer alan kodları incelemiş olduk bundan sonra yazımıza başlığını veren yani bizim sayfalara yansımasını istediğimiz divler, claslar,linkler kullanarak oluşturacağımız  bölümlerin yer alacağı  <body> ile  bir sonraki yazımızda devam edeceğiz.

 

Tabi biz diğer yazımızı hazırlarken siz yazımızda geçen bölümleri kendi şablonunuz üzerinde inceliyerek kendi şablonunuzu tanımaya başlayabilirsiniz.

Paylaş !

31 yorum:

  1. Faydalı bir içerik olmuş, emeğinize sağlık.

    YanıtlaSil
  2. Evet gerçekten çok faydalı olucağı kesin,özelliklede yeni başlıycak olanlar için...

    YanıtlaSil
  3. yorum formunu özelliştirmeyle ilgili yazı yazmıştınız."dedi ki" diyor mesela nasıl kaldırıcaz onu sizinki gibi yorum formu nasıl yapılır arada boşluk istemiyorum mesela iki yorum arasında resim olmasada olur css ye değenirken bunları anlatırsanız çok güzel olucak.

    YanıtlaSil
  4. Hocam ellerinize sağlık.Benim bir sorum olacaktı , sizinde sitenizde bulunan İletişim formunu bende kendı bloguma nasıl ekleyebilirim.

    YanıtlaSil
  5. Root
    Konuları daha yeni anlatmaya başladım ve bunu ön hazırlık olarak kabul et ..

    İlerleyen günlerde ek dökümanlarla birlikte(HTML Terimleri Sözlüğü,CSS Terimleri sözlüğü) zamanla yapmak istediklerini kendin yapabileceksin..

    YanıtlaSil
  6. Selamlar, yorumlarda site yada adınızın bağlantısını veren, küçük bir kod vardı ama şimdi bulamadım, acaba benmi yanlış hatırlıyorum. Yada biliyorsanız yardımıcı olurmusnuz? Teşekkürler.

    YanıtlaSil
  7. Bahsettiğin konuyu anlayamadım .. Aşağıda profil seçin yazan yere tıkladığında Adını yazıp link ekleyebildiğin şekilde birşeymiydi?

    YanıtlaSil
  8. şöyle anlatayım, yani yorumu yazdıktan sonra "style...." falan gibi cod oluyor, sonra yorumu kayd et deyince, onaylandıktan sonra, bu kodun devamında ki, "adını yazdığın isim yada site adı" bağlantılı çıkıyor. Sizin blogtamı okudum böyle bir özelliği, başka bir yerdemi hatırlamıyorum, belki karıştırmışta olabilirim, ama blogger için "en iyi ip uçları" gibi bir konu içeriğinde geçtiğine eminim.

    YanıtlaSil
  9. gibi, codu işleme alıyor diye büyük harfle yazdım.

    YanıtlaSil
  10. yok onuda alıyor, yazdığım codlar çıkmıyor yorumdan, neyse siz tahmin etmişsinizdir.

    YanıtlaSil
  11. Hobibox
    Sanırım senin bahsettiğin konu yorum yaptığında yorumun altınada kendi blog'uğunun linkini bırakabileceğin kod imza yani..

    onu soruyorsan buradaki yazıda imza örneği diye geçen konu. nasıl yapıldığını bakabilirsin.

    http://bloggermodifiye.blogspot.com/2010/10/blogugunuza-daha-fazla-ziyaretci.html

    YanıtlaSil
  12. çok faydalı oldu, teşekkürler.

    YanıtlaSil
  13. işine yaramasına sevindim fatma HTML konusunda çokta fazla zorlanmayacağını sanıyorum :)

    YanıtlaSil
  14. proje konum bloggerda widget oluşturmak,yazılarını görünce hazine bulmuş kadar sevindim :)daha senden yani yazılarından öğreneceğim çok şey var senin anlayacağı :)

    YanıtlaSil
  15. Bende baya bir hevesle başladığım o yazılara( sözde blogger için RSS den içerik çekerek, son yazıları resimli gösteren bir gadget yapıp blogger gadgetlarına gönderecektim) ama benden hızlı davrananlar olunca o yazılarda yarım kaldı. fakat öğrendiklerim sayesinde Google Chrome için RSS’den içerik çeken bir kaç eklenti yapmıştım (tabi güncellemem gerekiyor)

    Buradaki dökümanlar

    her ne kadar ingilizce olsa da boş vakitlerinde göz atarak eminim ki çok güzel işler ortaya çıkarabilirsin.

    0'lardan 1'lerden anlayan biri olarak , deneyimlerini paylaşmak istersen bu konun diğer meraklıları içinde iyi bir kaynak olur...

    YanıtlaSil
  16. sizin html eğitimlerini okudum ama bir türlü blog başlığımı küçültüp yazı stilini değiştiremedim.ben internetten bir şablon indirdim ve kodlarına blogger şablon ayarından müdehale edemiyorum.html kısmına gelip widget şablonlarını genişlettikten sonra hangi kodları değiştirmeliyim.

    YanıtlaSil
    Yanıtlar
    1. HTML'yi düzenle kısmına geldikten sonra düzenlemen gereken kodlar CSS kodları, h1 diye arattıktan sonra h1 etieketine sahip CSS kodlarını düzenlemen gerek.

      CSS kodlarını nasıl değiştireceğini bilmiyorsan buradaki ayrıntılı anlatımda yardımcı olabilir.


      Buda bonus++ olsun. CSS kodlarında h1 etiketi yer almıyorsa aşağıdaki kodları şablonuna ekleyerek işe başlayabilirsin.

      h1{
      font-size:20px;
      }

      Sil
  17. slm, yazılarımı anasayfa bu şekilde gösterebilmem mümkün mü..

    https://lh4.googleusercontent.com/-_ezIKmFg5DE/T1WZD5UrH-I/AAAAAAAAAkw/DJzGTHfDveQ/s612/23.jpg

    YanıtlaSil
    Yanıtlar
    1. kasttetiğin yazıları kısaltıp kısa bir özetini yayınladıktan sonra devamını oku şeklinde bir bağlantı vermekse http://www.bloggermodifiye.com/2010/01/bloggerda-devamn-oku-ozelligini_05.html

      Sil
    2. şu şekilde https://lh3.googleusercontent.com/-_qLE4PXmLIA/T1bHKwqZDUI/AAAAAAAAAlI/JKyvYtW2yZk/s576/1.jpg ilk verdiğim linkteki gibi çerçeve yapmak istiyorum..

      Sil
    3. yazıları yazdığın bölümün css kodlarını bulup border: 1px solid #ccc; diye bir kod ekleyeceksin ..

      Örnek:
      bunlar genlllikle her şablonda post bölümünün kodları olur tabi bu bölümün içinde başka kodlarda olabilir.
      .post {

      sen bu kodlara yukarıdaki border'ı eklersen yazı bölümünü de çerçeveye almış olursun.
      .post {
      border: 1px solid #ccc;

      }


      çerçevenin rengini koddaki #ccc belirler şuan çerçeve gri renkte ama sen oradaki ccc değiştirerek farklı bir renkte yapabilirsin.

      CSS ile daha fazla neler yapabileceğine de burada ki ayrıntılı yazıdan göz atabilirsin..

      Sil
    4. yaptım fena gözükmüyor, bunu daha fazla özelleştirebilme imkanım var mı? http://uydublog.tk/

      Sil
  18. Bütün bu paylaşımlarınızı böylesine açıklayıcı şekilde yayınladığınız için çok teşekkürler. Blog sayfama bumerang şablonu yerleştireceğim ancak bunun kodunu nereye yapıştıracağımı bilmiyorum Bu konuda yardımcı olabilirseniz çok sevinirim.

    YanıtlaSil
    Yanıtlar
    1. Bumerang kodunuzu kopyaladıtan sonra HTML/Javascript gadget olara eleyebilirsiniz burada da ayrıntılı bir anlatımbulunuyr.

      http://www.bloggermodifiye.com/2010/01/bloggera-gadget-eklemek.html

      Sil
  19. hocam benim tek eksiğim googleda bloğumun ana sayfası ve istediğim kategorilerin çıkmasını nasıl sağlayabilirim.Teşekkürler şimdiden

    YanıtlaSil
  20. benim html olarak tasarlanmış tasarımım var içinde slider filanda var bunu blogger'a göre editlenmesini ve tüm telif haklarını korumak istiyorum nasıl yapabilirim ?

    YanıtlaSil
  21. Merhaba, Bumerang ile ilgili bir sıkıntım var. blogumda rss yi aktif olarak kullanıyorum fakat bumerang ısrarla rss url sinin bana ait olmadığını belirtip bağlantıyı yapmıyor. nasıl çözebilirim? yardımcı olabilir misiniz?

    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