Create Sitemap Page in Blogger Prajjwal Rajput Thursday, June 19, 2014 No Comment

Hello Friends we're previously shared an amazing widget and simple plugin for Blogger blogs click this link Recent Posts Widget for Blogger Blogs and today I am back with another widget and plugins. When you surfing our blog you might have seen Sitemap Page link. If you've not seen your favorite posts then have look on our blog's sitemap page. Sitemap is very necessary for Ads. Sitemap page help you to make the navigation easier and also improve your page rank. It also helps your visitor to easily find their post sort by labeled. It also your blogs internal linking this is the best thing of this sitemap page because in this sitemap page you will see all the published and latest or recent posts on your blogger blog. It also helps search engine's crawler to index the content and webpage easily. So, in this tutorial we're going to share this sitemap page for blogger blogs.

How It Work?

Before add this sitemap page in your blogger blog. I would like to explain you that how it work on blogger blog. First of all this is simple and clean sitemap page which is made for specially based on blogger platform
blogs. It only available in one color theme that is Blue which you can see in Sitemap page link. This is automated sitemap page which is automatically adds your last time published posts in other words, this widget added your latest posts automatically without touching this page it so even better for us we don't need to change and update this page just after added in your blog. It will do all the work itself. This Sitemap page, you can see your post categorized by labels which is better for visitors that they can any type of posts or articles in this page easily. This sitemap Page making from using the CSS and JavaScript.

How To Create Sitemap page in Blogger Blog?

It is the most easiest task to add Sitemap page in your blogger blog. Just follow the given below steps.

• Go to Blogger Dashboard>>Pages
• Click on New Page>>Blank Page
• Enter your Page title (Recommended Sitemap)
• Go to HTML Tab like below image

• Paste the below code in there HTML Tab.

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style type="text/css">
#toc{
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>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.nextbloggertricks.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

• Replace  http://www.nextbloggertricks.blogspot.com with your blog URL
• Click on publish Button
• Finish Enjoy!

Final Words

I hope you can add this sitemap page in your blogger blog properly, if not? you're getting error during this process please leave a comment and don't forget to like our Facebook page.

Happy Blogging!

Tweet

Tags: Posts