How to Add a Sitemap Widget / Pages on Blogger | Droidnur123

 How to Add a Sitemap Widget / Pages on Blogger

In Blogger, there is actually an Archive widget that

contains an archive of all blog articles based on publish time. However, because it is packaged in the form of a widget, the customization is very limited and the aesthetic of the layout is difficult to adjust. So to make it more organized, here Droidnur123 will share How to Add a Sitemap Widget on Blogger.

The advantages of How to Adda Sitemap Widget on Blogger are for the blog to appear more professional than before. In addition, visitors can also view and search for all of our blog articles easily. Of course, it will add a plus for the blog if visitors open certain articles on this sitemap widget.

Okay, just get on with it, the way to apply it is quite easy. Please follow the steps below

How to Add a Sitemap Widget on Blogger

First, go to Bloggers Pages> Create a new Page> Add the code below on the HTML tab of the page post

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgli1c8ZC267Obdc6Mj6MN-MvNvLlp2CyQRLEhyphenhyphenx4G6QjDZrXF-XoibyvHHx84Fv0pKHbEP3kufwQ96qGxzAa2d5BNxMPiWkpLCsi0vyw9e8UD-4RLSlERHx_bsZ8AHAutwH-RwewhKPwGc/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgli1c8ZC267Obdc6Mj6MN-MvNvLlp2CyQRLEhyphenhyphenx4G6QjDZrXF-XoibyvHHx84Fv0pKHbEP3kufwQ96qGxzAa2d5BNxMPiWkpLCsi0vyw9e8UD-4RLSlERHx_bsZ8AHAutwH-RwewhKPwGc/s1600/Sitemap+Arlina+Code.png" style="border: none;" 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&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}

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

Result

Thanks from Dn420 on How to Add a Sitemap Widget on Blogger, hopefully, it is useful For You.

Copyright © DnTech4u

Go to Link