Notification texts go here Contact Us Buy Now!

Blogger'a Wikipedia gibi İçindekiler Tablosu Ekleme

Blogger'a Wikipedia gibi İçindekiler Tablosu Ekleme
Blog Yazarı

Blogger'a Wikipedia gibi İçindekiler Tablosu Ekleme


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.



تعليقان (2)

  1. Merhaba. İçindekileri başlangıçta gizli nasıl yapabilirim?
  2. Gizli sekmesini kullanabilirsiniz.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.