Başlık listesi veya içindekiler tablosu , bir blog yayınında veya makalesinde yer alan konu veya bölümlerden oluşan listedir. İçindekiler ek...
Başlık listesi veya içindekiler tablosu, bir blog yayınında veya makalesinde yer alan konu veya bölümlerden oluşan listedir. İçindekiler eklentisi, blog yayın veya makalesi içeriğinin bir bağlantı grubu şeklinde dökümü oluşturan yani içerik başlıklarının yer aldığı içerik çubuğudur. Blog ziyaretçilerinin okumak istediği konunun hangi bölümünü seçeceğini kolaylaştırır.
Blog yayınlarının daha hızlı ve daha iyi anlaşılması için, başlık listesi veya içindekiler tablosu oluşturmak için aşağıdaki adımları takip edin.
Blogger Yayınlarına Başlık Listesi veya İçindekiler Tablosu Nasıl Oluşturulur?
Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.
Birinci adım: Aşağıdaki CSS kodunu tema editör sayfasında bulunan </head> veya </head><!--<head/>--> kodunun bir satır üzerine ekleyin.
CSS
<style type='text/css'>
/*<![CDATA[*/
#light-contents{background:#fff0da;padding:10px 20px;border-radius:3px}
#contents_list{font-weight:700;cursor:pointer;margin:10px 0}
#contents_list:focus,#contents li:focus,.back_contents:focus{outline:none}
#contents_list svg{width:18px;height:18px;fill:#000;vertical-align:middle}
#contents li{background:transparent;margin:.2em 0 .2em 1em;cursor:pointer}
#contents ol li:before{left:-2em}
#contents li a{color:#000}
#contents li a:hover{color:#1e80ff}
#contents{display:block}
.back_contents{background:#2196F3;color:#fff;display:inline-block;text-align:right;float:right;margin:15px auto;font-size:14px;padding:2px 12px;cursor:pointer;border-radius:99em;transition:all .3s}
.back_contents:hover{background:#2d3435;color:#fff}
:target::before{content:';';display:block;height:40px;margin-top:-40px;visibility:hidden}
/*]]>*/
</style>İkinci adım: Aşağıdaki jQuery kodunu tema editör sayfasında bulunan </body> veya <!--</body>--></body> kodunun bir satır üzerine ekleyin ve tema editör sayfasını kaydedin.
jQuery
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>Üçüncü adım: Aşağıdaki HTML kodu yayın editör sayfasının HTML bölümüne ekleyin.
HTML İçerik Başlık Listesi
<div id="light-contents">
<div id="contents_list" onclick="if (document.getElementById('contents').style.display === 'none') { document.getElementById('contents').style.display = 'block'; } else { document.getElementById('contents').style.display = 'none'; }" role="button" tabindex="0">İçindekiler <svg viewBox="0 0 24 24"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="contents">
<ol>
<li><a href="#article_head_1" title="Alt başlık 1">Başlık 1</a></li>
<li><a href="#article_head_2" title="Alt başlık 2">Başlık 2</a></li>
<li><a href="#article_head_3" title="Alt başlık 3">Başlık 3</a></li>
<li><a href="#article_head_4" title="Alt başlık 4">Başlık 4</a></li>
<li><a href="#article_head_5" title="Alt başlık 5">Başlık 5</a></li>
</ol>
</div>
</div>Blog yayınlarınız içerisinde bulunan h2, h3, h4, h5, h6 ve b gibi başlık etiketlerini kullanabilirsiniz.
<h2 id="article_head_1">Başlık</h2>
<h3 id="article_head_2">Başlık</h3>
<h4 id="article_head_3">Başlık</h4>
<h5 id="article_head_4">Başlık</h5>
<h6 id="article_head_5">Başlık</h6>Dördüncü adım: Blog yayınlarınızda oluşturmuş olduğunuz yayın bölümlerinin alt kısmına başlık listesine veya içerik tablosuna dönmek için bir buton eklemek için aşağıdaki kodu kullanın.
HTML Dönüş Butonu
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>Başlık listesine veya içindekiler tablosuna dönmek için kullanılacak olan butonu aşağıdaki örnek kodlamada olduğu gibi blog yayınlarınıza ekleyebilirsiniz.
<h4 id="article_head_1">Başlık</h4>
<br />
<p>İçerik bölümü, ...............</p>
<br />
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br />
<br />
<h4 id="article_head_2">Başlık</h4>
<br />
<p>İçerik bölümü, ...............</p>
<br />
Bu yazımıza blog yayınlarında bulunan içerik başlıklarını kullanarak içindekiler listesi oluşturmayı paylaştım. Daha önce de buna benzer eklentiler paylaşmıştım;
Blogger AMP HTML Uyumlu İçindekiler Tablosu Oluşturma
Blog Yayınlarında Otomatik İçindekiler Dizini Oluşturma
Blog İçindekiler Sayfası Nasıl Kurulur?
Bu yazımız hakkında görüş ve sorularınız için yorum formunu kullanabilirsiniz.
COMMENTS