Beranda
Blogger
Tips

Cara Menampilkan Jumlah Statistik Situs Web di Blogger

Cara Menampilkan Jumlah Statistik Situs Web di Widget dan Halaman Blogger
Cara Menampilkan Jumlah Statistik Situs Web di Blogger
Widget Statistik Blogger

Cara Menampilkan Jumlah Statistik Situs Web di Blogger - Artikel kali ini kita akan membahas bagaimana cara membuat widget atau menampilkan statistik jumlah postingan di situs web blogger.

Untuk contoh tampilan demo kamu bisa melihatnya di akhir artikel ini. Lalu bagaimana cara menerapkannya? Kamu bisa mengikuti langkah-langkah berikut ini.

Table of Contents

Halaman Jumlah Statistik Situs Web di Blogger

  1. Buka Dasbhoard Blogger
  2. Masuk ke menu Halaman > Tambahkan Halaman
  3. Lalu salin dan paste kode di bawah ini pada mode HTML
  4. Jika sudah kemudian Perbarui
<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}
.webStsT{background-color:#fffdfc;display:flex;justify-content:center;padding:8px;width:100%;margin:12px auto;border:1px solid rgba(155,155,155,0.15);border-radius:5px}
.webStsT:hover{border:1px solid rgb(32 32 32 / 39%)}
.webStsT .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}
.webStsT .statsName{display:inline-flex;align-items:center;font-size:16px}
.webStsT .statsNumber{font-family:inherit;font-size:30px;margin-top:6px;font-weight:normal}
.darkMode .Stats_container{color:#fefefe}
.darkMode .webStsT{background-color:#252526}
.darkMode .website_stats svg{stroke:#fefefe}
@media screen and (min-width:641px){.website_stats{flex-direction:row}.webStsT{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='webStsT'>
      <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='webStsT'>
      <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>

Info: Kamu bisa atur kode CSS sesuai dengan tampilan Blog kamu

Demo Tampilan

Widget Jumlah Statistik Situs Web di Blogger

  1. Buka Dasbhoard Blogger
  2. Masuk ke menu Tata Letak
  3. Tambahkan Gadget > Pilih HTML/Java Script
  4. Lalu salin dan paste kode di bawah ini pada gadget tersebut
  5. Jika sudah kemudian Simpan
<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.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' />
            </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: Kamu bisa atur kode CSS sesuai dengan tampilan Blog kamu

Demo Widget

Penutup

Nah itu tadi Cara Menampilkan Jumlah Statistik Situs Web di Blogger. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada pertanyaan lain bisa bertanya melalui komentar.

#Keep Reading and Keep Working
Gabung dalam percakapan