How To Make A Stylish Sitemap with HTML and CSS On Blogger

In this article, I will show you how you can add a stylish sitemap with Html and CSS On Blogger

How To Make A Stylish Sitemap with HTML and CSS On Blogger

Now Follow My Step:

  • Go to blogger.com then click on Theme then click on Edit HTML
  • Click on the code area and Press Ctrl+F then your search box will open
  • Now search for his code ]]></b:skin>
  • Copy this below CSS Code:
  • @import url('https://fonts.googleapis.com/css?family=Muli:400,700');
    img{background:#ecf0f1;width:100%;max-width:100%;height:auto;margin-bottom:15px;transition:all .9s}
    .post-body a.img,.post-body .separator a{margin-left:0!important;margin-right:0!important}
    body {
      background: #ecf0f1;
      background: linear-gradient(to bottom, #B721FF, #2AF598, #fec051, #FEE140, #FA709A);
      background-size: 100%;
      background-repeat: no-repeat;
      font-family: 'Muli', sans-serif;
      margin: 0;
      padding: 0;
      position: relative;
      line-height: normal;
    }
    body:before {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: -1;
      background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), #21D4FD 75%);
    }
    a{color:#294db4;text-decoration:none;transition:all .3s}a:hover{color:#2141a0}
    #wrapper{
      max-width: 970px;
      margin: 4% auto;
      padding: 20px;
      background: #fff;
      color: #222;
      font-size: 16px;
      line-height: 1.6;
      border-radius: 22px
    }
    
    #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}}
  • Now hit Save Theme
  • Now go to pages and create a new page and take it to name Sitemap then click on HTML then paste this code
  • <div id='wrapper'>
    <div id="bp_toc">
    </div>
    <script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="https://eclipse-template.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
    </div>
Sushant Karn

I am Sushant karn Student of Software Engineer, and UI/UX designer from Nepal having 2 years of experience in development and designing. I love to play solve the user problem. I assure the best and Quality services and on-time service for your needs. If you have any questions regarding my services, feel free to contact me. Thanks facebook twitter youtube instagram

Post a Comment

Previous Post Next Post