Cara Custom Widget Blogger Statistik Keren

Pada kali ini admin akan membagikan cara custom widget statistik di blogger, Tapi sebenarnya atau lebih tepatnya adalah membuat dan mengkostumasi widget di blogger, Widget ini bisa dibilang menarik karena memiliki fitur seperti dibawah ini

1. pengunjung blog (semua)
2. ada berapa artikel
3. melihat semua jumlah komentar di blog kita

Akan tetapi hal itu juga bisa dianggap tidaklah baik karena  bisa saja hal diatas dianggap privasi bagi pemilik blognya atau blog master karena hal itu pula widget ini tidaklah selalu dipandang baik dan bagus. Membuat dan Kostumasi Widget Statistik Blog ini maksudnya kita menambahkan atau menggunakan widget bawaan yang akan kita custom lagi, Tenang saja hal ini tidaklah susah untuk dilakukan.

Jika kalian penadaran atau berminat menggunakannya Bacalah artikel ini sampai bawah ( Akhir / Selesai ).

Langsung saja ke proses pemasangannya

• Pertama masuk kebagian atau menu Tata Letak / Layout.
• Buatlah widget baru dimanapun tempatnya yang kalian inginkan
• Pilih Statistik  Blog

• Jika sudah masuk ke Tema dan edit html
• pada bagian atau fasilitas lompat ke widget pilih Stats1

• Lalu kita akan menemukan kode dari widget tersebut.
• Silahkan pilih semua / blog semua code widget stats 1 tersebut dan gantu dengan kode dibawah ini

<b:widget id='Stats1' locked='false' title='Statistics' type='Stats' version='2' visible='true'>
              <b:widget-settings>
                <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
                <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
                <b:widget-setting name='showSparkline'>true</b:widget-setting>
                <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
                <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
              </b:widget-settings>
              <b:includable id='main'>
  <b:if cond='data:title'><h3 class='title'><data:title/></h3></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 post2'> Total Of All Articles &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Total All Comments &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='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
              <b:includable id='content'>
  <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>
      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
      </span>
    </div>
  </div>
</b:includable>
</b:widget>

• jika sudah cari kode /b:skin dan masukan kode style css dibawah ini tepat diatas kode tersebut

/* Statistik widget www.halimlab.com */#sidebarSticky .Stats h3.title:before{content:'';display:inline-block;width:23px;height:23px;vertical-align:-4px;margin-right:5px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19C20.11,3 21,3.9 21,5V19M13,18V9.5L16.5,13L17.92,11.58L12,5.66L6.08,11.58L7.5,13L11,9.5V18H13Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center}#Stats1_content {width: auto;height: auto;background-color: #fff;padding: 15px;border-radius: 0 0 5px 5px;box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);}.Stats img {display:none!important;background-image:none;}.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;float:left;color:#333;font-weight:700;font-size:16px;margin-left: 0;}.Stats .counter-wrapper:after {content:"Total Page View";float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}.counts .count {display:inline-block;font-size:16px;height:30px;vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}.counter-wrapper.text-counter-wrapper:before, .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;}.counter-wrapper.text-counter-wrapper:before, .counts:before {display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}.blink {animation: blink 1s linear 1s infinite;}@keyframes blink{to { opacity: .0; }}    
.label-link-btn{font-size:11px;color:#333;position:absolute;top:0;left:0}.label-link-btn svg{width:15px;height:15px;vertical-align:-3px}.label-link-btn svg path{fill:#00aecd}

• Dan jangan lupa simpan templatenya
• Selesai

Dan sekian tutorialnya selesai, mudah kan ?

kami dari pihak halimlab memohon maaf bila ada tuturkata atau perbuatan kami yang membuat anda gimana" dan kami sangat berterimakasih kepada anda apabila anda membagikan blog dan isi konten baik itu tutorial, tips, atau trik dari blog kami ke media sosial anda dan teman" anda.

Dari tutorial diatas memang banyak kekurangannya tapi tidak ada salahnya jikalau kita mencobanya, kami berharap tutorial diatas bermanfaat bagi anda semua. Sekian terimakasih . . .

Source code : https://www.msdesignbd.com/2016/05/install-custom-stats-widget-for-blogger.html

Anda mungkin menyukai postingan ini