Blog İçindekiler Sayfası Nasıl Kurulur?

12.7.16
Blog İçindekiler Sayfası Nasıl Kurulur?

Blog İçindekiler Sayfası Nasıl Kurulur? - Blog ziyaretçilerinizin yayınlamış olduğunuz bütün içerikleri veya makalelere daha kolay ulaşmaları, tüm blog içerikleri bir tablo üzerinden görmelerini sağlamak için blog içindekiler sayfası ile oluşturabilirsiniz. Blog içindekiler sayfası sitemap.xml aktif olarak tüm sayfa veya sayfaları arama motorlarına bildirir özelliği ile yapmış olduğunuz sayfa güncellemelerini arama motorlarına iletir.

Blog SEO için blogunuzun arama motorlarınca taraması ve dizine eklenmesini kolaylaştırır. Bu yazımızda sitemap hakkında bilgileri paylaşmıyoruz, sadece blogcuların otomatik içindekiler tablosu sayfası oluşturma ipuçlarını paylaşıyoruz.

Otomatik İçindekiler Tablo Sayfası Nasıl Oluşturulur?


1- Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogun kumanda paneline giriş yapın.
2- Blog kumanda panelinde bulunan Sayfalar > Yeni sayfa sekmesine tıklayın.
3- Açılan sayfanın sol üst köşesinde bulunan Oluştur-HTML sekmesinden HTML'e tıklayın ve aşağıdaki kodları kopyalayın ve HTML sayfasına yapıştırın.

<style scoped="" type="text/css">
#head-tab{background:#ffab00;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;border:1px solid #f1f1f1;}
#goofed-be{border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-right:1px solid #f1f1f1;margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;}
#goofed-be ul,#goofed-be ol,#goofed-be li{margin:0;padding:0;list-style:none}
#goofed-be .be-tabs{overflow: auto;height: 500px;width:30%;float:left}
#goofed-be .be-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#f1f1f1;text-decoration:none;padding:8px 12px;cursor:pointer}
#goofed-be .be-tabs li a:hover{background-color:#333;color:#fff}
#goofed-be .be-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#goofed-be .be-content,#goofed-be .divider-layer{width:70%;float:right;background-color:#f1f1f1;}
#goofed-be .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#goofed-be .panel{overflow: auto;height: 500px;position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#goofed-be .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#666;line-height:20px;padding:6px 12px;text-decoration:none;outline:0;overflow:hidden}
#goofed-be .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#goofed-be .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#goofed-be .panel li:nth-child(even){background-color:#f1f1f1}
#goofed-be .panel li a:hover,#goofed-be .panel li a:focus,#goofed-be .panel li a:hover time,#goofed-be .panel li.bold a{background-color:rgba(0,0,0,0.03);color:#444;outline:0}
#goofed-be .panel li.bold a:hover,#goofed-be .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
::-webkit-scrollbar{border-radius:5px;width:10px;height:10px}
::-webkit-scrollbar-track{background-color:#f1f1f1;}
::-webkit-scrollbar-thumb:hover{background-color:#888}
::-webkit-scrollbar-thumb{background-color:#c1c1c1;transition:all 400ms ease-in-out}
@media(max-width:700px){
#goofed-be ul::-webkit-scrollbar{border-radius:5px;width:10px;height:10px}
#goofed-be ul::-webkit-scrollbar-track{background-color:#333;}
#goofed-be ul::-webkit-scrollbar-thumb:hover{background-color:#888}
#goofed-be ul::-webkit-scrollbar-thumb{background-color:#666;transition:all 400ms ease-in-out}
#goofed-be .be-tabs {border-bottom: 3px solid #f1f1f1;}
#goofed-be .be-tabs,#goofed-be .be-content{overflow: auto;height: 500px;width:auto;float:none;display:block}
#goofed-be .be-tabs li{display:inline;}
#goofed-be .be-tabs li a,#goofed-be .be-tabs li a.active-tab{background-color:#222}
#goofed-be .be-tabs li a.active-tab{background-color:#333;color:#f1f1f1}
#goofed-be .be-content{border:0}#goofed-be .panel li a{font-size:12px;line-height:20px;height:30px;padding:0 12px}
#goofed-be .divider-layer,#goofed-be .panel li time{display:none}}
</style>
<div id="head-tab">
İÇİNDEKİLER</div>
<div id="goofed-be">
</div>
<script>
var goofedbe = {
    blogUrl: "http://www.bloggereklentileri.blogspot.com",
    containerId: "goofed-be",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7, // `Yanlış` "Yeni!"
    newText: " <em style='color:#ff3d00;'>Yeni</em>"
};
</script>
<script async="async" src="https://cdn.rawgit.com/jquerycods/04/master/04.js"></script>

NOT: Kod içerisinde bulunan renk kodlarını kendi blogunuzun renk kodlarına göre düzenleyebilirsiniz.

4- Sayfanızın başlığını ve arama açıklaması ekledikten sonra kod içerisinde bulunan blogUrl: "http://www.bloggereklentileri.blogspot.com", yere kendi blog adresinizi yazın.

Tüm ayarları yaptıktan sonra içindekiler sayfasını yayınla butonuna tıklayın.


Açıklamalar: Blog URL'nizi eklediğinizde blogunuzda bulunan içerik etiketlerine duyarlı olarak çalışır ve tüm tarayıcıların ekranını destekler.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

1 yorum

Bugüne kadar paylaşmış olduğumuz en güzel ve blog için en iyi eklentilerden biri olduğunu söyleyebilirim.

Cevap