How To Create A Stylish SiteMap Page On Blogger 100% Working

How To Create A Stylish SiteMap Page On Blogger 100% Working

On any types of website sitemap is a important part of it so Create A Stylish SiteMap Page On Blogger. Blog All Post sitemap is one of the best needed widgets for every blogs or website.

If you  are creating blog then you should must create a page called sitemap page because if you wanna show your blog or website archives to anyone who is visiting your blog then you need to add this widget.

If you are a WordPress user then you will get various plugins which is available free to create a stylish sitemap page but on the blogger, there is only one way to create a sitemap page and it’s using custom code.

So in this article, I will talk about how you can create a stylish sitemap page on your Blogger blog. Through this article you will know How To Create A Stylish SiteMap Page On Blogger 100% Working.

Why SiteMap is Necessary of Any kind of blog

A sitemap page is a important for all  the types of blogs or website because google search engine always asks for a sitemap of your blog that you can submit to google webmaster to rank or index your full website on google. If you want to show all of your website post in a list format in a single page then sitemap is the best way to show it. On a well designed sitemap,  visitors can f easily filter the post according to their needs such that by category, time, etc. So the sitemap help to increase your user-friendliness to your website with visitors. So we can  say that sitemap is the important for any kind blogs.

How To Create A Stylish SiteMap Page On Blogger

Now start the main part of this article i.e, how you can create a stylish sitemap page on Blogger. Login to your blogger account then simply go to the page section and then click on + icon to create a new page then take the page name it sitemap. Now copy the codes from below and paste to that page which you named sitemap before pasting convert your post setting composed to edit html and after pasting save the changes . Now your Stylish Sitemap page created successfully.

<div class="separator" style="clear: both; text-align: center;">
<a href="" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="" title="Sitemap Arlina Code" /></a></div>

<div id="bp_toc">
<script src="" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;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}
@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}}


I hope you have enjoyed this article as well the code is not made by me this sitemap code is created by arlina. you can visit that website from this URL Thanks for visiting ☺.

Also Read :


Please enter your comment!
Please enter your name here