Hayata bakışınızı değiştirir...

  • Gündem Notları:

    19 Nis 2014

    Blogger Sayfa Sayaç Eklentisi


    Eskiden hatırladığım bir Blogger özelliklerinden birisiydi sayfa sayaç özelliği. Hiçbir özel işleme gerek kalmadan sayfada bir sayaç görüntülenebiliyordu. Ancak zamanla yapılan değişiklikler ve güncellemelerle bu özelliği çalışmamaya başladı. Bunun nedenini bilmiyorum ama hala bu özelliği kullanma arzusunda olan pek çok insan olacağını biliyorum. Lafı fazla uzatmadan anlatıma geçeyim.

    Eklentiyi canlı görmek isteyenler şuradan bakabilirler: http://facebook-comments-box.blogspot.com/

    İl olarak Firebase adında bir hizmetten yararlanacağız. Nedeniyse bu hizmetin bizim sayfa isimlerimizi ve sayfa sayaç bilgilerimizin saklanacağı bir database görevi üstlenecek olması. İlk olarak şuradan bu siteye kayıt oluyoruz. Kayıt işlemlerini tamamladıktan sonra şu şekilde bir sayfa çıkacak ekrana:

    Bu kısımda okla gösterdiğim alana oluşturacağımız database ismini ve database adresimizi giriyoruz ardından "Create New App" butonuna tıklıyoruz. Ben ikisine de "Masivaname" yazdım. Siz de ikisine de Türkçe karakter ve özel karakter kullanmadan blog isminizi yazabilirsiniz.

    Yapılacak diğer işlemler:
    1- Blog şablonunuzun yedeğini alın.
    2- Html Şablon düzenleme kısmına gelin.
    3- ]]></b:skin> kodunu aratın.
    4- Hemen altına şu kodları ekliyoruz:

    /*-------- Post Views  ----------*/
    #views-container {
    width: 85px;
    float: right;
    }
    .mbtloading {
    background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center;
    width: 16px;
    height: 16px;
    }
    .viewscount {
    float: right;
    color: #EE5D06;
    font: bold italic 14px arial;
    }
    .views-text {
    float: left;
    font: bold 12px arial;
    color: #333;
    }
    .views-icon{
    background: url('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png') no-repeat left;
    border: 0px;
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 0px 2px;
    }

    • Numara rengini şu kodu bularak değiştirebilirsiniz: #EE5D06
    • Sayacın konumunu da değiştirmek isterseniz right yerine left kullanın.

    Ardından </body>  kodunu bulup üstüne şu kodu ekleyin:

    <!-- Post Views Script by MBT -->
    <script type='text/javascript'>
        window.setTimeout(function() {
            document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
          }, 10);
      </script>
    <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
    <script>
    $.each($(&#39;a[name]&#39;), function(i, e) {
    var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
    var blogStats = new Firebase(&quot;https://masivaname.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
    blogStats.once(&#39;value&#39;, function(snapshot) {
    var data = snapshot.val();
    var isnew = false;
    if(data == null) {
    data= {};
    data.value = 0;
    data.url = window.location.href;
    data.id = $(e).attr(&#39;name&#39;);
    isnew = true;
    }
    elem.removeClass(&#39;mbtloading&#39;).text(data.value);
    data.value++;
    if(window.location.pathname!=&#39;/&#39;)
    {
    if(isnew)
    blogStats.set(data);
    else
    blogStats.child(&#39;value&#39;).set(data.value);
    }
    });
    });
    </script>

    Bu koddaki https://masivaname.firebaseio.com/ adresini ilk etapta seçtiğiniz database adresi ile değiştirin.
    Şimdi sıra geldi sayacımızın görünecek yerini bulmaya. Şayet makale altında görünsün istiyorsanız şu kodu bulun:

    <data:post.body/>

    Hemen altına sayaç kodumuzu yapıştırıyoruz:

    <!-- Post Views Counter by MBT--> 
    <div id='views-container'><span class='views-icon'/><div class='views-text'>Okuma:</div> <div class='mbtloading viewscount' id='postviews'/></div>

    Son Olarak ]]></b:skin> kodunu bulup altına şunu ekliyoruz:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

    Hiç yorum yok:

    Yorum Gönder