Site haritası, ziyaretçilerin etiketlere veya kategorilere dayalı makaleler seçmesini kolaylaştırabilecek blog içeriklerinin bir listesidir. Bir kitap gibi, bir blogda da ziyaretçilerin mevcut tüm içeriği keşfedebilmeleri için bir içindekiler tablosu gibi bir gezinti gerekiyordu. Yararlı bir site haritası, ziyaretçilerin kaybolmamalarına yardımcı olan bir harita gibidir. Hemen, etiketlere / kategorilere göre Blogger'da otomatik içindekiler tablosunun nasıl oluşturulacağını anlatmaya çalışacağız.
Öncelikle Blogger giriş yapıyoruz.
Daha sonra Blogger Tema>Html Düzenle'ye tıklıyoruz.
Sonra da Html editör sayfamızda ]]></b:skin> kodunu Ctrl+f yardımıyla aratalım ve bulduğumuz kodun üzerine gelek şekilde aşağıda ki CSS kodlarını ekleyelim.
/*
Blogger Sitemap Dropdown
Original Post: https://www.igniel.com/2018/08/daftar-isi-sitemap-dropdown.html
*/
/* Blogger Sitemap Dropdown */
#sitemap1 {background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc;}
#sitemap1 .loading {padding:10px 15px; color:#666;}
#sitemap1 .judul {background-color:#008c5f; color:#fff; font-size:125%; font-weight:500; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease;}
#sitemap1 .judul:last-child {border-bottom:0px;}
#sitemap1 .judul:hover {background-color:#1d2129;}
#sitemap1 .judul:after {content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease}
#sitemap1 .judul.aktif {background-color:#1d2129;}
#sitemap1 .judul.aktif:after {border-color:#fff transparent transparent; top:5px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg)}
#sitemap1 .konten ol, #sitemap1 .konten ol li {list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:300;}
#sitemap1 .konten ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap1 .konten ol li:nth-of-type(odd) {background-color:#fff}
#sitemap1 .konten ol li a {text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease;}
#sitemap1 .konten ol li a:hover {color:#000;}
BODY {max-width:800px; padding:10px; margin:auto; font-family:'Rubik', sans-serif; font-size:14px;}
Şimdi sıra da Site Haritası'nı oluştarmaya geldi.
Bunun için yine Blogger giriş yapıyoruz.
Daha sonra Sol tarafta bulunan seçeneklerden Sayfalar sekmesine tıklayalım.
Burada Yeni Sayfa'ya tıklıyoruz.
Yeni Sayfa'da HTML sekmesine geçiyoruz ve aşağıda ki HTML kodlarını oraya ekliyoruz.
<div id="sitemap1"><div class="loading">Loading....</div></div>
<script> //<![CDATA[
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"judul\">'+n[g]+'</div>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://bloggerpaylas.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
//]]> </script>
<link href="https://fonts.googleapis.com/css?family=Rubik:300,500" rel="stylesheet">
NOT: Yukarıda eklediğimiz kodların arasında src="https://bloggerpaylas.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=" bölümünü kendi blog adresiniz ile değiştirmeyi mutlaka unutmayın.
Site Haritası ile ilgili Demo sayfamızdan kontrol edebilirsiniz.
Bütün işlemler bu kadar herkese kolay gelsin arkadaşlar.