Blogger Tema Şablonu Kodlama

Bu konuyla alakalı 2 tane yazı yazmıştım ancak o yazıları kaldırdım. Daha detaylı olacak bir makale yazmaya karar verdim. Umarım işinize yarar. HTML ve CSS bilginiz varsa konuyu çok rahat kavrarsınız.

Öncelikle Blogger'da blogun Şablon kısmına girerek HTML'yi Düzenle kısmına girelim. Blogger temamızın kodlarını bu kısımda yapacağız. Ben paarthurnax adlı bir blog oluşturdum ve temayı onun üzerine yapacağım. Sizde öğrenmek amaçlı bir blog oluşturun ve yaptıklarıma göre hareket edin.

Yukarıda olduğu gibi bulunan tüm kodları Tümünü Seç yaparak siliniz. Çünkü kodları baştan yazacağız. Artık sayfamız boş olduğuna göre aşağıdaki resimde olduğu gibi kodlarımızı yazalım.

Kodları yukarıdaki gibi yazdık. Şimdi Şablon'u Kaydet yapın ve kodlara tekrar bakın.

Kodlarda otomatik olarak bazı değişimler meydana geldi. Blogger temasının CSS kodları <![CDATA[ css kodu ]]> olacak şekilde yazılır. <b:skin> etiketleri CSS kısmını oluşturur kısaca. <b:section> etiketi ise blog yapısını oluşturan temel etmendir. Eğer Yerleşim kısmına bakarsanız blog yapısının şu şekilde olduğunu göreceksiniz.

<b:section> içerisinde kullandığımız class kullanımı zorunlu olmamakla birlikte id kullanımı zorunludur. Aksi takdirde hata verecektir. showaddelement ise gadget eklensin mi eklenmesin mi anlamında yes ve no sorgusu yapar. Gadget eklenebilmesi için yes yazdık.

<b:section> yapımızı belli şekillere CSS ile verebilmek için ayrıca baslik class ı içerisine ekledik. Zaten örnek yaptıkça mantığıda anlayacaksınız.

Eğer Blog'u Görüntüle derseniz, boş bir sayfa ile karşılaşacaksınız o yüzden hadi o boşluğu blogun ismiyle dolduralım. Yerleşim kısmından header bölümündeki Gadget Ekle'ye tıklayın.

Sayfa Üstbilgisi gadgetini ekleyin ve kaydedin. Blog'u Görüntüle yaptığınızda blogunuzun isminin sol üst köşede yer aldığını göreceksiniz. Evet buraya kadar sorunsuz geldiysek çok iyi. Elbetteki ilk başta anlamak biraz zor olabilir ama mantık olarak çok basit. Her şey bir kalıptan ibaret. Blogumuzun ilk hali aşağıdaki şekilde.

Ancak biraz daha şekillendirebiliriz. Blogumun ortalanmasını istiyorum. O yüzden CSS kodunun yazılacağı kısıma .baslik seçicisi oluşturarak margin:auto; özelliği veriyorum. Genişlik olarak 1000px değeri veriyorum. Arkaplan rengini ise #CCC yaptım. padding ile iç taraftan blog ismine uzaklığı 10px olarak ayarladık.

Blogun geldiği hal ise şu.

Görüldüğü üzere baslik kısmının üstünde belli bir boşluk var. Bu boşluğu kapatmak için body seçicisi oluşturup margin:0; padding:0; özelliği veriyorum. Aşağıda olduğu gibi.

Blogu tekrar görüntülediğinizde o boşluğun kalktığını göreceksiniz. Şimdi bir tane üst menü yapalım. Ben CSS ve HTML olarak basit bir üst menü yazdım aşağıdaki gibi.

Bu kodlar menünün CSS kodu.

.ustmenu{
margin:auto;
width:1000px;
background:#CCC;
padding:15px;
}
.ustmenu ul{
margin:0;
padding:0;
}
.ustmenu ul li{
display:inline;
line-height:30px;
}
.ustmenu ul li a{
    text-decoration:none;
    color:#000;
    padding:11px;
    margin:10px;
    }

Bu kodlar ise menünün HTML kodları.

<div class="ustmenu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Yazılar</a></li>
<li><a href="#">Videolar</a></li>
<li><a href="#">Teknoloji</a></li>
<li><a href="#">İnternet</a></li>
<li><a href="#">Bilim</a></li>
<li><a href="#">Tarih</a></li>
<li><a href="#">Astronomi</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

CSS kodunu cdata kısmında sonrasına ekleyeceğiz. HTML kodu ise resimde görüldüğü gibi eklenmelidir.

Blogumuzun görüntüsü aşağıdaki hali aldı.

Şimdi önemli kısıma gelmiş bulunmaktayız. İçerik kısmı section tanımlarken size vereceğim hazır kodu kullanmanız yeterli. Bu kısımda blog yayınlarımız görüntülenebilecek. Şimdi aşağıdaki kısa hazır kodumuzu resimde görüldüğü gibi ekleyin.

<b:section id='primary' class='content-inner' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
</b:section>

Elbette bu kodu icerik adlı oluşturduğumuz div class'ının içerisine ekledik. Bu sayede CSS kodlarını kullanarak içerik kısmına gerekli şekli ve düzeni verebiliriz. Aşağıdaki css kodu ile gerekli şekli veriyoruz ve blogumuzu görüntülüyoruz.

.icerik{
          margin:auto;
          width:1000px;
          padding:14px;
          background:#fff;
          border-left:1px solid #ccc;
          border-right:1px solid #ccc;
         }

Artık blog içerisinde bulunan yayınlarımızı gösterebiliriz. Hiç hızımızı kesmeden footer kısmını yapalım. alt adında bir div class'ı oluşturuyoruz ve içerisine section yapısını yazıyoruz. İcerik classından sonra ekleyin.

<div class="alt">
    <b:section id="footer" class="footer" showaddelement="yes"></b:section>
</div>

Yerleşim kısmına baktığınızda footer katmanının bulunduğu göreceğiz. Bu kısımın CSS kodlarını aşağıdaki gibi oluşturdum.

.alt{
     width:1000px;
     height:60px;
     margin:auto;
     padding:14px;
     background:#fff;
     border-left:1px solid #ccc;
     border-right:1px solid #ccc;
     border-bottom:1px solid #ccc;
     }

Görüldüğü gibi blogger tema kodlama sanıldığı kadar karmaşık bir yapıya sahip değil. Elbette çok şey yapılabilir ama temel olarak bunları bilmemiz önemlidir. Yaptığım örnek oldukça basit bir yapıya sahip ama daha gelişmiş ve responsive temalar dahi yapabilirsiniz.

C# Programdan Çıkış Kodu

Console Application uygulamalarında kullanılabilecek çıkış komutu, aşağıdaki koddur.

Environment.Exit(0);

C# İdeal Kilo Hesaplama Programı

Kullanıcıdan boy, yas, kg, cinsiyet bilgileri istenir. Kullanıcı erkek ise farklı değilse kadın cinsiyetine göre ideal kilo hesabı yapılır.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ders
{
    class Program
    {
        static void Main(string[] args)
        {
            int boy, yas, kg, cinsiyet;
            double ik, fark;

            Console.Write("Yaş = ");
            yas = Convert.ToInt32(Console.ReadLine());

            Console.Write("Boy = ");
            boy = Convert.ToInt32(Console.ReadLine());

            Console.Write("Kilo = ");
            kg = Convert.ToInt32(Console.ReadLine());

            Console.Write("Cinsiyet 1-Erkek 2-Kadın = ");
            cinsiyet = Convert.ToInt32(Console.ReadLine());

            if (cinsiyet == 1)
            {
                ik = (boy - 100) * 0.9 + (yas / 10);
            }
            else {
                ik=(boy-100)*0.9+(yas/10);
            }
            fark = Convert.ToInt32(Math.Round(Convert.ToDecimal(ik))) - kg;

            if(fark>0){Console.WriteLine("{0} Kilo Almalısınız", fark);}
            else if(fark<0){Console.WriteLine("{0} Kilo Vermelisiniz", fark);}
            else { Console.WriteLine("Tebrikler;"); }
            Console.ReadKey();
        }
    }
}

C# Sayı Okuma Programı

1'den 999'a kadar olan sayıların okumasını yapan program kodu.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ders
{
    class Program
    {
        static void Main(string[] args)
        {
            int sayi, yuzler, onlar, birler;
            Console.WriteLine("Sayi degeri (1-999) = ");
            sayi = Convert.ToInt32(Console.ReadLine());
            yuzler = sayi / 100;
            sayi = sayi % 100;
            onlar = sayi / 10;
            birler = sayi % 10;
            if (yuzler == 1) { Console.Write("Yüz"); }
            else if (yuzler == 2) { Console.Write("İki Yüz"); }
            else if (yuzler == 3) { Console.Write("Üç Yüz"); }
            else if (yuzler == 4) { Console.Write("Dört Yüz"); }
            else if (yuzler == 5) { Console.Write("Beş Yüz"); }
            else if (yuzler == 6) { Console.Write("Altı Yüz"); }
            else if (yuzler == 7) { Console.Write("Yedi Yüz"); }
            else if (yuzler == 8) { Console.Write("Sekiz Yüz"); }
            else if (yuzler == 9) { Console.Write("Dokuz Yüz"); }
            Console.Write(" ");
            if (onlar == 1) { Console.Write("On"); }
            else if (onlar == 2) { Console.Write("Yirmi"); }
            else if (onlar == 3) { Console.Write("Otuz"); }
            else if (onlar == 4) { Console.Write("Kırk"); }
            else if (onlar == 5) { Console.Write("Elli"); }
            else if (onlar == 6) { Console.Write("Altmış"); }
            else if (onlar == 7) { Console.Write("Yetmiş"); }
            else if (onlar == 8) { Console.Write("Seksen"); }
            else if (onlar == 9) { Console.Write("Doksan"); }
            Console.Write(" ");
            if (birler == 1) { Console.Write("bir"); }
            else if (birler == 2) { Console.Write("iki"); }
            else if (birler == 3) { Console.Write("üç"); }
            else if (birler == 4) { Console.Write("dört"); }
            else if (birler == 5) { Console.Write("beş"); }
            else if (birler == 6) { Console.Write("altı"); }
            else if (birler == 7) { Console.Write("yedi"); }
            else if (birler == 8) { Console.Write("sekiz"); }
            else if (birler == 9) { Console.Write("dokuz"); }

            
            Console.ReadKey();
        }
    }
}

CSS Şekil Oluşturma

CSS'te kare, dikdörtgen, üçgen, daire ve daha fazlasını çizebilmek için araştırma yaptım. Yaptığım araştırma ve uygulamaları sizlere anlatmak ve göstermek için bu yazıyı yazmak istedim. İşe koyulalım.

Kare ve Dikdörtgen

Kare çizmek oldukça basit sadece bir div oluşturup height ve width değerlerini eşit olarak vermek yeterli. Aynı şekilde dikdörtgen çiziminde ise height ve width değerlerinin farklı olması yeterli.

#kare {
 width: 100px;
 height: 100px;
 background: gray;
}

Daire

Daire oluşturmakta kare oluşturmak kadar kolay. Eğer CSS'i biraz biliyorsanız radius özelliği size yabancı gelmeyecektir. Şimdi width ve height özelliğine 100px verdiğimiz bir div oluşturduk. Bu div'in width ve height değerlerinin yarısı olan 50px değerini border-radius değerine vererek daireyi oluşturabiliriz. 

Width ve height değerlerine ne verdiyseniz onun yarı değeri olacak şekilde border-radius değeri atamanız gerekir.

#daire {
 width: 100px;
 height: 100px;
 background: gray;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

Üçgen

#ucgen {
 width: 0;
 height: 0;
 border-left: 70px solid transparent;
 border-right: 70px solid transparent;
 border-bottom: 140px solid gray;
}

Ay

CSS ile istediğiniz her şeyi çizebilme imkanınız var ancak büyük bir uğraş ve düşünme eylemi gerektirdiği kesin.

#ay {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 gray;
}

Aşağıdaki linkten CSS ile oluşturulan diğer şekilleri inceleyebilirsiniz.

https://css-tricks.com/examples/ShapesOfCSS/

JavaScript ile HTML İçeriğini Değiştirme

HTML içeriğini değiştirmek için çeşitli metodlar vardır. Bunlardan birisi de document.getElementById() metodudur. Değiştirilecek olan HTML elementinin id'si yazılır ve innerHTML ile içeriğe yazılacak olan yazı yazılır.

Uygulama Kodu

<!DOCTYPE html>
<html>
<head>
<title></title>
<head>
<body>
<p id="yazi">Eski yazı içeriği</p>

<button type="button" onclick="document.getElementById('yazi').innerHTML='Yeni
yazı içeriği'">Tıkla</button>

</body>
</html>

Uygulama Önizlemesi

Eski yazı içeriği

JavaScript Tarih Saat Uygulaması

HTML sayfası içerisinde buton oluşturarak, p etiketi içerisine Date() fonksiyonu ile gelen veriyi getElementById() ile veriyi yazdırılacağı id çağrılıyor ve innerHTML ile yazı çağırılan yere yazdırılıyor.

Uygulama Kodu :

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<button onclick="getElementById('yazi').innerHTML=Date()">Tarih ve Saat</button>

<p id="yazi"></p>
</body>
</html>