Customize Blogger Statistics Widget - Arlina Design
Customize Blogger Statistics Widget

Customize Blogger Statistics Widget - Tips berikut ini Saya buat atas permintaan sobat blogger disini tentang bagaimana cara membuat widget statistik seperti di blog 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.

Langsung saja, berikut cara penerapannya :

Terlebih dahulu silahkan 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'>
    <!-- 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>

Kemudian ganti semua kode di atas dengan kode di bawah 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://arlinadesign.blogspot.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>

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

Agar tampilannya lebih menarik, silahkan tambahkan CSS di bawah ini

Pertama, buka Blogger > Template > Klik edit HTML > Terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* 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 {
    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 kembali CSS font dan tampilannya sesuai dengan blog Anda, terakhir simpan template dan lihat hasilnya.

Cukup sekian, semoga bermanfaat.

Customize Blogger Statistics Widget

Customize Blogger Statistics Widget

Customize Blogger Statistics Widget - Tips berikut ini Saya buat atas permintaan sobat blogger disini tentang bagaimana cara membuat widget statistik seperti di blog 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.

Langsung saja, berikut cara penerapannya :

Terlebih dahulu silahkan 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'>
    <!-- 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>

Kemudian ganti semua kode di atas dengan kode di bawah 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://arlinadesign.blogspot.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>

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

Agar tampilannya lebih menarik, silahkan tambahkan CSS di bawah ini

Pertama, buka Blogger > Template > Klik edit HTML > Terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* 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 {
    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 kembali CSS font dan tampilannya sesuai dengan blog Anda, terakhir simpan template dan lihat hasilnya.

Cukup sekian, semoga bermanfaat.
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo