Modifikasi Widget Statistik Blogger

Rabu, 29 Januari 2014

Trik Modifikasi Widget Statistik Blogger terhitung sangat gampang untuk kau praktekkan.

Pada dasarnya, Blogger sudah menunjukkan widget statistik yang dapat kau pasang secara manual dari sajian Tata Letak pada Cpanel Blog.

Nah pada artikel kali ini, Kang Wira akan menunjukkan sedikit trik yang aku gunakan untuk merubah tampilan widget statistik yang sudah ada.

Trik ini aku ambil dari blog arlina yang memang aku kagumi alasannya ialah setiap trik yang dibuatnya itu berdasarkan aku memang terlihat sangat modern flat.



Nah pada kesempatan kali ini, aku juga mendapat sebuah Messenger dari seorang blogger, yang bertanya ihwal cara menciptakan widget statistik menyerupai yang aku gunakan dikala ini.

Baiklah berikut ini ialah langkah-langkah yang dapat kau kerjakan untuk merubah tampilan widget statistik pada blogger.

Sebelum kau merubah tampilan widget ini, silahkan tambahkan widget statistik yang berada di sajian Tata Letak pada CPanel Blog kau terlebih dulu.

Setelah ditambahkan dan kau atur posisinya, pribadi buka sajian Template kemudian pilih Edit HTML kemudian carilah Kode menyerupai Kode HTML dibawah ini.

Baca juga : Cara Praktis Memasang Facebook Messenger Kedalam Blog

<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>

Ganti semua isyarat HTML diatas dengan isyarat HTML dibawah 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://www.kangwira.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>

Ganti URL www.kangwira.com diatas dengan URL Blog kamu

Sebenarnya Tampilannya sudah dapat pribadi kau lihat.

Tapi semoga tampilannya lebih terlihat rapih dan menarik, kau dapat tambahkan Kode CSS dibawah ini sempurna sebelum Kode ]]></b:skin> atau sebelum Kode </style> pada sajian Edit HTML tadi.

/* 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:0 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 Kode CSS Font dan Warna pada isyarat diatas semoga tampilan Widget Statistik yang sudah kita modifikasi tersebut dapat terlihat sesuai dengan template yang kau gunakan, kemudian simpan Template dan lihat hasilnya.

Sekian Artikel kali ini ihwal Modifikasi Widget Statistik Blogger kali ini.

Jangan sungkan untuk tinggalkan pertanyaan pada kolom komentar jikalau kau merasa kesulitan.

Share This :