√ Cara Membuat Widget Blogger Statistik View Lebih Menarik

Cara Membuat Widget Blogger Statistik View Lebih Menarik

2/01/2023

Widget Statistik View bagi sebagian kalangan blogger menjadi kebutuhan untuk mengetahui berapa banyak kunjungan dari peselancar dunia maya mengunjungi blognya dan juga mengetahui jumah postingan di dalam blog.

Dan karena kebutuhan tersebut banyak pula jasa pihak ketiga yang menawarkan widget Statistik tersebut baik itu free maupun berbayar.

Sebenarnya pihak blogger sendiri juga menyediakan widget statistik tersebut tanpa harus menggunakan jasa pihak ketiga dalam membangun widget tersebut. Namun di karenakan tampilannya yang kurang menarik dan terlalu standard, banyak pihak blogger yang enggan menggunakan widget tersebut.

Tulisan kali ini Lab chekmad menguji untuk memperindah tampilan widget statistik standar blogger menjadi sedikit lebih menarik. dan tentunya dari hasil uji ini sahabat blogger lainnya dapat merubahnya menjadi lebih menarik dari hasil uji Lab chekmad yang mengikuti tutorial dari seorang blogger wanita Amatullah di blognya.

Berikut kode yang di gunakan untuk melakukan uji lab widget tersebut.

Terlebih dahulu silahkan sobat tambahkan widget Statistik Blogger agar kita dapat melakukan proses editing nantinya.

Setelah widget tersebut sobat tambahkan, kita menuju ke menu template >> HTML dan cari kode ]]></b:skin> dan tambahakan kode CSS tepat diatak kode tersebut


#Stats1
ul{margin:10px 0;border:0;padding:0}
#Stats1
li{margin:0;border:0;background-color:#ff4e47;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNANKzbO4RSqI2j3HPVeRnnCSa87d6MEsYRmy0uykzy-x_GCeiQdS7H4nULgwyIJDhdLyB9SESTCj5dQla6KzW2lMP6_cdZFsKtzgxnB6Pz-UGroXYje8O8CkVrH23nmbJaLEv/s194/sprites-stats.png);background-repeat:no-repeat;padding:10px
10px 10px 80px;list-style-type:none}
#Stats1
h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1
span{font-size:13px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Carilah kode <b:widget id='Stats1' locked='false' title='Total Tayangan Laman' type='Stats'>
dan ganti dengan kode di bawah ini :

HTML Kode :



<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>

CMD 2/01/2023