Blogger için özel 'blog istatistikleri' widgeti

02 Aralık, 2016

Blogger için özel "blog istatistikleri" widgeti
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.
Blogger için özel "blog istatistikleri" widgeti
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 için özel "blog istatistikleri" widgeti
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. Mutlaka cevaplarım.☺

✋Bu içerik BlogTecrübem tarafından hazırlanmıştır.

6 yorum:

  1. Bu istatistik eklentisini başka yerde görmüştüm ve bunu kendime göre düzenleme yaparak kendi bloguma eklemiştim :)

    YanıtlaSil
    Yanıtlar
    1. Oldukça başarılı ve iyi düşünülmüş bir eklenti..

      Sil
  2. En kısa sürede bloguma göre düzenleyip entegre edicem teşekkürler

    YanıtlaSil
  3. Bloguma ekledim süper oldu. Sitenin Kalitesini ortaya koyuyor..

    ''arka plan rengi beyaz ve yazılar ise siyah'' olarak ayarlamıssınız hocam. Arka plan nasıl rengi ile yazı rengini nasıl değiştiririz.

    YanıtlaSil
    Yanıtlar
    1. background-color: ve font-color şeklinde olan kodların yanındaki renk kodları ile oynayın.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2017 Blog Tecrübem - Kişisel Blog Her hakkı sakldır.
I Blogger!