Blogger istatistikleri özelleştirme nasıl yapılır ? Blogger istatistik özelleştirme eklentisi bloğunuzdaki ziyaretçi sayısının toplamını gösterir ve gösterişli bir blogger istatistik eklentisidir.
Bloggerın hazır eklentileri arasında yer alan blog istatistikleri widgeti sadece blogunuzun toplam görüntüleme sayısını gösterirken, bu widget sayesinde toplamda ne kadar görüntüleme, içerik ve yorum varsa tüm istatistiksel verileri tüm ziyaretçilerinizle paylaşmanızı sağlayacaktır.
Blogger İstatistikler Eklentisi Nasıl Yapılır?
İlk olarak Blogger kullanıcı panelinde sol tarafta yer alan "Yerleşim" sekmesine tıklayın ve açılan yerleşim sayfasında blog istatistikleri widgetini eklemek istediğiniz alan için "Gadget ekle" ye tıklayın.
Açılan küçük pencerede "Blog istatistikleri" gadgetini seçin ve ayarlamayı aşağıda gösterildiği gibi yapın.
Gadgeti kaydettikten sonra yine Blogger kullanıcı panelinde sol tarafta yer alan "Şablon" sekmesine tıklayın. Ardından açılan sayfada "HTML düzenle" ye tıklayın ve Ctrl F yardımıyla kodların arasından aşağıda gösterilen kodu bulun:
<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>Yukarıda bulduğunuz kodu aşağıda ki kodlar ile değiştirin.
<b:widget id='Stats1' locked='false' title='Blog İstatistikleri' 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 + "_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 post2'> Toplam İçerik ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
function numberOfComments(json){
document.write("<span class='counts comment'> Toplam Yorum ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/>
</div>
</div>
</b:includable>
</b:widget>Şimdi ise sitenizdeki şablon kodları arasından CTRL + F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki css kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.
/* 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;
}Bütün işlemler bu kadar hemen şablonu kaydedin ve blogunuzu kontrol edin. Dediğim gibi kırmızı renkle belirttiğim yazıları dilediğiniz gibi değiştirebilirsiniz.