Wikipedia, içindekiler tablosu olarak da bilinir veya içindekiler tablosu olarak da adlandırılabilir. Ancak sadece düzenli bir içindekiler değil, çünkü tıklandığında otomatik olarak hedef menüye, yani atlama bağlantısına atlayacaktır. Tabii ki bu ziyaretçiler için kolaylaştırır çünkü doğrudan aranan menüye gidebilirler. Özellikle makale süper uzunsa, kaydırmayı zorlaştırır.
Ve Blogger için Wikipedia içerikleri oluşturulabilir. Sadece stil değil, daha çekici görünmesini sağlamak değil, SEO açısından büyük bir fayda var. Bu menüler dizine eklenir ve arama sonuçlarında görünür. Daha önce atlama bağlantısı denen şey buydu.
Betik çok hafiftir, çünkü sadece CSS ve HTML kullanılarak yapılır. Javascript'e ihtiyaç duymaz, bu yüzden yükleme sırasında yük eklemez.
Bir örnek, Blogcular İçin Facebook Anında Makale Kaydetme ve Oluşturma başlıklı makaledir . Inside, Wikipedia gibi Blogspot için bir içerik tablosu . Sadece bu değil, aşağıdaki resmi düşünün.
Blogger Yayını İçindekiler Tablosu Nasıl Yapılır?
Temel olarak HTML yapısındaki kimlik başlıklarını okuyacak ve doğrudan seçilen başlık bölümüne atlayacaktır. Şimdi başlayalım.
Öncelikle Blogger'a giriş yapıyoruz.
Daha sonra Tema>HTML Düzenle'ye tıklıyoruz.
Şimdi Ctrl+F yardımıyla kod editör sayfamızda ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.
/* Table of Contents by igniel.com */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute; opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Gizle';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Göster'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}Şimdi sırada İçindekiler tablosunun HTML kodlarını eklemeye geldi.
Bunu da şöyle yapacağız Yeni Yayın sayfamızda yazılarımızı yazdıktan sonra içindekiler tablosunu yayınımıza eklemek için HTML bölümüne geçiyoruz ve aşağıda ki HTML kodlarını görünmesini istediğimiz yere ekliyoruz.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>İçindekiler</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="https://bloggerim1.blogspot.com/2020/04/deneme-8.html" title="Judul Satu">Deneme 8</a></li>
<li>2 <a href="https://bloggerim1.blogspot.com/2019/11/deneme-7.html" title="Judul Dua">Deneme 7</a></li>
<li>3 <a href="https://bloggerim1.blogspot.com/2019/11/deneme-6.html" title="Judul Tiga">Deneme 6</a></li>
<li>4 <a href="https://bloggerim1.blogspot.com/2019/11/deneme-5.html" title="Judul Empat">Deneme 5</a></li>
<li>5 <a href="https://bloggerim1.blogspot.com/2019/11/deneme-4.html" title="Judul Lima">Deneme 4</a>
</li>
<li>6 <a href="https://bloggerim1.blogspot.com/2019/11/deneme-3.html" title="Judul Enam">Deneme 3</a></li>
</ul>
</div>
Yukarıda verdiğim kodların içerisinde ki Blogger adresinizi kendi adresinize göre değiştirmeyi unutmayın.
Bütün işlemler bu kadar aşağıda ki Demo sayfamızdan örneğine bakabilirsiniz.