Judul: Berbagi Info Seputar Customize Statistics Widget di Blogger Full Update Terbaru
link: Customize Statistics Widget di Blogger
Artikel Terbaru Customize Statistics Widget di Blogger Update Terlengkap 2017
Widget ini akan memodifikasi widget bawaan blog statistic dari blogger yang berfungsi untuk memunculkan jumlah penayangan pengunjung di sebuah blog dengan tampilan berbeda.
Customize Statistics Widget di Blogger
- Terlebih dahulu sobat tambahkan widget statistic, masuk ke menu Tata Letak, kemudian klik Tambahkan Widget dan klik Blog's stats lalu simpan widget.
- Lalu sobat masuk ke menu Template dan klik (Edit Html). Cari kode HTML widget statistic di bawah ini.
- Kemudian ganti semua kode di atas dengan kode di bawah ini.
- Berikutnya tambahkan kode di bawah ini tepat di atas kode
]]></b:skin>atau</style> - Sesuaikan kembali CSS font dan tampilannya sesuai blog sobat.
- Terakhir simpan template dan lihat hasilnya.
<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 + "_content"' 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 + "_sparkline"' height='30' width='75'/>
</b:if>
<b:if cond='data:showGraphicalCounter'>
<span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget><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 + "_content"' 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 + "_sparkline"' 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 + "_totalCount"'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
</b:if>
<script type='text/javascript'>
function postCount(json){
document.write("<span class='counts postx'> Total Post ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
</script>
<script src='http://arahsemut.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
</div>
</div>
</b:includable>
</b:widget>Ganti http://arahsemut.blogspot.com dengan URL blog sobat.
/* 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: 0px 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;
}Demikian artikel kali ini, kalau sobat punya pertanyaan/saran sobat bisa meninggalkan komentar, selamat mencoba semoga bermanfaat.
Source :
http://www.arlinadzgn.comItulah sedikit Artikel Customize Statistics Widget di Blogger terbaru dari kami
Semoga artikel Customize Statistics Widget di Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Fiber Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Artikel Tentang Customize Statistics Widget di Blogger