Modifikasi Widget Statistik Blogger

Trik Modifikasi Widget Statistik Blogger terhitung sangat mudah untuk kamu praktekkan.

Pada dasarnya, Blogger sudah memberikan widget statistik yang bisa kamu pasang secara manual dari menu Tata Letak pada Cpanel Blog.

Nah pada artikel kali ini, Kang Wira akan memberikan sedikit trik yang saya gunakan untuk merubah tampilan widget statistik yang sudah ada.

Trik ini saya ambil dari blog arlina yang memang saya kagumi karena setiap trik yang dibuatnya itu menurut saya memang terlihat sangat modern flat.

Nah pada kesempatan kali ini, saya juga mendapatkan sebuah Messenger dari seorang blogger, yang bertanya tentang cara membuat widget statistik seperti yang saya gunakan saat ini.

Baiklah berikut ini adalah langkah-langkah yang bisa kamu kerjakan untuk merubah tampilan widget statistik pada blogger.

Sebelum kamu merubah tampilan widget ini, silahkan tambahkan widget statistik yang berada di menu Tata Letak pada CPanel Blog kamu terlebih dulu.

Setelah ditambahkan dan kamu atur posisinya, langsung buka menu Template lalu pilih Edit HTML lalu carilah Kode seperti Kode HTML dibawah ini.

<b:widget id='Stats1' locked='false' title='Total Tayangan Laman' type='Stats'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>

Ganti semua kode HTML diatas dengan kode HTML dibawah ini

<b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts postx'> Total Post &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
</script>
<script src='http://www.kangwira.com/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
    </div>
  </div>
</b:includable>
  </b:widget>

Ganti URL www.kangwira.com diatas dengan URL Blog kamu

Sebenarnya Tampilannya sudah bisa langsung kamu lihat.

Tapi agar tampilannya lebih terlihat rapih dan menarik, kamu bisa tambahkan Kode CSS dibawah ini tepat sebelum Kode ]]></b:skin> atau sebelum Kode </style> pada menu Edit HTML tadi.

/* CSS Custom Stats */
#sidebar .Stats img{display:none!important;background-image:none}
#sidebar .Stats .counter-wrapper{width:92%;text-align:right;margin:10px;line-height:35px;color:#71737f;font-family:'Open Sans',sans-serif;font-weight:700;font-size:16px}
#sidebar .Stats .counter-wrapper:after{content:'Page Views';font-family:'Open Sans',Arial,sans-serif;float:left;text-align:left;font-size:13px;font-weight:700;color:#71737f}
#sidebar .counts{display:inline-block;width:92%;margin:10px;font-size:13px;line-height:35px;color:#71737f;font-weight:700}
#sidebar .counts .count{display:inline-block;font-size:16px;height:30px;vertical-align:top;direction:ltr;float:right;color:#71737f;font-family:'Open Sans',sans-serif;font-weight:700!important}
#sidebar .counts:hover .titles:before{color:#71737f!important;border-radius:2px;border-color:rgba(255,255,255,0.1)}
#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before{display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center}
#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before{display:block;background-color:#a5a7b2;color:#fff;width:35px;height:35px;font-size:18px;line-height:37px;border-radius:2px;margin:0 8px 0 0}
.counter-wrapper.text-counter-wrapper:before{content:'\f201';color:#fff}
#sidebar .counts.postx:before{content:'\f03e';background-color:#f0b26f}
#Stats1_content{width:auto;height:auto;background-color:#fff}
#Stats1 h2{display:none}

Sesuaikan Kode CSS Font dan Warna pada kode diatas agar tampilan Widget Statistik yang sudah kita modifikasi tersebut bisa terlihat sesuai dengan template yang kamu gunakan, lalu simpan Template dan lihat hasilnya.

Sekian Artikel kali ini tentang Modifikasi Widget Statistik Blogger kali ini.

Jangan sungkan untuk tinggalkan pertanyaan pada kolom komentar jika kamu merasa kesulitan.