Blogger yayınının içine içindekiler tablosu ekleme


Merhabalar bugünkü yazımda sizlere uzun içerik sunan site yazarlarının işine yarayabilecek bir eklenti kodu vereceğim ve bu kodu nasıl yazınızın içine ekleyebileceğinizi göstereceğim.Vereceğim kod ile birlikte aşağıdaki gibi bir içindekiler tablosuna sahip olacaksınız



İçindekiler


İÇİNDEKİLER TABLOSU KODU

 <style>
/*içerik tablosu kodu*/
.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}
</style>
 <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="örnek başlık 1">örnek başlık 1</a></li>
            <li>2 <a href="örnek başlık 2">örnek başlık 2</a></li>
            <li>3 <a href="örnek başlık 3">örnek başlık 3</a></li>
            <li>4 <a href="örnek başlık 4">örnek başlık 4</a></li>
            <li>5 <a href="örnek başlık 5">örnek başlık 5</a>
            </li>
            <li>6 <a href="örnek başlık 6">örnek başlık 6</a></li>
        </ul>
    </div>

Yukarıdaki  kodu kopyalayıp blogger yönetici panelinden yazı paylaşılan bölüme geliniz ve yeni yayın bölümüne tıklayınız yeni yayın bölümüne tıkladıktan sonra aşağıda gördüğünüz resimdeki gibi sarı renkle işaretlemiş olduğum kısma tıklayınız



daha sonra açılan yerden html görünümüne tıklayınız




yukarıda size kopyalatmış olduğum kodu html görünümündeki boş sayfaya yapıştırınız. Böylece içindekiler tablonuz hazır olacaktır

İÇİNDEKİLER TABLOSUNU YÖNLENDİRME

1-) Yukarıdaki işlemleri yaptıktan sonra sıra başlıkları yönlendirmeye geliyor

<a href="#1">örnek başlık 1</a>
<a href="#2">örnek başlık 2</a>
<a href="#3">örnek başlık 3</a>

yukarıdaki kodlarda oynamanız geren yerleri beyaz ve sarı kısımlar ile gösterdim bu kodlar içendekiler bölümünde gösterilecek kısımdır

2-)içindekiler bölümünde örnek başlık 1'e tıklandığındasayfa sizi  örnek başlık 1 neredeyse oraya götürür
<h3 id="1">örnek başlık 1'e gel</h3>
<h3 id="2">örnek başlık 2'e gel</h3>
<h3 id="3">örnek başlık 3'e gel</h3>




EDİT=KOD ÇALIŞIYORDUR TEST EDİLMİŞTİR KODUN DAHA SAĞLIKLI ÇALIŞMASI İÇİN BİZİM ÖNERİMİZ KODU EN SON EKLEMEKTİR EĞER BİR SORUN ÇIKAR İSE İLETİŞİM BÖLÜMÜNDEN BİZE ULAŞABİLİRSİNİZ

Bir sonraki yazımda sizlere farklı türde içindekiler tabloları göstereceğim