If You Want top backlinks or free guest posting on our blog Lets do it Join in Google News
Home
Blogger Widgets
JavaScript

How to Display Total Website Statistics on Blogger

How to Display Number of Website Statistics on Blogger - This article will discuss how to create a widget or display statistics on the number of posts
6 Read time
 
How to Display Total Website Statistics on Blogger
How to Display Total Website Statistics on Blogger

How to Display Total Website Statistics on Blogger

How to Display Number of Website Statistics on Blogger - This article will discuss how to create a widget or display statistics on the number of posts on a blogger website.

For an example of a demo display, you can see it at the end of this article. Then how to apply it? You can follow these steps.

Website Statistics Total Page on Blogger:

Open the Blogger Dashboard
Go to Page menu > Add Page
Then copy and paste the code below in HTML mode

If it is then Update

<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{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:1px solid rgba(155,155,155,0.15);border-radius:5px}
.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:100%}}
</style>

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

<div class='Stats_container'>

  <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.16.9371
              <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' />
            </line></path
></path
></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' />
            </path
></line></line></line></g>
          </svg>
          Comments
        </div>
        <div class='statsNumber'>
          <script src='/feeds/comments/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>

  </div>
</div>

Info: You can set the CSS code according to the appearance of your blog

Display Demo

Website Statistics Count Widget on Blogger

  1. Open the Blogger Dashboard
  2. Enter the Layout menu
  3. Add a Gadget > Select HTML/Java Script
  4. Then copy and paste the code below on the gadget
  5. If already then Save
<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{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:1px solid rgba(155,155,155,0.15);border-radius:5px}
.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:100%}}
</style>

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

<div class='Stats_container'>

  <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.16.9371
              <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' />
            </line></path
></path
></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' />
            </path
></line></line></line></g>
          </svg>
          Comments
        </div>
        <div class='statsNumber'>
          <script src='/feeds/comments/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>

  </div>
</div>

Info: You can set the CSS code according to the appearance of your blog

If this article is useful, you can share and recommend it to friends who need it, if you have other questions, you can ask via comments.

Thanks for reading: How to Display Total Website Statistics on Blogger,Dont Forget to Book Mark The Blooger-store.com

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.
#Blogger Widgets #JavaScript

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It Look like 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.