Blogger icindekiler listesi nasil olusturulur - Google’da BAŞARI SEO ‘dan Geçer Wordpress Seo Ayarları / Wordpress Eklentileri / Blogger Seo /

 

Sitenizi içeriklerinizi ve Seo puanını arttıracak Blogger Eklentileri ile sizlere destek olmaya devam ediyoruz. Bugün paylaşacağım bilgilerle içeriklerinizi daha açıklayıcı ve kullanıcı dostu haline getirmiş olacaksınız. 

İçindekiler Listesi Neden Olmalı 

Ziyaretçilerinize içeriklerinizden neler öğreneceğini ve sayfanın neresinde bulacağını belirtmeniz doğruya çabuk ulaşma güvencesi vermek sitenizde geçirecekleri zamanın boşa geçmeyeceğini anlamalarına yardımcı olacak ve sitenize tekrar tekra geleceklerdir. 

İçindekiler Listesi Oluşturma 

Aşağıda paylaşacağım kodları yerleştirdikten sonra istediğiniz yazıya istediğiniz gibi ekleyerek düzenleme yapabilirsiniz. Yazınıza gelişmiş özellikleri ile İçindekiler Listesi ekleyerek ziyaretçilerinize hem görsellik hem de pratiklik katmış olursunuz.

İçindekiler Listesi Kodları 

Mobil uyumlu eklenti kodlarını tema içerisinde " ]]></b:skin> ve ya </style> kodlarının her hangi bir tanesinin hemen üst satırına eklemeniz yeterli olacak. Ancak iki farklı kod paylaşacağım sadece bir tanesini eklemeniz yeterli olacak. 

1. Aşama Stil Kodlarını eklemek 

Unutmayın sadece bir tane stil kodu eklemeniz gerekiyor. İşleme başlamadan önce site yedeğini almayı ihmal etmeyin.

1. stil kodları

.contentsList{background:#f9f9f9;font-family:Oswald,arial;display:block;border:1px solid #e6e6e6;color:#333;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;width:80%}
.contentsList button{background:transparent;font-family:oswald,arial;color:#333;font-size:22px;position:relative;outline:none;border:none;padding:0 0 0 15px}
.contentsList button a{padding:0 2px;color:#0080ff;cursor:contents-headinger}
.contentsList button a:hover{text-decoration:underline}
.contentsList button span{font-size:15px;margin:0 10px;cursor:pointer}
.contentsList li{margin:10px 0}
.contentsList li a{color:#0080ff;font-size:18px;text-decoration:none;text-transform:capitalize}
.contentsList li a:hover{text-decoration:underline}
.contentsList li li{margin:4px 0}
.contentsList li li a{color:#289728;font-size:15px}
.contentsList ol{counter-reset:section1;list-style:none}
.contentsList ol ol{counter-reset:section2}
.contentsList ol ol ol{counter-reset:section3;margin:10px 0}
.contentsList ol ol ol ol{counter-reset:section4}
.contentsList ol ol ol ol ol{counter-reset:section5}
.contentsList li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.contentsList li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.contentsList li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.contentsList li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.contentsList li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

2. stil kodları

 .contentsList{background:#FFFFE0;font-family:Oswald,arial;display:block;color:#333;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;width:80%;border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;}
.contentsList button{background:transparent;font-family:oswald,arial;color:#333;font-size:22px;position:relative;outline:none;border:none;padding:0 0 0 15px}
.contentsList button a{padding:0 2px;color:#0080ff;cursor:contents-headinger}
.contentsList button a:hover{text-decoration:underline}
.contentsList button span{font-size:15px;margin:0 10px;cursor:pointer}
.contentsList li{margin:10px 0}
.contentsList li a{color:#0080ff;font-size:18px;text-decoration:none;text-transform:capitalize}
.contentsList li a:hover{text-decoration:underline}
.contentsList li li{margin:4px 0}
.contentsList li li a{color:#289728;font-size:15px}
.contentsList ol{counter-reset:section1;list-style:none}
.contentsList ol ol{counter-reset:section2}
.contentsList ol ol ol{counter-reset:section3;margin:10px 0}
.contentsList ol ol ol ol{counter-reset:section4}
.contentsList ol ol ol ol ol{counter-reset:section5}
.contentsList li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.contentsList li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.contentsList li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.contentsList li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.contentsList li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5} 

2. Aşama head kodunu yerleştirme 

Blogger admin panelinden tema kodlarımızı açıyoruz CTRL+F tuş kombinasyonu ile " </head> " kodunu aratıp hemen üzerine aşağıdaki kodları ekliyoruz. 

 <script type='text/javascript'> 
//<![CDATA[ 
function contentsList(){var a=1,b=0,c="";document.getElementById("postContents").innerHTML=document.getElementById("postContents").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='contents-heading"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#contents-heading'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='contents-heading"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("contentsList").innerHTML+=c}function listToggle(){var a=document.getElementById("contentsList"),b=document.getElementById("listTog");"none"===a.style.display?(a.style.display="block",b.innerHTML="kapat"):(a.style.display="none",b.innerHTML="aç")} 
//]]> 
</script> 

3. Aşama 

Bu aşamada yazının içerisinde gözükmesini sağlayacak kodları yerleştireceğiz. 

Tema kodlarımızın arasında <data:post.body/> kodunu bulmalısınız. Bu kod temanızda birden fazla olabilir genelde ikincisi doğru yerleşim için uygun olsa da siz deneme yanılma yöntemi ile kodların doğru yere yerleştiğinden emin olabilirsiniz. 

Sarı ile işaretlenmiş kodları yerleştiriyoruz.

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

4. Aşama yazı içine eklenecek kodlar

İçindekiler Listesi oluşturmak istediğiniz yazıya ekliyeceğiniz kodlar bu aşama da ekleyeceğiz. 

Yeni yayın diyerek açtığımız içerik sayfasını html düzenle modunda açıp en üste aşağıda ki kodları ekleyin 

<div class="contentsList"> 
<button>İçindekiler <span>[<a onclick="listToggle()" id="listTog">kapat</a>]</span></button> 
<div id="contentsList"></div> 

Sonraki adım ise html sayfamızın sonuna eklemeniz gereken kod

<script>contentsList();</script> 

İçindekiler Listesi oluşturabilmek için eklememiz gereken kodlar bu kadar. İşlemleri sırası ile doğru eklemiş iseniz sorunsuz olarak çalışacaktır. Eğer yapamadığınız bir işlem olursa destek için yorum bölümünü kullanabilirsiniz.

Oluşturduğumuz İçindekiler Listesi nasıl görünüyor merak ediyorsanız Önizleme yapabilirsiniz.

listeyi hangi kodlarla nasıl oluşturacağınızı aşağıda vereceğim etiketlerle rahatlıkla yapabilirsiniz. 

Örnek Kodlama ve Görünümü

Bir başka yazımızda görüşmek üzere şimdilik hoşça kalın. Her türlü sorunuz için iletişim bölümünden, konuyla ilgili olan sorularınız için direk yorum bölümünden destek istemekten çekinmeyin.

Benzer Yazılar