Wednesday, September 28, 2016

Modifikasi Widget Statistik Blogger

Chat on Whatsapp

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.

Modifikasi Widget Statistik Blogger

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.

Baca juga : Cara Mudah Memasang Facebook Messenger Kedalam Blog




<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 komentar jika kamu merasa kesulitan.

DMCA.com Protection Status

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

2 comments

I think the admin of this web site is genuinely working hard in favor of his site,
as here every information is quality based stuff.

Balas

Thanks for the compliment which also gives support for admin here

Balas