Tema Dokümanı

MIA Queries Blogger Şablonu'nu en verimli haliyle kullanmanıza rehberlik edecek bu tema dokümanı, içerik sayfalarında kullanılmak üzere özenle hazırlanmış birtakım elementleri içermektedir.

1) Özelleştirmeler

1.a) Logoyu Değiştirme

Temanın kullanımında header bölümü için metin ya da resim logo yerleşimlerinden birini tercih edebilirsiniz. Logoyu değiştirmek için aşağıdaki adımlara göz atabilirsiniz.

Blogger panelinizdeki "Düzen" sekmesini açın.
Varsayılan tema dosyasındaki "MIA Queries (Üstbilgi)" widget'ının düzenleme penceresine ulaşın. Widget üzerindeki ad blog adı değiştirildiğinde farklı görünebilir. Genel kalıp {blog başlığı} (Üstbilgi) şeklindedir.
Açılan penceren bir resim logo belirlemek için "Bilgisayardan resim yükle" seçeneiğini kullanın. Resmin yüklenmesini bekleyin ve "Resim Yerleşimi" kısmında Başlık ve açıklama yerine seçeniği işaretleyip kaydedin.
Bir metin logosu tercih etmek isterseniz aynı ilgili ekranda "Blog Başlığı" ve "Blog Açıklaması" kısımlarını doldurun ve "Resim URL'si" kısmını boş bırakın.

1.b) Menüleri Değiştirme

MIA Queries hali hazırda aktif 2 adet menü yerleşimi barındırmaktadır. Bunlardan biri logonun sağındaki üst menü, diğeri ise sayfanın en altında (sağda) yer alan alt menüdür. Her iki menü yerleşimi için de aşağıdaki adımları takip edeiblirsiniz.

Blogger panelinizdeki "Düzen" sekmesini açın.
Düzenlemek istediğiniz menünün widget düzenleme penceresine ulaşın.
İlgili alanlara menü adları ve bağlantılarını yerleştirin. Tercihen bu kısımlarda sıralamalarını da güncelleyebilirsiniz.
Pencereyi kaydedin.

Önemli — Üst menü öğeleri sayfa aktif olduğunda vurgulanacak şekilde ayarlandı. Dolayısıyla menü widgetı içerisinde aşağıdaki şekilde bağlantıları yerleştirmeniz gerekir.

Statik sayfalar için         : /p/ornek-sayfa.html
Soru/yazı sayfaları için     : /2023/01/ornek-yazi.html
Etiket sayfaları için        : /search/label/Blogger
Arşiv sayfaları için         : /2023/01/
Arama sorguları için         : /search?q=Blogger

Yukarıda yer alan tanımlar site içi bağlantıları temsil eder. Dolayısıyla alan adı (domain) ve "http(s)://" kısımlarını belirtmenize gerek yoktur. Kalın olarak işaretlenen yerleri kendi bağlantınıza göre özelleştirmelisiniz. Sadece dış bağlantılara yer vermek istediğinizde bağlantının tamamını bu alanlara yerleştirin.

1.c) Arama Formundaki "Çok Arananlar" Kısmını Düzenleme

Arama butonuyla sitenin en üstünde açılan arama formundaki "Çok Arananlar" kısmını şu adımları takip ederek düzenleyebilirsiniz.

Blogger panelinizdeki "Düzen" sekmesini açın.
"Çok Arananlar" isimli widget'ın düzenleme penceresine ulaşın.
Ekranda yer alan bağlantı listesini aşağıdaki örnek bağlantı yapısıyla özelleştirin.
```
Site adı  : Arama terimini yazın (ör: "Blogger")
URL       : Sadece "#" ekleyin
```

1.d) "Okuma" Sayacını Ayarlama

Okuma Sayacı'nın yapısı Firebase entegrasyonu üzerinden oluşturulmuştur. Bu doğrultuda temayı teslim aldığınızda sayaçların aktif olmadığını görebilirsiniz. Sayaçları aktif etmek için Firebase üzerinden bir veritabanı kaydı oluşturmalısınız. Firebase üzerindeki gerekli bu adımlarla ilgili makaleye şurada (İngilizce) göz atabilirsiniz.

Firebase ayarlarınızı yaptığınızı varsayarak tema içerisindeki Firebase kod yapısını kendi oluşturduğunuz ile entegre etmelisiniz. Bunun için Blogger panelinizdeki "Tema" sekmesini açın ve HTML düzenleme ekranında aşağıdaki kodu aratın.
```
Firebase JS by Esenturk Design
```
Javascript kodu üzerinde aşağıdaki kalın olarak işaretli yerleri kendi oluşturduğunuz Firebase bilgileriyle değiştirin. Eğer blogID'nizi bilmiyorsanız buradaki yazıya göz atabilirsiniz.
```
const viewSeting = {
  blogID: "0000000000000000000",
  databaseUrl: "https://xxx-xxxxxxx-default-rtdb.firebaseio.com/",
  abbreviation: !0,
  lazyload: !0
};
```
Şablon düzenleme ekranını kaydedin.

1.e) "Okuma" Sayacını Gizleme

Henüz Firebase sayacını entegre etmeyi düşünmüyorsanız ilgili "Okuma" alanını aşağıdaki adımları takip ederek gizleyebilirsiniz.

Blogger panelinizdeki "Tema" sekmesini açın ve HTML düzenleme ekranına ulaşın.
CTRL + F fonksiyonuyla aşağıdaki terimi aratın.
```
<div class='hpView'>
```

Bu sorguyla ulaştığımız kod dizini şu şekildedir.

<div class='hpView'>
  <b class='nld_view entry-views' data-add='false' expr:data-id='data:post.id' /><br />
  Okuma
</div>

Yukarıda yer alan kod dizinini aşağıdakiyle güncelleyin.

<!-- div class='hpView'>
  <b class='nld_view entry-views' data-add='false' expr:data-id='data:post.id' /><br />
  Okuma
</div -->

Bu şekilde kodları kaybetmeden pasif etmiş olduk. İleride Firebase kurulumu gerektiğinde bu adımları tersine uygulayarak ayarlarınızı geriye alabilirsiniz.

1.f) Cevap Formu Uyarı Metnini Güncelleme

Temanın aktif demosunda "Cevabınızın anlaşılır, okunaklı ve imla kurallarına uygun olarak yazıldığına dikkat edin." şeklinde yer alan uyarı metnini değiştirmek için aşağıdaki adımları takip edebilirsiniz.

Blogger panelinizdeki "Ayarlar" sekmesini açın.
"Yorumlar" başlığı altında Yorum formu mesajı kısmına dilediğiniz uyarı metnini yazın.

2) Soru Rehberi

2.a) Bir Soru Ekleme

Blogger alt yapısını özelleştirerek oluşturduğumuz bu şablonda soru eklemek için özellikle yapmanız gereken hiçbir şey yok. Normal bir blog yazısı oluşturu gibi soru içeriğinizi oluşturun ve yayınlayın.

Blogger panelinize giriş yapın ve Yeni Yayın butonuna tıklayın.
Soru içeriğinizi oluşturun ve sorunuzla ilgili etiketleme yapın.
Her şey tamam olduğunda içeriğinizi yayına alın.
İlk oluşturulan içerikleriniz otomatik olarak henüz hiçbir cevap almadığı sürece kırmızı renkli bir Cevaplanmadı rozetiyle ve "İlk Cevabı Yaz" vurgusuyla listelenir. En az bir cevap aldığında bu rozet otomatik olarak silinir.

2.b) Bir Sorunun Cevaplarını Kapatma

Yayınlanmış bir soru cevap almış olsun ya da olmasın aşağıdaki adımlar uygulanarak cevap almaya kapatılabilir. Bu durumda soru yayındadır fakat cevap almıyordur.

Soruyu düzenlemek için ilgili blog yazısı sayfasını açın.
Ekranın sağında bulunan "Seçenekler" menüsüne tıklayın.
Açılan seçeneklerden "Okuyucu yorumları" kısmında İzin verme, mevcut olanı göster seçeneğini belirleyin.
Yayını "Güncelle" butonuyla kaydedin.

2.c) Bir Soruyu "Cevaplandı" Olarak Belirleme

Yayınlanmış bir soruya gelen cevaplar üzerinden "En iyi Cevap" etiketiyle bir yorumu hedef göstererek Cevaplandı rozetiyle işaretlemek için şu adımları takip edin.

Öncelikle doğru cevabın olduğu soru sayfasının yayınlaşmış, okunabilir sayfasını açın (Burada bahsettiğimiz yazıyı düzenleme ekranı değil, .../2023/01/bu-bir-soru.html şeklinde olan okuyucu sayfası).
Gelen cevaplar üzerinden doğru cevap olduğunu düşündüğünüz kutunun üzerinde sağa tıklayın ve "İncele" seçeneğine tıklayın (Bazı tarayıcılarda bu terim farklı olabilir). Amacımız cevabın aşağıdaki gibi ID'sini almak.
```
<li class="comment" id="c5482037807251548917">
```
İlgili sorunun yukarıda kalın olarak işaretlenen ID'sini bulun ve c5482037807251548917 şeklinde kopyalayın.
Şimdi sorunun Blogger panelindeki düzenleme sayfasını açın ve "HTML" görünümüne geçin.

En alt satıra aşağıdaki kodları ekleyin.

<script>window.onload=function(){document.getElementById('c0000000000000000000').className = 'comment cozum';};</script>

Yukarıda kalın olarak belirlenen c0000... kısmına daha önce kopyaladığınız ID'yi yapıştırın. Bu şekilde cevaba yeşil bir temada "En İyi Cevap" etiketini vermiş olduk. Fakat yazının genelini yine yeşil bir temada Cevaplandı olarak belirlemek için devam ediyoruz.
Yazıyı düzenleme ekranının en sağında yer alan "Etiketler" kısmına Cevaplandı etiketini girin. Daha önce girilmiş ise açılan listeden de seçebilirsiniz (Etiketi tam olarak belirttiğimiz şekilde girmelisiniz). Bu etiket sorunun yayınlandığı kısımlarda yazar alanının altında diğer etiketler ile birlikte görünmez, gizlidir. Bu yüzden görüntü kirliliği oluşturmaz.
Yayını "Güncelle" butonuyla kaydedin.
Tüm adımlar doğru yapıldıysa soruyu okuyucu görünümünde açın ve yeşil temanın uygulanıp uygulanmadığını teyitleyin.

2.d) Bir Sorudaki Cevabı Silme

Yayınlanmış bir sorudaki herhangi bir cevabı silmek için aşağıdaki adımları takip edin.

Blogger panelinizdeki "Yorumlar" sekmesini açın.
Silmek istediğiniz cevabı listeden bulun ve silin.

2.e) Bir Sorudaki Rozetleri Anlama

Oluşturduğunuz bir sorunun listelendiği alanda birtakım metin vurguları gözlemleyebilirsiniz. Bunlar şu şekildedir:

Bir soru yayınlandıktan sonra yazı hiç yanıt almadıysa Cevaplanmadı rozetiyle ve "İlk Cevabı Yaz" vurgusuyla listelenir.
Bir soru en az 1 kez yanıt aldıysa "Soruya Cevap Ekle" vurgusuyla listelenir.
Bir soru yayınlandıktan sonra yeni cevaplara kapatıldıysa "Cevaplar Kapatıldı" vurgusuyla listelenir ve form kapatılır.
Bir soru yayınlandıktan sonra gelen cevaplar üzerinde beklenen bir yanıtı aldıysa yeşil renkte Cevaplandı rozetiyle ve "Cevabı Gör" vurgusuyla listelenir. Daha sonra yeni yanıtlara ihtiyaç yoksa form kapatılır.

Blogger panelinden oluşturulan statik sayfalar (yazı sayfaları değil) oluşturulan soru yapısından bağımsızdır ve sidebar (kenar çubuğu) görünümünü içermez.

3) Elementler

3.a) Metin Vurgulama

Paragraf içerisinde bir metni vurgulamak için .mia-hl sınıfını kullanın.

Kod:

<b class="mia-hl">vurgulanan metin</b>

Görünüm:

Bu vurgulanan metin örneğidir.

3.b) Butonlar

İçeriklerinizin belirli kısımlarında bağlantı yerine butonları tercih edebilirsiniz. Standart bir buton için .btn sınıfını kullanın. Alternatif buton görünümleri için bu sınıfa .fill.soft.outline sınıflarından birini ekleyin.

Kod:

<a class="btn" href="#">Buton #1</a>
<a class="btn fill" href="#">Buton #2</a>
<a class="btn soft" href="#">Buton #3</a>
<a class="btn outline" href="#">Buton #4</a>

Görünüm: Buton #1 Buton #2 Buton #3 Buton #4

3.c) Tablo

İçeriğinizin verilerini bir tablo ile zenginleştirmek için .mia-table sınıfını ekleyin.

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>

Görünüm:

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

3.d) Resim

İçeriklerinize bir görsel eklemek için herhangi bir sınıf belirtmenize gerek yoktur.

Kod:

<img alt="__resim-başlığı-buraya__" src="__resim-adresi-buraya__"/>

Görünüm:

3.e) Alıntı

İçeriklerinize bir alıntı yapmak için .mia-alinti sınıfını kullanın.

Kod:

<blockquote class="mia-alinti">
  Alıntı metni buraya
  <cite>Alıntı kaynağı buraya</cite>
</blockquote>

Görünüm:

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

3.f) Liste

İçeriklerinize bir liste eklemek için .mia-liste sınıfını kullanın.

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>

Görünüm:

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

Son Güncelleme: 30.01.2023 / 02:28