HTML, CSS ve JS kullanarak Blogger’daki yazılarınıza kolayca İçindekiler Tablosu ( Table of Contents-TOC) ekleyebilirsiniz. Aşağıda, Blogger’a İçindekiler Tablosu eklemenin en basit yolunu paylaştık.
İç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.
Otomatik Olarak Blogger’a İçindekiler Tablosu Ekleme
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.
- Belirli bir sayfada veya gönderide Blogger İçindekiler Tablosu’nu etkinleştirebilir veya devre dışı bırakabilirsiniz.
📌 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 kontrol panelinden: Tema > Yedekle > Tema İndir yolunu izleyerek yedekleme yapabilirsiniz.)
Şimdi, aşağıdaki adımları uygulayarak Blogger’a hafif ve duyarlı bir içindekiler tablosu ekleyelim:
- 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.
- Blogger için diğer kılavuzlarımıza da göz atabilirsiniz:
