Arama motorlarının web sitelerini kolay bir şekilde indexleyebilmeleri için olmaz ise olmaz teknolojilerden biri site haritalarıdır. Site haritalarını web sitenizin ziyaretçileri kolaylıkla bulamazlar. Fakat arama motorlarının botları bunları kolaylıkla görebilirler.
Blogger ve diğer web sitelerinin hızlı bir şekilde indexlenebilmesi için iyi tasarlanmış site haritalarına ihtiyaçları vardır. Bu bu içerinde kullanacağımız site haritası hem botların sitenizin haritasını görüntülemesine hem de sitenizin ziyaretçilerinin görüntülenmesini sağlayacaktır. Bu blog yazımızda Blogger web sitesine site haritası oluşturmanın adımlarını sizlere aktaracağız.
Blogger Panel den > Sayfalar > Yeni Sayfa alanlarını seçerek sayfa düzenleme alanına gelmelisiniz. Bunun ardından HTML görünümü sekmesinden kodları ekleyeceğimiz alanı açmalısınız.
<style scoped=”” type=”text/css”>
#head-tab{background:#51a8e9;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #51a8e9}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;overflow:hidden}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc{border:1px solid #ccc}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#51a8e9;color:#fafafa}
showDates: false, // `true` to show the post date
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="head-tab">
Site Haritası</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
blogUrl: "blog adresiniz", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showSummaries: false, // `true` to show the posts summaries
showNew: 7, // `false` to hide the “Yeni!” mark in most recent posts, or define how many recent posts are to be marked
numChars: 200, // Number of summary chars
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
newText: " <em style='color:#F2784B;'>Yeni</em>" // HTML for the "Yeni!" text
};
</script>
<script async=”async” src=”https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js”></script>
- Yukarıdaki kodları kopyalayıp ilgili boşluğa yapıştırmalısınız.
- Kodlar içerisinde yer blog adresiniz isimli alana blogger web sitenizin url adresini yazmalısınız.
- Biz bu kodlarda mavi rengi kullandık. Sizler isterseniz 51a8e9 kodunu aratıp yeni bir renk kodu ekleyebilirsiniz.
Umarım bu blog içeriğimiz sizlere faydalı olur. Yorumlarınızı eleştirilerinizi beklediğimizi hatırlatmak isterim. İyi çalışmalar