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


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




İÇİNDEKİLER TABLOSU KODU

 <style>
/*içerik tablosu kodu*/
.toc {background-color:#f8f9faborder:1px solid #a2a9b1padding:10px 13px
display:tableline-height:1.6em;}
.toc h2 {display:inline-blockmargin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:nonelist-style-image:nonemargin:0pxpadding: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:pointercolor:#0645ad}
:not(:checked) > .toctoggle {display:inline !importantposition:absolute;
  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Gizle';
displayinline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Göster'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''display:blockheight:0pxmargin-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><a href="örnek başlık 1">örnek başlık 1</a></li>
            <li><a href="örnek başlık 2">örnek başlık 2</a></li>
            <li><a href="örnek başlık 3">örnek başlık 3</a></li>
            <li><a href="örnek başlık 4">örnek başlık 4</a></li>
            <li><a href="örnek başlık 5">örnek başlık 5</a>
            </li>
            <li><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 

Yorum Gönderme

2 Yorumlar

  1. İçindekiler tablosu için verdiğiniz bilgiler detaylı anlatım çok güzel olmuş. emeğiniz için teşekkürler

    YanıtlayınSil
    Yanıtlar
    1. Yazıma zaman ayırdığınız için ben teşekkür ederim

      Sil
Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)