Tema Dokümanı

Kurulum

Panel Üzerinden Kurulum

Blogger'a giriş yapın ve temanın kurulumunu yapacağınız blogu sol üstten seçin (Eğer sadece bir blogunuz varsa zaten seçilidir).
Sol menüden Tema'yı seçin.
Özelleştir butonunun sağındaki simgesine tıklayın ve açılan menüden Geri Yükle'ye basın.
Gelen uyarı ekranında Yükle butonuna basın ve size teslim edilen mia-glass.zip arşiv dosyası içerisindeki mia-glass.xml isimli tema dosyasını arşivden çıkararak seçin.
Ayarlarınızı kaydedin ve ön izlemede temanın görünümüne göz atarak özelleştirmelerinizi uygulayın.

Eğer blog ayarlarınız mobil görünüm için Blogger varsayılan temasını baz alıyorsa kurulumunu yaptığınız temanın görünümünü aktifleştirmek için aşağıdaki adımları takip edin.

Temayı yüklemek için girdiğiniz ekrandaki simgesine tıklayın ve açılan menüden Mobil Ayarları'na basın.
Açılan ekrandaki ayarı Masaüstü olarak belirleyin ve kaydedin.

Elle Kurulum

Blogger'a giriş yapın ve temanın kurulumunu yapacağınız blogu sol üstten seçin (Eğer sadece bir blogunuz varsa zaten seçilidir).
Sol menüden Tema'yı seçin.
Özelleştir butonunun sağındaki simgesine tıklayın ve açılan menüden HTML'yi düzenle seçeneğine basın.
Size teslim edilen mia-glass.zip arşiv dosyası içerisindeki mia-glass.xml isimli tema dosyasını arşivden çıkararak bir kod düzenleme editörüyle açın (Visual Studio Code, Notepad++, Sublime Text 3 vb).
CTRL + A klavye kombinasyonuyla temanın tüm kodlarını seçin ve CTRL + C ile kopyalayın.
Blogger üzerinde açtığınız kod ekranında CTRL + A ile tüm kodları seçin ve DELETE tuşuyla tamamını silin.
Aynı yere CTRL + V ile daha önce kopyalamış olduğunuz yeni temanın kodlarını yapıştırın.
Kaydet tuşuna basın.

Lisans Kurulumu

Tema kurulumunu sağladıktan sonra geliştirici tarafından size iletilen lisans anahtarını temaya tanımlamalısınız. Bu, temanın orijinal sürümünün kontrolü için gereklidir.

Blogger paneliniz üzerinden Düzen sekmesine gidin.
İlgili sayfada yer alan "Lisans Anahtarı" isimli widgetın düzenleme ekranını açın.
Lisans anahtarınızı doğru şekilde ekleyip kaydedin.

İlgili lisans widgetını silmeyin, gizlemeyin ya da kaynak dosyalarını değiştirmeyin.

Özelleştirmeler

Meta Etiketleri

Blogger üzerinde Ayarlar ekranını açın ve "Temel" başlığı altındaki Başlık kısmına sitenizin arama motorlarında görünecek adını girin.
Açıklama kısmına sitenizin içeriği ile uyumlu birkaç cümlelik tanım girin.
Aynı sayfada Meta Etiketler kısmına gelin ve "Arama açıklamalarını etkinleştir" seçeneğinin aktif olduğunu doğrulayın. Alttaki satıra bir arama açıklaması girin.

Varsayılan Renkler

Varsayılan renkleri kendinize göre uyarlamak için tema ayarlarında HTML'yi düzenle kısmına gelin.
Tema kodlarının yer aldığı alana bir kez tıklayın ve CTRL + F klavye kısayoluyla şunu aratın: :root.

CSS kodları içerisinde yer alan tüm renk tanımlarını dilediğiniz gibi değiştirin. Örneğin:

:root {
    --primary-color: #00D499;
    --body-text: #2E3A59;
    --bg-color1: #CBD1E6;
    --bg-color2: #EFC3BB;
    --main-radius: 30px;
    --font-title: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;
}

"Poppins" ve "Inter" fontlarını siteye çektiğiniz başka fontlar ile değiştirebilirsiniz.

Tarih ve Zaman Damgalarıisteğe bağlı

Temaya uygun varsayılan tarih ve zaman formatını değiştirmek için Blogger blogunuzda Ayarlar kısmını açın.
"Biçimlendirme" başlığı altında yer alan ayarları aşağıdaki gibi değiştirin:
```
Saat dilimi                   : (GMT+03:00) Türkiye Saati – İstanbul
Tarih başlığı biçimi          : 01 Ocak 2023
Zaman damgası biçimi          : 1/01/2023 10:50:11 ÖS
Yorum zaman damgası biçimi    : 01 Ocak, 2023 22:50 
```
Tema kodları içerisinde tarihlere elle formatlama uygulanmıştır. Bu kısımlardaki format değişiklikleri için tema kodları ekranında CTRL + F klavye kısayoluyla şunu aratın:
'format(data:post.date, "dd MMMM YYYY")'Kalın olarak işaretlenen yerde özel formatlandırmanızı belirtin.

Indexteki Sayfa Başlıklarıisteğe bağlı

Indexe düşen sayfaların tanımlarını değiştirmek için tema kod düzenleyicisini açın.
Kod ekranına bir kez tıklayın ve  terimini aratın.

Aşağıdaki kod dizininde kalın işaretlenen bölümleri kendi tanımlarınızla değiştirin:

<b:if cond='data:view.isMultipleItems'>
    <b:if cond='data:view.isHomepage'>
      <!--::Homepage title-->
      <title><data:blog.title.escaped/> <b:if cond='data:blog.metaDescription'>- <data:blog.metaDescription.escaped/></b:if></title>
      <b:elseif cond='data:view.search.query'/>
      <!--::Search title-->
      <title><data:messages.search/>: <data:view.search.query/></title>
      <b:elseif cond='data:view.search.label or data:view.isArchive'/>
      <!--::Label title-->
      <title><data:blog.pageName.escaped/> & <data:blog.title.escaped/></title>
      <b:else/>
      <title>Blog & <data:blog.title.escaped/></title>
    </b:if>
    <b:if cond='data:view.search and !data:view.search.label and !data:view.search.query and !data:view.isArchive'>
      <!--::Browse title-->
      <title>Keşfet & <data:blog.title/></title>
    </b:if>
    <b:elseif cond='data:view.isError'/>
    <!--::Error title-->
    <title>404: Sayfa Bulunamadı</title>
    <b:else/>
    <!--::SingleItem title-->
    <title><data:blog.pageName.escaped/> & <data:blog.title.escaped/></title>
  </b:if>

Widget Düzenlemeleri

Temanın sağ ve sol sütununda yer alan widgetlara kendi içeriğinizi eklemek ya da özelleştirme uygulamak için Düzen sekmesini açın.
Açılan ekranda düzenlemek istediğiniz widget için simgesine tıklayın ve içeriğini girin.
İlgili bölümde size uygun bir alana yeni bir widget yerleştirmek için Gadget ekle bağlantısına tıklayın.
Açılan pencereden bir widget seçin ve kurulumunu tamamlayın.

Kısakodlar & Diğer

Yazı İçi Kısakodlar

Kısakodların kullanımı için yazı oluşturma ekranında simgesine tıklayın ve açılan menüden HTML görünümü'nü seçin. İlgili kodları bu görünümde ekleyin.

Alıntı blockquote

Kod:

<blockquote class="mia-alinti">
  Bu bir alıntı metni örneğidir.
  <cite>Lorem ipsum</cite>
</blockquote>

Ön izleme:

Bu bir alıntı metni örneğidir — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus lorem id dictum euismod. Phasellus et mi dapibus, pretium mi a, rutrum sem. Suspendisse velit ante, lobortis eu purus sit amet, bibendum porta mauris. Lorem ipsum

Düğme button

Kod:

<a class="btn" href="#">Buton #1</a>

Ön izleme: Buton #1

Farklı buton (düğme) görünümleri için ek sınıf olarak şunlardan birini ekleyin: fill, soft, outline.

Örnek Kullanımlar     : <a class="btn fill" href="#">Buton #2</a>
                        <a class="btn soft" href="#">Buton #3</a>

Ön izleme: Buton #2 Buton #3

Liste list

Kod:

<ul class="mia-liste">
  <li>Liste öğresi #1</li>
  <li>Liste öğresi #2</li>
  <li>Liste öğresi #3</li>
  <li>Liste öğresi #4</li>
  <li>Liste öğresi #5</li>
</ul>

Ön izleme:

Liste öğresi #1
Liste öğresi #2
Liste öğresi #3
Liste öğresi #4
Liste öğresi #5

Resim img

Kod:

<img src="__resim-adresi-buraya__"/>

Ön izleme:

Bildirim alert

Kod:

<p class="mAlrt">Bu bir <b>bilgi</b> mesajıdır.</p>
<p class="mAlrt uyari">Bu bir <b>uyarı</b> mesajıdır.</p>
<p class="mAlrt hata">Bu bir <b>hata</b> mesajıdır.</p>
<p class="mAlrt basarili">Bu bir <b>başarılı</b> işlem mesajıdır.</p>

Ön izleme:

Bu bir bilgi mesajıdır.

Bu bir uyarı mesajıdır.

Bu bir hata mesajıdır.

Bu bir başarılı işlem mesajıdır.

İndirme Alanı table

Kod:

<div class="mia-download">
  <div class="file-infos">
    <span class="file-name">mia-theme.xml</span>
    <span class="file-size">147 KB</span>
  </div>
  <div class="file-download">
    <a href="#">İndir</a>
  </div>
</div>

Ön izleme:

mia-theme.xml 147 KB

İndir

Tablo table

Kod:

<table class="mia-table">
  <thead>
    <tr>
      <th>Başlık #A</th>
      <th>Başlık #B</th>
      <th>Başlık #C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Öğe #1A</td>
      <td>Öğe #1B</td>
      <td>Öğe #1C</td>
    </tr>
    <tr>
      <td>Öğe #2A</td>
      <td>Öğe #2B</td>
      <td>Öğe #2C</td>
    </tr>
    <tr>
      <td>Öğe #3A</td>
      <td>Öğe #3B</td>
      <td>Öğe #3C</td>
    </tr>
  </tbody>
</table>

Ön izleme:

Başlık #A	Başlık #B	Başlık #C
Öğe #1A	Öğe #1B	Öğe #1C
Öğe #2A	Öğe #2B	Öğe #2C
Öğe #3A	Öğe #3B	Öğe #3C

Diğer

Profil Alanını Düzenleme profile

Düzen sayfasını açın ve Hakkımda isimli profil widgetını simgesine tıklayarak düzenleme penceresini açın.
Açılan pencerede widget için 3 ayar bulunur. Bu ayarları tercihinize göre belirleyin.
Profile ait isim, açıklama, konum gibi bilgilerinizi güncellemek için Blogger profil sayfanıza erişin. Bunun için Ayarlar > Genel > Kullanıcı Profili bağlantısına gidin.
Gelen profil düzenleme ekranında widgetın ihtiyaç duyduğu şu alanları doldurun: Profil Fotoğrafı, Konum, Ek bilgiler > Giriş.

Üst Butonlar

Tema Dokümanı

Kurulum

Panel Üzerinden Kurulum

Elle Kurulum

Lisans Kurulumu

Özelleştirmeler

Meta Etiketleri

Varsayılan Renkler

Tarih ve Zaman Damgalarıisteğe bağlı

Indexteki Sayfa Başlıklarıisteğe bağlı

Widget Düzenlemeleri

Kısakodlar & Diğer

Yazı İçi Kısakodlar

Alıntı blockquote

Düğme button

Liste list

Resim img

Bildirim alert

İndirme Alanı table

Tablo table

Diğer

Profil Alanını Düzenleme profile

Lisans Anahtarı