Blogger'da Site Haritası Sayfası Oluşturma

29.10.17
Blogger'da Site Haritası Sayfası Oluşturma

Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerinde site haritası sayfası oluşturulmalı? Blog yayınlarınızın gün geçtikçe artması, blogunuzda bulunan yayınlara daha hızlı bir erişim sağlanması ve arama motorlarının sıralı blog içeriklerini daha iyi indekslemesi açısından büyük önem arz etmekte.

Daha önceki yazımızda paylaştığımız "Blog Yayınlarında Otomatik İçindekiler Dizini Oluşturma" da arama motorları tarafından blog içeriklerinin indekslenmesinde %100 katkı sağladığını belirtmiştik.

Arama motorlarının sıralı içerikleri daha iyi taramasının nedeni, sıralı içeriklerin daha anlaşılır ve daha kolay okunma rahatlığı sağlamasıdır.

Blog sitesinde site haritası oluşturmak için kullanacağımız site haritası eklentisi 10'ar 10'ar sonsuz yükleme özelliğine sahip. İlk açılışta eklentide görüntülenen yayın sayısı başlığı 10, yükleme butonuna tıklandiğinda her açılışta 10 yayın daha görüntülenir. Yayın sıralaması, en son yayınlanandan başlayarak ilk yayınlanan yayına doğru sıralanır. Her yayının etiketi ve yayınlama tarihi de aynı sütunda yer alır. Ve eklentinin hemen üzerinde blogunuzda ve site haritasında bulunan toplam yayın sayısı hakkında blog ziyaretçilerine bilgi veren sayaç yer alır. Eklentiyi incelemek için aşağıdaki ön izleme butonuna tıklayın.


Şimdi blogunuzda bir site haritası sayfası oluşturmak için aşağıdaki adımları takip edin.

Blog Sitesine Site Haritası Nasıl Eklenir?


Blog sitenizde bir site haritası eklentisi kurulumu yapmak için, blogunuzun yönetici panelinin sol tarafında bulunan Tema sekmesine tıklayın. Açılan panelde şablon editör sayfasını açmak için HTML'i Düzenle butonuna tıklayın ve aşağıdaki adımları uygulayın.

1- Aşağıdaki CSS kodlarını kodunu şablon editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.page-sitemap {
    text-align: left;
}
thead {
    background: #f44336;
    color: #fff
}
table {
    width: 100%
}
thead td {
    padding: 10px;
    border: none;
    margin: 0
}
tbody td {
    padding: 7px;
    background: #f4f4f4
}
.page-sitemap a {
    color: #222
}
.page-sitemap a:hover {
    color: #ff5722
}
</style>
</b:if>

2- Aşağıdaki javaScript kodunu şablon editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function auh(a)
{for(var e=0;e<a.length;e++)var t="<span class='author-name'> "+a[e].name.$t+"</span>";return t}
function ttt(a)
{var e=new Array;e[1]="Ocak",e[2]="Şubat",e[3]="Mart",e[4]="Nisan",e[5]="Mayıs",e[6]="Haziran",e[7]="Temmuz",e[8]="Ağustos",e[9]="Eylül",e[10]="Ekim",e[11]="Kasım",e[12]="Aralık";var t=a.substring(0,4),s=a.substring(5,7),l=a.substring(8,10),n="<span class='recent-date'>"+l+"  "+e[parseInt(s,10)]+"  "+t+"</span> ";return n}
$(function()
{var c=$('.page-sitemap'),counter=1;var r='/feeds/posts/summary?max-results=0&alt=json-in-script';function getLabels(e)
{if(e.category===undefined)
{return"<span>Etiket Yok</span>"}
else
{var labels='<a href="/search/label/'+e.category[0].term+'">'+e.category[0].term+'</a>';return labels}}
function getSitemap()
{var s='/feeds/posts/summary?max-results=10&alt=json-in-script&start-index='+counter;$.ajax({type:"GET",url:s,async:true,contentType:"application/json",dataType:"jsonp",success:function(e)
{var t=e.feed.entry,more=t.length<10?false:true;for(var s=0;s<t.length;s++)
{for(var l,n=t[s],i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel)
{var r=n.link[i].href;break}
if(!more)
{c.find('tfoot').hide()}
var title='<a href="'+r+'">'+n.title.$t+'</a>',date=ttt(n.published.$t),labels=getLabels(n),cc=counter+s;c.find('tbody').append('<tr><td>'+cc+'</td><td>'+title+'</td><td>'+date+'</td><td>'+labels+'</td></tr>')}
counter+=10}})}
$.ajax({type:"GET",url:r,async:true,contentType:"application/json",dataType:"jsonp",success:function(e)
{var content="<h3>Toplam Yayın Sayısı: "+e.feed.openSearch$totalResults.$t+"</h3>";c.append(content);var more=parseInt(e.feed.openSearch$totalResults.$t)<10?false:true;if(e.feed.openSearch$totalResults.$t>0)
{c.append("<table><thead><tr><td>Sıra</td><td>Başlık</td><td>Yayın Tarihi</td><td>Etiketler</td></tr></thead><tbody></tbody></table>");if(more)
{c.find('table').append('<tfoot><tr><td><button class="loading-more">Daha Fazlası</button></td></tr></tfoot>')}
getSitemap()}
else
{c.append("<h4>Başka yayın yok</h4>")}
c.find('.loading-more').click(getSitemap)}})});
//]]>
</script>
</b:if>

Yukarıdaki javaScript kodu içerisinde belirtilen yerden site haritası eklentisinde görüntülenmesini istediğiniz yayın sayısını değiştirebilirsiniz.

Yukarıdaki adımları uyguladıktan sonra şablonu kaydedin.

Blog Sitesinde Site Haritası Sayfası Nasıl Oluşturulur?


Blog sitesinde site haritası sayfası sabit sayfalarda oluşturulur. Blogunuzun yönetici panelinin sol tarafında bulunan menüde blogunuzun sabit sayfalarının yer aldığı "Sayfalar" sekmesine tıklayın. Açılan panelin üst araç çubuğunda görüntülenen "Yeni sayfa" butonuna tıklayın. Açılan sayfanın sol üst köşesinde görüntülenen "Oluştur" ve "HTML" butonlarından "HTML" butonuna tıklayarak HTML editör sayfasını açın ve aşağıdaki adımları uygulayın.

Aşağıdaki HTML kodu sabit sayfanızın HTML editör bölümüne ekleyin.

<p>Açıklama</p>
<div class='page-sitemap'></div>

Yukarıdaki kod içerisinde belirtilen "Açıklama" yerine sayfanızla ilgili birkaç satırlık açıklama ekleyin.

Site haritası sayfanızın başlığını ve arama açıklamasını ekleyin. Arama açıklamasına sayfanızın adını eklemeniz yeterli olacak. En iyi arama açıklaması şu şekilde oluşturulur,

Örnek: Site Haritası Başlığı - Blogunuzun Adı

NOT: Site haritası sayfası başlığını çok uzun oluşturmamaya dikat edin. Örnek: Site Haritası veya Arşiv gibi kısa ve öz başlık oluşturmaya özen gösterin.

Yukarıdaki adımları tamamladıktan sonra sayfayı yayınlayın.

Bu yazımızda site haritası eklentisini kullanarak blog sitesinde bir site haritası sayfası oluşturmayı paylaştım, yayın ile ilgili görüş ve sorularınız için yorum formunu kullanabilirsiniz. Görüşmek üzere kendinize iyi bakın.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

6 yorum

Teşekkürler Eline emeğine Sağlık Çok Hoş Bir Paylaşım Olmuş Bu Arada Head Kodu olan Kısmında ufak Bi hata Var Kapama Kodu Hatalı ( ) Tekrardan Emeğinize Sağlık....

Cevap

Teşekkürler saolun

Cevap

Kodda bulunan eksikliği bildirdiğiniz için ayrıca teşekkür ederim.

Cevap

bunun wordpress olanı var mı

Cevap

Şuan için yok

Cevap
Bu yorum yazar tarafından silindi.