How to Display Website Stats in Blogger

<style>
  .Stats_container {
    font-size: 0.9rem;
    color: #08102b
  }

  .Stats_heading {
    margin: 15px auto;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    font-family: inherit
  }

  .website_stats {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px auto
  }
  

  .webStsC {
    background-color: #fbfbfb;
    display: flex;
    justify-content: center;
    padding: 8px;
    width: 100%;
    margin: 12px auto;
    border:2px solid;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }
  
 .webStsC:hover {
  border: 2px solid indianred;
  }

  .webStsC .stats {
    height: 80px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 35px;
  }

  .Stats_container svg {
    width: 18px;
    height: 18px;
    fill: none !important;
    stroke: #fefefe;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    margin-right: 7px
  }

  .website_stats svg {
    stroke: #08102b
  }

  .webStsC .statsName {
    display: inline-flex;
    align-items: center;
    font-size: 16px
  }

  .webStsC .statsNumber {
    font-family: inherit;
    font-size: 30px;
    margin-top: 6px;
    font-weight: normal
  }

  .darkMode .Stats_container {
    color: #fefefe
  }

  .darkMode .webStsC {
    background-color: #252526;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2)
  }

  .darkMode .website_stats svg {
    stroke: #fefefe
  }

  @media screen and (min-width:641px) {
    .website_stats {
      flex-direction: row
    }

    .webStsC {
      max-width: 46%;
      margin: 12px
    }
  }
</style>

<script>/*<![CDATA[*/ function webStats(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)) } /*]]>*/</script>

<div class='Stats_container'>
  <h2 class='Stats_heading'>Website Stats</h2>

  <div class='website_stats'>
    <!--[ Posts Stats ]-->
    <div class='webStsC'>
      <div class='stats'>
        <div class='statsName'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
            <g transform='translate(2.000000, 2.000000)'>
              <path
                d='M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001' />
              <path
                d='M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z' />
              <line x1='13.009' y1='3.8008' x2='16.604' y2='6.9838' />
            </g>
          </svg>
          Total Posts
        </div>
        <div class='statsNumber'>
          <script src='/feeds/posts/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>

    <!--[ Comments Stats ]-->
    <div class='webStsC'>
      <div class='stats'>
        <div class='statsName'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
            <g transform='translate(2.000000, 2.000000)'>
              <line x1='13.9394' y1='10.413' x2='13.9484' y2='10.413' />
              <line x1='9.9304' y1='10.413' x2='9.9394' y2='10.413' />
              <line x1='5.9214' y1='10.413' x2='5.9304' y2='10.413' />
              <path
                d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z' />
            </g>
          </svg>
          Comments
        </div>
        <div class='statsNumber'>
          <script src='/feeds/comments/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>
    
    
  </div>
</div>