Blogger İstatistikleri Widget Özelleştirmesi Nasıl Yapılır?

Blogger istatistik widget'i özelleştirme, blog üzerinde istatistikleri takip etmek için blogculara istatistik widget'i nasıl kurulur bu konu hakkında ipuçları veriyoruz.

Blogger istatistik widget'i varsayılan işlevi ayarları düzenlenerek bloga uygulanır ve ziyaretçi görüntüleme sayısını artırmak için kullanılır. Bu widget'i biraz değiştirerek ve blogda yayınlananların sayısını çevrimiçi kontrol eder.

Blogger istatistik widget'i uygulama yolları şunlardır:

İlk önce Blogger hesabınıza giriş yapın ve istatistik widget'ini uygulamak istediğiniz blogun kumanda panelinden Yerleşim > Slidebar Gadget Ekle (istediğiniz yerden gadget ekleyebilirsiniz) menüsünden Blog istatistikleri widget'ini ekleyin, eğer istatistik widgeti blogunuza daha önceden eklediyseniz tekrar eklemenize gerek yok. Blog istatistik widget'ini ekledikten sonra kaydedin ve blognuzu kontrol edin.

Eklemiş olduğunuz blog istatistik widget'ini tasarlamak ve düzenlemek için blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle tıklayarak blogunuzun şablon (HTML belge) kodları içerisinde aşağıdaki istatistik kodlarını bulun.

<b:widget id='Stats1' locked='false' title='Toplam Sayfa Görüntüleme' type='Stats'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<b:if cond='data:showSparkline'>
<img alt='minigrafik' 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>
</div>
</div>
</b:includable>
</b:widget>

Bulmuş olduğunuz blog istatistik kodlarını aşağıdaki yeni tasarımlı blog istatistik HTML kodlarını blogunuzdakiler ile değiştirin.

<b:widget id='Stats1' locked='false' title='istatistik' type='Stats'>
<b:includable id='main'>
<b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==' title='Mini Grafik' 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'> Yayın Sayısı &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='https://cizgifilmhikayeleri.blogspot.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>

Yukarıdaki kod içerisinde https://cizgifilmhikayeleri.blogspot.com renkli alanda belirtilen blog URL'sini kendi blogunuzun URL'si ile değiştirin.

Şimdi blogunuza daha çekici ve şık bir blog istatistik widget'i kazandırmak için, blogunuzun şablon kodları arasında CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunu bir satır üzerine ekleyin.

#sidebar .Stats img {
    display: none!important;
    background-image: none;
}
#sidebar .Stats .counter-wrapper:after {
    content: 'Sayfa Görüntülemeleri';
    font-family: 'Open Sans',Arial, sans-serif;
    float: left;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #71737f;
}
#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 .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 {
    display: inline-block;
    width: 92%;
    margin: 10px;
    font-size: 13px;
    line-height: 35px;
    color: #71737f;
    font-weight: 700;
}
#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 .counts:hover .titles:before {
    color: #71737f!important;
    border-radius: 2px;
    border-color: rgba(255,255,255,0.1);
}
.counter-wrapper.text-counter-wrapper:before {
    content: '\f201';
    color: #fff;
}
#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;
}
#Stats1_content {
    width: auto;
    height: auto;
    background-color: #fff;
}
#sidebar .counts.postx:before {
    content: '\f03e';
    background-color: #f0b26f;
}
#Stats1 h2 {
    display: none;
}

CSS kodları ile blogunuza uygun olarak yazı tipleri ve görsel ayarlarını yapabilirsiniz. Tüm düzenlemeleri yaptıktan sonra kontrol edin ve kesin sonuçları görmek için şablonu kaydedin ve blogunuzu kontrol edin.

Bknz: Blog Yazılarını 2 Sütuna Bölme Eklentisi

Blog istatistik widget'i ile ilgili ipuçlarının devam eden çalışmalar ile yeni ipuçlarını blogumuzda takip edebilirsiniz.