Blogger için özel 'blog istatistikleri' eklentisi

Blogger için özel 'blog istatistikleri' eklentisi

Blogger (blogspot) sayfalarınız için kullanabileceğiniz bu özel tasarımlı blog istatistikleri eklentisini (widget) sizlerle paylaşmak istedim. Kendi bloguma da eklediğim bu eklenti sayesinde blogunuz toplamda ne kadar tıklama almış, toplamda ne kadar içerik yayınlanmış ve ne kadar yorum yapılmış hepsi yer alıyor.

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.

Özel olarak tasarlanmış blog istatistikleri widgetini canlı olarak görmek isterseniz eğer blogumun sağ tarafında yer alan sidebar bölümünde görebilirsiniz. Şimdi gelelim bu eklentiyi blogumuza eklemeye...

1. İ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.

2. Açılan küçük pencerede "Blog istatistikleri" gadgetini seçin ve ayarlamayı aşağıda gösterildiği gibi yapın.

Blog istatistikleri

3. 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'

4. Bulduğunuz bu kod eski blog istatistikleri widgetinin kodu ve bu kodu komple yenilemeniz gerekir. Yani <b:widget id='Stats1' ile başlayan kodu </b:widget> koduna kadar komple seçin. Aşağıda eklediğim resimde gösterdiğim gibi:

Blogger HTML

5. Şimdi yukarıda resimde gösterdiğim gibi kodları seçiyoruz ve aşağıda bulunan kodlarla değiştiriyoruz.

<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 + &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'> Toplam İçerik &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'> Toplam Yorum &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>

Kırmızı renkle belirttiğim alanları dilediğiniz gibi değiştirebilirsiniz. Son olarak bir işlemimiz daha var.

6. Son olarak Ctrl F yardımıyla aşağıda bulunan kodu bulun:

</head>

buldğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

<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'>
/* BlogTecrübem den özel blog istatistikleri widgeti  */
.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;Sayfa Görüntüleme&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>

ve bitti, hemen şablonu kaydedin ve blogunuzu kontrol edin. Dediğim gibi kırmızı renkle belirttiğim yazıları dilediğiniz gibi değiştirebilirsiniz.

Bu eklentide arka plan rengi beyaz ve yazılar ise siyah renklidir. Kendi blogum için ben farklı renkler tercih ettim.

Umarım bu widget işinize yarar. Ben kendi bloguma ekledim ve çok sevdim. Ayrıca kodları eklemekte herhangi bir sorun yaşarsanız, yorum kısmında sorularınızı paylaşabilirsiniz.