![]() |
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.
Table of Contents
Halaman Jumlah Statistik Situs Web di Blogger
- Buka Dasbhoard Blogger
- Masuk ke menu Halaman > Tambahkan Halaman
- Lalu salin dan paste kode di bawah ini pada mode HTML
- 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 TampilanWidget Jumlah Statistik Situs Web di Blogger
- Buka Dasbhoard Blogger
- Masuk ke menu Tata Letak
- Tambahkan Gadget > Pilih HTML/Java Script
- Lalu salin dan paste kode di bawah ini pada gadget tersebut
- 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