• Translate

5/16/2014

Cara Modifikasi Widget Statistik Bawaan Blogger

Tutorial Blogspot |

Advertisement

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.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • 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