Blogger’a Otomatik Olarak İçerik Tablosu Ekleme

WordPress'te bir içerik tablosu eklemek, bazı eklentileri kullanarak çok kolaydır.Ancak blogger hazır eklenti desteklemediğinden bu eklentiyi biz manuel olarak sitemize dahil etmemiz gerekemektedir.Bunun için de sizlere 5 adımda bu işlemi nasıl yapabileceğinizi anlatacağım.

Blogger’a Otomatik Olarak İçerik Tablosu Ekleme Adımları

1.Adım

Öncelikle blogger sitemize giriş yapıyoruz.Ardından tema kısmından HTML düzenle kısmına giriyoruz. Burada ctrl+F yaparak </ head> kodunu aratıyoruz. Çıkan sonucun heen üst kısmına aşağıda verdiğim kodu ekliyoruz.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>              

//<![CDATA[                      

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>

2.Adım

Yine tema düzenleme sayfamızda ]]></b:skin> kodunu aratıp bunu da aşağıda verdiğim kod ile değiştiriyoruz. ( Kod içerisinde gerek renklerde gerekse de yazı tipi ve boyutunda değişiklik yapabilirsiniz.)

.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;}

3.Adım

Tema üzerinde yapacağımız son değişiklik ise <data:post.body/> kodunu buluyoruz ve alttaki kod ile değiştiriyoruz.

<div id="post-toc"><data:post.body/></div>

4.Adım

Artık tema üzerinde değişikliklerimizi yaptık.Bundan sonraki kısımda yazımıza bu özelliği ekleme kısmı kaldı. Bunun için de yazımızda içerik eklemek istediğimiz kısma geliyoruz ve altta verdiğim kodu yazınızda html sekmesinde ekliyoruz.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">İçindekiler</button> 
    <ul id="mbtTOC"></ul> 

    </div>

5.Adım

Son olarak da yazımızda en alt kısma altta verdiğim kodu ekliyoruz ve işlemimiz bitmiş oluyor.Bundan sonra ise her yazımızda son 2 adımı yazımız içine ekleyerek bu özellikten faydalanabiliyoruz.

<script>mbtTOC();</script>