Tema Dokümanı

Kurulum

Panel Üzerinden Kurulum

1. 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).
2. Sol menüden Tema'yı seçin.
3. Özelleştir butonunun sağındaki simgesine tıklayın ve açılan menüden Geri Yükle'ye basın.
4. Gelen uyarı ekranında Yükle butonuna basın ve size teslim edilen metronic-blogger.zip arşiv dosyası içerisindeki metronic.xml isimli tema dosyasını arşivden çıkararak seçin.
5. Ayarlarınızı kaydedin ve ön izlemede temanın görünümüne göz atarak özelleştirmelerinizi uygulayın.

Elle Kurulum

1. 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).
2. Sol menüden Tema'yı seçin.
3. Özelleştir butonunun sağındaki simgesine tıklayın ve açılan menüden HTML'yi düzenle seçeneğine basın.
4. Size teslim edilen metronic-blogger.zip arşiv dosyası içerisindeki metronic.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).
5. CTRL + A klavye kombinasyonuyla temanın tüm kodlarını seçin ve CTRL + C ile kopyalayın.
6. Blogger üzerinde açtığınız kod ekranında CTRL + A ile tüm kodları seçin ve DELETE tuşuyla tamamını silin.
7. Aynı yere CTRL + V ile daha önce kopyalamış olduğunuz yeni temanın kodlarını yapıştırın.
8. Kaydet tuşuna basın.

Özelleştirmeler

Meta Etiketleri

1. 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.
2. Açıklama kısmına sitenizin içeriği ile uyumlu birkaç cümlelik tanım girin.
3. 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çıklama girin.

Varsayılan Renkler

1. Varsayılan renkleri kendinize göre uyarlamak için tema ayarlarında HTML'yi düzenle kısmına gelin.
2. Tema kodlarının yer aldığı alana bir kez tıklayın ve CTRL + F klavye kısayoluyla şunu aratın: :root {.
3. CSS kodları içerisinde yer alan tüm renk tanımlarını dilediğiniz gibi değiştirin. Örneğin:
   

   :root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
   --bs-purple: #6f42c1;
   ...
   }

4. Alternatif olarak bu değişiklikleri Tema > Özelleştir kısmında açılan sol sütundaki seçenekler üzerinden de gerçekleştirebilirsiniz.

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

1. Temaya uygun varsayılan tarih ve zaman formatını değiştirmek için Blogger blogunuzda Ayarlar kısmını açın.
2. "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          : 08 Mayıs 2022
   Zaman damgası biçimi          : 5/08/2022 10:50:11 ÖS
   Yorum zaman damgası biçimi    : 08 Mayıs, 2022 22:50 

3. Not — 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:
   

   <b:eval expr='format(data:post.date, &quot;dd MMMM YYYY&quot;)'/>

4. Kalın olarak işaretlenen yerde özel formatlandırmanızı belirtin.

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

1. Indexse düşen sayfaların tanımlarını değiştirmek için tema kod düzenleyicisini açın.
2. Kod ekranına bir kez tıklayın ve <!--[ Ana sayfa başlığı ]--> terimini aratın.
3. 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'>
       <!--[ Ana sayfa başlığı ]-->
       <title><data:blog.title.escaped /> - <data:blog.metaDescription.escaped /></title>
       <b:elseif cond='data:view.search.query' />
       <!--[ Arama başlığı ]-->
       <title><data:messages.search />: <data:view.search.query /></title>
       <b:elseif cond='data:view.search.label' />
       <!--[ Konu başlığı ]-->
       <title><data:blog.pageName.escaped /> - <data:blog.title.escaped /></title>
       <b:elseif cond='data:view.isArchive' />
       <!--[ Arşiv başlığı ]-->
       <title><data:blog.pageName.escaped /> için blog arşivi</title>
       <b:else />
       <title>Blog: <data:blog.title.escaped />
       </title>
     </b:if>
     <b:elseif cond='data:view.isError' />
     <!--[ Hata ekranı başlığı ]-->
     <title>404 Hatası: Sayfa Bulunamadı</title>
     <b:else />
     <!--[ Sayfa başlığı ]-->
     <title><data:blog.pageName.escaped /> - <data:blog.title.escaped />
     </title>
   </b:if>

Widget Düzenlemeleri

1. 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.
2. Açılan ekranda düzenlemek istediğiniz widget için simgesine tıklayın ve içeriğini girin.
3. İlgili bölümde size uygun bir alana yeni bir widget yerleştirmek için Gadget ekle bağlantısına tıklayın.
4. 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>
  Alıntı metni.
</blockquote>

Ön izleme:

Alıntı metni.

Düğme button

Kod:

<a class="button" href="/">Buton</a>

Ön izleme: Buton Açık Buton Koyu Buton Çizgili Buton

Liste list

Kod:

<ul>
  <li>Liste Öğesi #1</li>
  <li>Liste Öğesi #2</li>
  <li>Liste Öğesi #3</li>
</ul>

Ön izleme:

• Liste Öğesi #1
• Liste Öğesi #2
• Liste Öğesi #3

İçerik Molası post break

Kod:

<div class="separator my-10"></div>

Ön izleme:

Resim Büyütme lightbox

Kod:

<a href="__resim-bağlantısı__" class="lightbox_trigger">
  <img src="__resim-bağlantısı__"/>
</a>

Ön izleme:

Diğer

Profil Alanını Düzenleme profile

1. Düzen sayfasını açın ve Hakkımda isimli profil widgetını simgesine tıklayarak düzenleme penceresini açın.
2. Açılan pencerede widget için 3 ayar bulunur. Bu ayarları tercihinize göre belirleyin.
3. 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.
4. Gelen profil düzenleme ekranında widgetın ihtiyaç duyduğu şu alanları doldurun: Profil Fotoğrafı, Konum, Ek bilgiler > Giriş.

Sosyal Ağlar social

1. Düzen sayfasını açın ve Sosyal Ağlar isimli widgetın simgesine tıklayarak düzenleme penceresini açın.
2. İlgili alanlara sosyal ağ bağlantılarınızı ve sosyal ağın adını yazarak kaydedin.
3. Not — Sosyal Ağlar widgetının simgeleri eklediğiniz ağlara göre SVG formatında otomatik olarak atanır. Desteklenen ağlar: Facebook, Twitter, Youtube, LinkedIn, Whatsapp, Pinterest. Simgelerin otomatik yerleşmesi için widget ayarlarındaki Bağlantı listesi > Site adı kısmında sosyal ağ adını tam olarak belirtildiği şekilde girmelisiniz. Örnek kullanım:

   Site adı       | Site URL'si
   
   Facebook       : https://www.facebook.com/kullaniciadi
   Twitter        : https://www.twitter.com/kullaniciadi
   Instagram      : https://www.instagram.com/kullaniciadi
   ...