Dynamic For Post

Tips berikut ini Saya buat atas permintaan sobat blogger disini tentang bagaimana cara membuat widget statistik seperti di blog saya ini.

Adapun fungsi dari widget statistik bawaan blogger ini berfungsi untuk memunculkan jumlah penayangan pengunjung di sebuah blog. Disini Saya sedikit memodifikasi dan menambahkan markup dari jumlah postingan yang diterbitkan dalam sebuah blog.

Cara merubah Tampilan Widget Statistics menjadi super Keren ala Blog Azis JS

Langsung saja, berikut cara penerapannya :
Yang pertama yang harus Anda lakukan adalah, silahkan Anda tambahkan widget statistik di Tata Letak blog Anda, setelah ditambahkan silahkan buka Template kemudian klik Edit HTML. Cari kode HTML widget statistik di bawah 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'>
    
    <div expr:id='data:widget.instanceId + "_content"' style='display: none;'>
      
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
      </b:if>
      <b:include name='quickedit'/>
    </div>
</div>
</b:includable>
</b:widget>

Kemudian ganti semua kode di atas dengan kode di bawah ini :

<b:widget id='Stats1' locked='false' title='statistics' type='Stats' version='1' visible='true'>
      <b:includable id='main'>
      <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>
<div class='widget-content'>
    
    <div expr:id='data:widget.instanceId + "_content"' style='display: none;'>
      
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' 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 + "_totalCount"'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write("<span class='counts postx'> Total Post ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
</script>
<script src='http://azisjs.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
    </div>
</div>
</b:includable>
    </b:widget>

Setelah itu dalam widget di atas silahkan ganti http://azisjs.blogspot.com dengan url blog Anda.

Agar tampilannya lebih menarik, Langkah selanjutnya, Anda cari kode ]]></b:skin> lalu tambahkan CSS Dibawah ini, sebelum kode ]]></b:skin>

/* 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: 0px 8px 0 0;
}

.counter-wrapper.text-counter-wrapper:before {
    color: #fff;
}

#sidebar .counts.postx:before {
    background-color: #000;
}

#Stats1_content {
    width: auto;
    height: auto;
    background-color: #fff;
}

#Stats1 h2 {
    display: none;
}

Sesuaikan kembali CSS font dan tampilannya sesuai dengan blog Anda, terakhir simpan template dan lihat hasilnya.

Cukup sekian, semoga bermanfaat.

Pencarian Terkait :
tampilan widget statistics
tampilan widget statistics blog
cara merubah tampilan statistics
cara merubah tampilan statistics blog
tampilan statistics blog keren
tampilan statistics blog responsive

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Welcome to MySide

Cara merubah Tampilan Widget Statistics menjadi super Keren ala Blog Azis JS