Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger jQuery » Blogger Widget » How-to » How to create sitemap page in blogspot blog

How to create sitemap page in blogspot blog

I have already shared 1-2 articles about sitemap in my older posts and today in this article i am going to write a tutorial about the same sitemap topic but its different sitemap widget which not much necessary for blog but in other view its better to have installed in your blog. one of the best advantage of adding sitemap page to your blog is it will make the navigation easier and also it will help to improve SEO. How it can be helpful in improving SEO ? Well, this sitemap page will automatically add your all recent post with its labels So, thus it will help search engine's spider to crawler your all posts and it will index content and webpage easily, other than this it also helps to increase pagerank of your blog because it creates numbers of internal links.


Well, I have also installed sitemap page in this blog, You can see how actually it works and looks before implementing in your blog :)

Related : Blogger XML Sitemap Generator

How to create sitemap page in blogger?

To create sitemap page in blogger, first thing you will need to create a page that you can do by navigate from your blogger dashboard to Pages then click "New page" option then Page Editor will be open. turn it to HTML mode and place following code just inside it.

<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>

<div id="toc">
<script src="http://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="http://www.YourBlogURL.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

After adding above code inside page editor, Replace "http://www.YourBlogURL.com" with URL of your blog. And finally, Click "Publish" button and you're done !

That's it , If you have any problem while implementing sitemap page in your blog, Please drop your comment below and also share your views about it. Do share this post with your blogger friends if you really like this and going to use on your blog. Thanks !
Add Comment
Blogger jQuery Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ▼  July (14)
      • Related Posts Widget with Thumbnails and Summary f...
      • How to Embed Audio MP3 Player In Blogger Post
      • Recent Posts With Thumbnails For Particular Label ...
      • Add Background Color or Image in Blogger Posts Usi...
      • Customize Blogger Threaded/Nested Comments with CSS
      • Simple Recent Posts Widget for Blogger / Blogspot
      • How to Add Flash Animated Label Cloud Widget to Bl...
      • Supreme Blogger Template (Responsive) Free Download
      • How to add alexa rank widget to blogger / website
      • How to Redirect Blogger 404 Error (Page Not Found)...
      • How to Add Custom Popular Posts Widget to Blogger
      • How to Add CSS Code in Blogger Template
      • Add Stylish Most Commented Posts Widget to Blogger
      • How to create sitemap page in blogspot blog
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates