Create a cool Sitemap page for your Blogger

Sitemap page is not so much necessary for blogger but it helps to make navigation easier for user and admin also and also it improves page rank of your blog. It shows the latest posts with the text New.
For getting more traffic and providing better service to your visitors, you have to create a neat and clean Sitemap page. The sitemap page automatically updates the latest posts which are categorized by post's labels. No need to update the sitemap page, it automatically updates the latest post. You may take a look on my Sitemap page for better experiences. So now go for the process...


How to do?

Step 1: Fast login to your bloger Dashboard.

Step 2: Now goto Pages > New Page > Blank page.

Step 3: Now give the page title as "Sitemap".

Step 4: Now click on HTML tab.

Step 5: Copy the bellow code and paste the code in the HTML tab.

<style type="text/css">

#techzoop{

width:99%;

margin:5px auto;

border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}

.labl a{

color:#fff;

}

.labl:first-letter{t

ext-transform:uppercase;

}

.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>

<div id="4uengineer">

<script src="https://googledrive.com/host/0B7huuE2RFtfqZklGOURLWkQzM0E/" type="text/javascript"></script>

<script src="http://Your_Blog_Name.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script>

<a href="http://techzoop.blogspot.com/2015/09/create-cool-sitemap-page-for-your.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a>

</div>

Step 6: Now replace Your_Blog_Name.com with your blog's Url. Don't change other codes.

Step 7: Finally click on Publish button and you are done. Now see the page.



Now It's your turn to share this post with your friends and write your reviews in comment box. Feel free to follow us by Email to get our updates and upcoming amazing tutorials direct to your mail id...

Share on Google Plus

About Techzoop