Subscribe my YouTube channel: Click to Subscribe!

How to Display Entire Blog Stats in Blogger Website | satyakipathshala.in

Today in this article, I will show you how to Display Blog Status on Blogger Website. You can simply show your blog stats to your reader by simply app
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Today in this article, I will show you how to Display Blog Status on Blogger Website.

How to Display Entire Blog Stats in Blogger Website | satyakipathshala.in
Display Entire Blog Stats on Blogger Website

First of all, you have to log in to your blogger dashboard. Then you can add the following code to your Blogger Template's home page or to your About Us page.

HTML
<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>
You can simply change the Hover Border Colour or Background Colour by simply changing the CSS code here.

If you find any issues after applying, then drop me a message on Instagram. See you in the next post.

Post a Comment

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.