Skip to main content

How to Create a Smart Sitemap in Blogger

May be you have seen many tutorial to create a sitemap page for your website. Today i will share my own used sitemap code for your websites. This sitemap code help your readers to see your all of posts with date and labels.

How to Add a Full Sitemap to Blogger


Step 1: Login your Blogger Site and select your blog
Step 2: Then Go to Pages and click on New page
Step 3: Click on HTML tab and delete all of code then paste following code inside the empty box.

<style type="text/css">
#bp_toc {
    background: #FFFFFF;
    border: 0 solid #000000;
    margin-top: 10px;
    padding: 10px 0;
    width: 100%;
}
h3.bp_toc_title {
    font-size: 28px;
    line-height: 30px;
    padding-top: 40px;
    margin: 0 0 20px;
}
#bp_tocm {
    margin-right: 30px;
}
#bp_toc a {
    text-decoration: none !important;
}
#bp_toc a:hover {
    text-decoration: underline !important;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #4e4949;
    border-bottom: 5px solid #dfdfdf;
    padding: 10px;
    width: 50%;
}
.toc-entry-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.toc-header-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    width: 15%;
}
.toc-header-col3 {
    width: 35%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
    color: #EBEBEB;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.4em;
    text-decoration: none;
    border-collapse: separate;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    background: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    padding: 10px;
}
.toc-entry-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    color: #45818E;
    font-family: 'Verdana',Arial,sans-serif;
    font-size: 12px;
}
.toc-note {
    background-color: #4e4949;
    color: #EBEBEB;
    display: inline-block;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #dfdfdf;
}
</style>

<div id='bp_tocm'>
<div id='bp_toc'>
<script type='text/javascript'>
//<![CDATA[
var postTitle=[],postUrl=[],postDate=[],postSum=[],postLabels=[],sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0; function loadtoc(c){if("entry"in c.feed){var d=c.feed.entry.length;totalEntires+=d;totalPosts=c.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var b=document.createElement("script");b.type="text/javascript";startindex=totalEntires+1;b.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc");tocdiv.appendChild(b)}for(b=0;b<d;b++){for(var a=c.feed.entry[b],e=a.title.$t,k=a.published.$t.substring(0,10),l,f=0;f<a.link.length;f++)if("alternate"== a.link[f].rel){l=a.link[f].href;break}var g="content"in a?a.content.$t:"summary"in a?a.summary.$t:"",g=g.replace(/<\S[^>]*>/g,"");if(g.length>numChars)var g=g.substring(0,numChars),h=g.lastIndexOf(" "),g=g.substring(0,h)+"...";h="";if("category"in a){for(f=0;f<a.category.length;f++)h+="<a href=\"javascript:filterPosts('"+a.category[f].term+"');\" title=\"Click here to select all posts with label '"+a.category[f].term+"'\">"+a.category[f].term+"</a>, ";a=h.lastIndexOf(",");-1!=a&&(h=h.substring(0, a))}postTitle.push(e);postDate.push(k);postUrl.push(l);postSum.push(g);postLabels.push(h)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc());sortPosts(sortBy);tocLoaded=!0}function filterPosts(c){postFilter=c;displayToc(postFilter)}function allPosts(){postFilter="";displayToc(postFilter)} function sortPosts(c){function d(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var b=0;b<postTitle.length-1;b++)for(var a=b+1;a<postTitle.length;a++)"titleasc"==c&&postTitle[b]>postTitle[a]&&d(b,a),"titledesc"==c&&postTitle[b]<postTitle[a]&&d(b,a),"dateoldest"==c&&postDate[b]> postDate[a]&&d(b,a),"datenewest"==c&&postDate[b]<postDate[a]&&d(b,a)} function displayToc(c){var d=0,b,a="Click to sort by title",e="Click to sort by date",k="";"titleasc"==sortBy&&(a+=" (descending)",e+=" (newest first)");"titledesc"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"dateoldest"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"datenewest"==sortBy&&(a+=" (ascending)",e+=" (oldest first)");""!=postFilter&&(k="Click to show all posts");b="<table><tr>";b+='<td class="toc-header-col1">';b+='<a href="javascript:toggleTitleSort();" title="'+a+'">POST TITLE</a>'; b+="</td>";b+='<td class="toc-header-col2">';b+='<a href="javascript:toggleDateSort();" title="'+e+'">POST DATE</a>';b+="</td>";b+='<td class="toc-header-col3">';b+='<a href="javascript:allPosts();" title="'+k+'">LABELS</a>';b+="</td>";b+="</tr>";for(a=0;a<postTitle.length;a++)""==c?(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++): (z=postLabels[a].lastIndexOf(c),-1!=z&&(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++));b+="</table>";c=d==postTitle.length?'<div class="toc-note">Displaying all '+postTitle.length+" posts<br/></div>":'<div class="toc-note">Displaying '+d+" posts labeled '"+(postFilter+"' of "+postTitle.length+" posts total<br/></div>");tocdiv.innerHTML= c+b}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc";sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest";sortPosts(sortBy);displayToc(postFilter)}function showToc(){tocLoaded?(displayToc(postFilter),document.getElementById("toclink")):alert("Just wait... TOC is loading")} function hideToc(){document.getElementById("toc").innerHTML="";document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">\u00bb Show Table of Contents</a> <img src="http://chenkaie.blog.googlepages.com/new_1.gif"/>'};
//]]>
</script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc' type='text/javascript'></script>
</div>
</div>
Step 4: Don't click on Compose Besides code will not work.
Step 5: Click on Options from right side and tick on Don't allow from Readers comments.
Step 6: And now click on Publish.
Labels:

Comments

  1. Unknown21 October 2018 at 23:57

    I think that I'm into your pieces of writing. I wait for your posts every week. I learn many new interesting things from the articles. The information is essential for me. I want to thank you for sharing.
    https://autoketing.com/
    Discount master
    Product discount master app

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Remove Powered by Blogger – Attribution Widget?

In this article, I will be demonstrating how to remove or hide attribution widget ‘Powered by Blogger’ in footer of blogger blogspot blogs.  Before going to the process,  backup your blogger template , while editing html code if anything goes wrong or template modified design doesn’t work or looks good you can restore from backed up template.  Here I have demonstrated you two methods for removing attribution widget. Some blogger templates may not support method 1 then you need to follow method 2 for successfully removing attribution widget. Method 1: Remove ‘Powered by Blogger’ by unlocking Attribution widget Step 1 : Go to your blog “Template” | click on “Edit HTML”. Step 2 : Here on drop-down “jump to widget” option and select Attribution 1 as shown below Step 3: After selecting Attribution 1 widget you will be able to see this line <b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’>  on your blogger template. Step 5: Once done click on...
15 comments
Read more

How to get Google Assistant on your Windows, Mac, or Linux Machine

Google Assistant is Google’s answer to Amazon’s Alexa smart home assistant. Initially only available with limited functionality in the Google Allo application, Google Assistant later rolled out with the Google Home and Pixel smartphones to bring the full power of Google’s assistant to consumers. After a few months of waiting, smartphones running Android 6.0+ also received Google Assistant, and just a few days ago Google launched the Google Assistant SDK which allows Assistant to be run on basically any platform. Today, we will show you how to install Google Assistant onto your Windows, Mac, or Linux machine using Python. Note: at this point in time, this is purely for educational purposes. There’s no fancy GUI for you to play with, and installing Assistant requires you to use the command line. Get Google Assistant on Windows/Mac/Linux Machines Requirements: Python 3 You’ll need to have Python installed no matter whether or not you are using W...
Post a Comment
Read more

The four yugas (Era or Epoch) in Hinduism

A yuga is the period-of-time or ages. In Hinduism, the Chatur-yuga (Four-Yuga) are large time periods characterizing and defining humans as well as social development on the earth. There are four different yugas, (Chatur---> Four) and each of them have their own feature in history. Let's see their names: Satya Yuga (सत्य युग) Treta Yuga (त्रेता युग) Dwapara Yuga (द्वापर युग) Kali Yuga(कली युग) Let's learn briefly on them: 1. Satya Yuga: It is also called as Krita yuga, which is the first of the yuga. Satya means truth. It lasted for 17,28,000 years or 4800 Divine years. It is the truth or golden age, where all humans were good and very religious. It was the first and best yuga without crime and all humans were kind and friendly. It is called Krita Yuga as there was one religion and all men were saintly. Humans used to be 33 feet in height and average human lifespan was of 1,00,000 years.   The bull of   Dharma  symbolizes that morality stood on all four legs durin...
Post a Comment
Read more