How to Add Sitemap page on Blogger.
Sitemap Widget on Blogger||How to Add Sitemap page on Blogger 2020?
Today, I am going to share another Most important Blogger Widgets by Demand of many bloggers that is how to add a sitemap widget on Blogger. In this post, you will know about the Sitemap Widget and its Benefit.
Table of Contents
- What is Sitemap on the blogger?
- What is its Benefit or Advantage?
- How to Install on blogger?
- Final decision or Conclusion.
What is Sitemap on Blogger?
In the Blogger, an Archive widget had provided that contains an archive of all blog articles based on publish time. Many templates provide a Sitemap page in the HTML section but sitemap work only on a premium template. You can't paste any outer code in the Html edit templet section because all are not user Friendly or Responsive code.
However, because it is the package in the form of a widget, the customization is limit and the aesthetic of the layout is hard to adjust. So to make it more organized and Unique, here Blog Plugin Free will share a Users friendly and Responsive Html code on How to Add a Sitemap Widget on Blogger.
What's it Benefit? ( Sitemap on Blogger)
The advantage of Sitemap How to Add a Sitemap Widget on Blogger is that the blog appears more professional than before. Besides, visitors can also view and search for all of our blog articles easily. Of course, it will add a plus for the blog when visitors open any articles on this sitemap widget.
- The blog looks Professional
- Visitors easy find your blog
- Plus number for your blog
- All blog appears directly in Sitemap with labels, post title and published date
Now, It's your time to make your blog professional and attract more visitors.
Note: All code Provided by Arlina Code. This code is Unique and Responsive for only bloggers.
Related Post
Okay, now get on with it, the way to apply is easy.
Please follow the steps below:
How to Add a Sitemap Widget on Blogger
First, go to blogspot> Pages> Create a new Page> Add the code below on the HTML tab of the page post and Publish it.
<div class="separator" style="clear: both; text-align: center;"> <a href="#" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="#" title="Sitemap Arlina Code" /></a></div> <div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=99999&callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.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{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7} #bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px} #bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)} @media screen and (max-width:768px) { #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}} </style>
Then click Publish page and See result.
After pasting any code in the Html page if you want to make a few changes with your style here you can change.
<a href="#" with your image (Imgae format Webp) url , <img alt="#" enter title only.
Height =444 and width =1200 You can change with your Compatibility.
Src="#" enter image url
Finally
That's it from Blog Plugin Free on how to add sitemap on Blogger. I hope you like this post and want to add in your website. I hope before paste any code to your website you read and follow above steps Carefully. If you have any problems with this code please contact us. We will help you.
Thanks.