BloggerEklentiler

Blogger Site Haritası Sayfası Oluşturma

Blogger Site haritası sayfası, her sitede bulunması gereken en önemli sayfaların başında geliyor. Site haritası sayfası oluşturarak, kullanıcıların daha sitenizde daha çok zaman geçirmesine ve aradığı şeyi daha çabuk bulmasını sağlayabilirsiniz.

Bu yazımız ile ekleyeceğimiz site haritası, her kategorinin son yazılarının listesini gösterecek şekilde tasarlanmıştır. Bu site haritası sayfası, hızlı bir şekilde yüklenir ve site hızınızı etkilemez. Gelin birlikte bu güzel site haritası sayfasını 3 adımda Blogger sitemize ekleyelim.

1 Adım: Site Haritası CSS Kodlarını Ekleme

Kodları eklemeden önce her ihtimale karşı sitenizin yedeğini almayı unutmayın.

Yapmanız gereken ilk şey Blogger hesabınıza giriş yapın. Site haritası sayfasını eklemek istediğiniz sitenizi seçin.Ardından Tema > HTML’yi düzenle deyin. Sonra Ctrl+Fyapıp, arama butonu ile: ]]></b:skin> etiketini arayın. Bulduğunuz bu etiketin hemen üstüne aşağıda ki CSS kodunu yapıştırın.

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ .mapasite { margin-bottom: 10px; background-color: #F8F8F8 } .mapasite.active .mapa { display: block } .mapasite .mapa { display: none } .mapasite h2 { background-color: #EEE; color: #000; font-size: 15px; padding: 10px 20px; border-radius: 2px; margin-bottom: 0; cursor: pointer; font-weight: 700 } .mapasite h2 .botao { font-size: 18px; line-height: 1.2em } .botao .fa-minus-circle { color: #f30 } .mapapost { overflow: hidden; margin-bottom: 20px; height: 70px; background-color: #FFF } .mapa { padding: 40px } .map-thumb { background-color: #F0F0F0; padding: 10px; display: block; width: 65px; height: 50px; float: left } .map-img { width: 65px; height: 50px; overflow: hidden; border-radius: 2px } .map-thumb a { width: 100%; height: 100%; display: block; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .map-thumb a:hover { -webkit-transform: scale(1.1) rotate(-1.5deg)!important; -moz-transform: scale(1.1) rotate(-1.5deg)!important; transform: scale(1.1) rotate(-1.5deg)!important; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .mapapost .wrp-titulo { padding-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.3em; padding-left: 25px; padding-right: 10px; display: block; overflow: hidden; margin-bottom: 5px } .mapapost .wrp-titulo a { } .mapapost .wrp-titulo a:hover { color: #f30; text-decoration: underline } .map-meta { display: block; float: left; overflow: hidden; padding-left: 25px; } .mapasite h2 .botao { float: right }

2 Adım: Site Haritası HTML Kodlarını Ekleme

Site haritamızın CSS kodlarını ekledikten sonra şimdi sıra HTML kodlarını yüklemekte. Bu sefer Ctrl+F ile arama botunu ile: </body>  etiketini arayın. Bulduğunuz bu etiketin hemen üstüne aşağıda ki HTML kodunu yapıştırın.

Çok Önemli : Kodun içinde bulunan  yazıburaya yere  sitemap yazın.  Kod içerisinde site haritam açılacağı için içerisine sitemap yazamadım.

<script type=’text/javascript’> //<![CDATA[ var text_month = [, “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sept”, “Oct”, “Nov”, “Dec”]; var no_image_url = “http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png”; var static_page_text = $.trim($(‘.static_page .post-body’).text()); if (static_page_text === “[yazıburaya]”) { var postbody = $(‘.static_page .post-body’); $.ajax({ url: “/feeds/posts/default?alt=json-in-script”, type: ‘get’, dataType: “jsonp”, success: function(dataZ) { var blogLabels = []; for (var t = 0; t < dataZ.feed.category.length; t++) { blogLabels.push(dataZ.feed.category[t].term) } var blogLabels = blogLabels.join(‘/’); postbody.html(‘<div class=”siteLabel”></div>’); $(‘.static_page .post-body .siteLabel’).text(blogLabels); var splabel = $(“.siteLabel”).text().split(“/”); var splabels = “”; for (get = 0; get < splabel.length; ++get) { splabels += “<span>” + splabel[get] + “</span>” } $(“.siteLabel”).html(splabels); $(‘.siteLabel span’).each(function() { var mapLabel = $(this); var mapLabel_text = $(this).text(); $.ajax({ url: “/feeds/posts/default/-/” + mapLabel_text + “?alt=json-in-script”, type: ‘get’, dataType: “jsonp”, success: function(data) { var posturl = “”; var htmlcode = ‘<div class=”mapa”>’; for (var i = 0; i < data.feed.entry.length; i++) { for (var j = 0; j < data.feed.entry[i].link.length; j++) { if (data.feed.entry[i].link[j].rel == “alternate”) { posturl = data.feed.entry[i].link[j].href; break } } var posttitle = data.feed.entry[i].title.$t; var author = data.feed.entry[i].author[0].name.$t; var get_date = data.feed.entry[i].published.$t, year = get_date.substring(0, 4), month = get_date.substring(5, 7), day = get_date.substring(8, 10), date = text_month[parseInt(month, 10)] + ‘ ‘ + day + ‘, ‘ + year; var tag = data.feed.entry[i].category[0].term; var content = data.feed.entry[i].content.$t; var $content = $(‘<div>’).html(content); var src2 = data.feed.entry[i].media$thumbnail.url; htmlcode += ‘<div class=”mapapost”><div class=”map-thumb”><div class=”map-img”><a href=”‘ + posturl + ‘” style=”background:url(‘ + src2 + ‘) no-repeat center center;background-size: cover”/></div></div><h3 class=”wrp-titulo”><a href=”‘ + posturl + ‘”>’ + posttitle + ‘</a></h3><div class=”map-meta”><span class=”p-author”>’ + author + ‘</span><span class=”p-date”>’ + date + ‘</span></div></div>’ } htmlcode += ‘</div>’; mapLabel.replaceWith(‘<div class=”mapasite”><h2>’ + mapLabel_text + ‘<span class=”botao”><i class=”fa fa-plus-circle”></i></span></h2>’ + htmlcode + ‘</div>’); $(document).on(‘click’, ‘.mapasite h2’, function() { $(this).parent(‘.mapasite’).addClass(‘active’); $(this).find(‘.botao .fa’).removeClass(‘fa-plus-circle’).addClass(‘fa-minus-circle’); }); $(document).on(‘click’, ‘.mapasite.active h2’, function() { $(this).parent(‘.mapasite’).removeClass(‘active’); $(this).find(‘.botao .fa’).addClass(‘fa-plus-circle’).removeClass(‘fa-minus-circle’); }); } }); }); } }); } //]]> </script>

Ardından Temayı Kaydet deyip panelinizde ki sayfalar sekmesine gidin.

3 Adım: Site Haritası Sayfaya Ekleme

Site haritası sayfasını oluşturmanın en önemli bölümüne geldik. Bu bölümde dikkatli yapmanız gerekiyor. Blogger Kontrol Paneli> Sayfalar > Yeni Sayfa Ekle ile Sayfa başlığına Site haritası girin. Ardından sağ menüdeki seçenekler sekmesinde Okuyucu Yorumları bölümünde İzin verme mevcut olanı gizle seçeneğini tıklıyoruz. Sonrasında aşağıdaki kodu sayfamızın içerik kısmına yapıştırdıktan sonra Yayınla’ya tıklayarak sayfamızı yayınlıyoruz.

Çok Önemli : Görselde ki Sitemap yazısı benim site haritamı  bu yazıya eklediği için yazamadım.  bunun için Sitemap yazısını görselde ki gibi [ ] işaretleri arasına yazarak sayfanıza ekleyin.Blogger Site Haritasi

 

DEMO

Sonuç: Evet! artık siteniz için bir site haritası sayfası oluşturdunuz. Bu sayfaya sitenizin menülerinde yer verebilirsiniz. Blogger’a site haritası sayfası ekleme yazımızın sonuna geldik.Umarım bu yazımızdan faydalanırsınız. Soru ve görüşlerinizi yorum bölümü ile bizimle paylaşabilirsiniz. 

Bu Yazıyı Puanla

İlgili Yazılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön düğmesi
Kapat