Blogger Otomatik İçindekiler Tablosu Ekleme
HTML, CSS ve JS kullanarak Blogger yayınlarına kolayca İçindekiler Tablosu ( Table of Contents-TOC) eklemek mümkün. Bu yazıda, Blogger’a İçindekiler Tablosu eklemenin en basit yolunu öğrenebilirsiniz…
İçindekiler Tablosu, genellikle bir yazının ilk bölümünden önce görülen, tablo biçimindeki küçük bir içerik parçasıdır. Yazılarınızda bulunan tüm başlıkları bir tablo halinde listeler. İçindekiler Tablosu, kullanıcıların tüm yayınınızda kolayca gezinmesine yardımcı olan bir yol haritası görevi görür. Bu da iyi bir kullanıcı deneyimi anlamına gelir.
Kullanıcı Deneyimi, Arama Motoru Sonuç Sayfaları’nda (SERP) üst sıralarda yer alabilmek için kritik bir öneme sahiptir ve SEO’nun önemli faktörlerindendir.
Otomatik Olarak Blogger’a İçindekiler Tablosu Nasıl Eklenir?
Otomatik İçindekiler Tablosu, blog yazınızdaki tüm başlıkları ve alt başlık etiketlerini manuel olarak karakterize etmeden otomatik olarak düzenlemenize izin verir ve kullanıcıların gezinmesi için pratik bir tablo haline getirir.
Blogger için kullanacağımız Otomatik İçindekiler Tablosu eklentisi şu özelliklere sahiptir:
- JavaScript ve CSS kodları içerir.
- Web sayfanızın tamamı yüklenene kadar yüklenmeyecek şekilde tasarlanmıştır.
- Hafiftir ve sayfa yükleme sürenizi olumsuz etkilemez.
- SEO dostudur ve sayfanızı arama motorlarında sıralamanıza yardımcı olabilir.
- Tabloyu gizlemek ve göstermek için bir geçiş düğmesi içerir.
- Son derece özelleştirilebilir ve duyarlıdır.
- En iyi yanı, bu eklentinin yalnızca çağrıldığında çalışmasıdır. Yani, belirli bir sayfada veya gönderide Blogger İçindekiler Tablosu’nu etkinleştirebilir veya devre dışı bırakabilirsiniz.
Aşağıdaki adımları uygulayarak Blogger’a hafif ve duyarlı içindekiler tablosu ekleyebilirsiniz:
Tavsiye: Temanızda değişiklik yapmadan önce mevcut şablonunuzun yedeğini almanızı şiddetle tavsiye ederiz. Böylece bir şeyler ters giderse orijinal şablonunuzu geri yükleyebilirsiniz.
- Blogger yönetim paneline gidin ve sol panelden Tema seçeneğini tıklayın.
- Özelleştirme seçeneğinin altındaki ‘HTML’yi düzenle‘ye tıklayın.
- HTML kod sayfasının içinde herhangi bir boş yere tıklayın. Şimdi klavyenizde ctrl+F tuşlarına basın, böylece arama kutusu açılacak.
- Arama kutusuna </head> yazın ve enter tuşuna basın. Html’deki <head> etiketi sarı renkte gösterilecek ve vurgulanacaktır.
- Aşağıdaki kodu </head> etiketinin hemen üstüne yapıştırın.
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>- Şimdi yine ctrl+f tuşlarına basın ve kutucuğa ]]></b:skin> yazın.
- ]]></b:skin> etiketinin hemen üstüne aşağıdaki CSS kodlarını yapıştırın.
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}
- Son olarak yine ctrl+f tuşlarına basıp <data:post.body/> öğesini arayın.1’den fazla <data:post.body/> etiketi olabilir, hepsini aşağıdaki kodla değiştirin.
<div id="post-toc"><data:post.body/></div>
- Şimdi değişiklikleri kaydedin ve Blogger kontrol paneline dönün.
- İçerik Tablosu’nu eklemek istediğiniz gönderiye/sayfaya gidin.
- Sol üstteki kalem simgesine dokunun ve “HTML Görünümü“ne geçin.
- Aşağıdaki kodu ilk başlıktan önce (ya da İçindekiler tablosunun görünmesini istediğiniz yere) yapıştırın.
<div class="mbtTOC">
<button onclick="mbtToggle()">İçindekiler Tablosu</button>
<ol id="mbtTOC"></ol>
</div>Son olarak, aşağıdaki Javascript kodunu gönderinizin en sonuna yapıştırın ve Yayınla/Güncelle butonuna tıklayın.
<script>mbtTOC();</script>
Böylece Blogger İçindekiler Tablosu içeriğe eklenmiş olacak. Tabloyu eklediğiniz gönderiyi kontrol edebilirsiniz. CSS kodlarında düzenleme yaparak İçindekiler tablonuzun görünümünü (renk, yazı boyutu vb.) özelleştirmeniz de mümkün.
Bu kılavuzu mümkün olduğunca basit tutmaya çalıştık. Umuyoruz, Blogger gönderilerine içindekiler tablosunun nasıl ekleneceğine dair hazırladığımız bu içeriği faydalı bulmuşsunuzdur.
Yardımlarınız için teşekkür ederim. Blog siteme içindekiler tablosunu ekleyebildim. Fakat bu kodları ekledikten sonra ana sayfamda tek bir yazı gözükmeye başladı. Yalnızca son yazım gözüküyor. diğer yayınları görmek için butona basmak gerekiyor. Daha önce tek sayfa 4- yazım oluyordu. Bu kodlardan sonra değişti. Bu konuda bana yardımcı olabilir misiniz?
Merhaba, adımları doğru uyguladığınız takdirde içerikteki kodların sorunsuz çalışıyor olması gerekir. Her şeyi doğru yaptığınızdan eminseniz, muhtemelen daha önce eklemiş olabileceğiniz kodlarla bir çakışma vardır. Zira kullandığınız tema üzerinden yaptığım deneme sonucunda herhangi bir sorun oluşmadı.
Ayrıca şu adımları da uygulamanızda fayda var: Öncelikle Blogger kontrol panelindeyken sol taraftaki menüden “Ayarlar” sekmesine tıklayın ve sayfayı kaydırarak “Yayınlar” bölümünü bulun. Hemen altındaki “Ana sayfada gösterilen maks. yayın sayısı” seçeneğine tıklayıp sayıyı örneğin, 12 olarak değiştirip kaydedin. Bloğunuzu kontrol ettiğinizde sorun devam ediyorsa, daha önce yaptığınız değişiklikleri (örneğin, farklı amaçlar için eklediğiniz kodları) tekrar gözden geçirmenizi öneririm. Yukarıda da dediğim gibi kod çakışması söz konusu olabilir.
Teşekkürler.