• Translate

5/16/2014

Cara Modifikasi Widget Statistik Bawaan Blogger

Tutorial Blogspot |
Cara Modifikasi Widget Statistik Bawaan Blogger sangat mudah ternyata, cuma kita tambahin CSS saja di edit template, mau tahu ? silahkan dicoba dan saya juga menggunakan widget ini, dimana widget statistik bawaan blogger lebig ringan daripada menggunakan widget statistik dari pihak ketiga seperti hitstat dan lain-lain. sekarang kita mulai saja ya bagaimana cara modifikasi widget statistik bawaan blogger menjadi lebih indah dan unik.

FiturFitur yang ada pada widget yang akan kita bahas adalah :
Widget Stat Bawaan Blogger yang dimodifikasi
  • Menampilkan Jumlah postingan
  • Menampilkan Jumlah Komentar
  • Menampilkan Total Tayang Laman

Cara MenambahkanCara menambahkan widget statistis blogger ini ke blog

  • Pada dasbor pilih menu Tata Letak
  • Tambah Gadget → Pilih widget Statistik blog
                         Stat Bawaan Blogger.com

Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan kemudian klik simpan setelan

  • Sekarang masuk menu Template Pilih edit HTML
  • Klik Ctrl+F dan cari kode ]]></b:skin>
  • Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>
#Stats1 ul{margin:-10px 0 40px 0}
#Stats1 li{display:inline;width:27%;margin:0;border:0;background-color:#fff;background:#363b40;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:10px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

  • Klik Ctrl+F dan cari kode berikut:
<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>
  • Setelah dapat, ganti kode tersebut dengan kode berikut:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>
  • Simpan template dan lihat hasilnya diblog anda.
Nah Selesai akhirnya untuk memodifikasi tampilan widget statistik bawaan sang blogger, jika anda menyukai artikel ini silahkan anda share kepada yang membutuhkan.
Loading...

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • 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 please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.

Loading...