Tampilan Statistik Blog Keren Ms Design

Pada kesempatan kali ini Mas Design akan memperlihatkan Tutorial Bagaimana Cara Membuat Custom Stats atau Tampilan Statistik Keren di Blogger. Dengan memakai widget ini, teman akan sanggup melihat Total Pageview, Tampilan Total Post dan Jumlah Komentar Blog kita. Untuk yang suka mengotak atik tampilan blog, aku sarankan untuk mencoba widget ini. Karena bahwasanya custom stats ini merupakan widget bawaan dari blogger, namun ada penambahan instruksi css untuk mempercantik tampilannya. Nah untuk teman yang belum tahu dan ingin tau menyerupai apa tampilan custom stats ini, silahkan cek di blog Mas Design ini, alasannya admin juga memakai widget ini.

Cara Membuat Tampilan Statistik Keren di Blog

Untuk memasang Widget Custom Stats ini cukup mudah, Pertama silahkan login ke Blogger > Tata Letak > Tambahkan Gadget > Pilih Statistik Blog > Simpan

Langkah selanjutnya cari instruksi berikut di Template > Edit Html

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>

Kemudian ganti dengan instruksi di bawah ini :

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>     <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' 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 Posts &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 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:widget>

Langkah selanjutnya simpan instruksi CSS di bawah ini sebelum </head>

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>  <style type='text/css'> /* Blogger Custom Stats widget by msdesignbd.com */ .Stats img {display:none!important;background-image:none;} .Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;} .Stats .counter-wrapper:after {content:&quot;Page Views&quot;;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;} .counter-wrapper.text-counter-wrapper:before {content:&quot;f06e&quot;;} .counts.post2:before {content:&quot;f044&quot;;} .counts.comment:before {content:&quot;f0e6&quot;;} #Stats1_content {width:auto;height:auto;background-color:#fff;} </style>

Langkah Terakhir Simpan dan lihat hasilnya.

Demikian tutorial Cara Membuat Tampilan Statistik Blog ini agar bermanfaat bagi kita semua. untuk yang mengalami kesusahan dalam menerapkan Tutorial ini, silahkan tinggalkan komentar. Terima kasih.

Source : https://info.materialapk.com/search?q=install-custom-stats-widget-for-blogger

Share this post