爪

▌JavaScript ve Firebase kullanarak Blogger gönderi görünümleri nasıl eklenir?



Merhaba arkadaşlar, birçok blogger şablonunu paylaştıktan sonra, bu yazıda blogger hilelerini paylaşmaya geri dönüyorum çünkü paylaşacak şablon kalmadı. Bu yazıda, JavaScript ve Firebase kullanarak Blogger'daki bir gönderinin görüntülenme sayısını nasıl ekleyeceğinizi paylaşacağım.

Bu kılavuz, çok fazla HTML, CSS veya JS bilgisine sahip olmanızı gerektirmez çünkü paylaştığım kod zaten hazırdır. Sadece talimatlara uygun şekilde uygulamanız ve kodları kendi şablonunuza doğru şekilde eklemeniz yeterlidir. Demoyu blogumda hemen görebilirsiniz!

Gerçek Zamanlı Veritabanı Oluşturma ve Kural Ekleme İlk olarak, Firebase'da gerçek zamanlı bir veritabanı kurmak için bir Firebase Projesi oluşturmamız gerekiyor. Blogger'daki görüntülenme sayısıyla aynı şekilde senkronize edip düzenleyebiliriz.

Firebase Projesi ve gerçek zamanlı veritabanı oluşturmak için aşağıdaki adımları takip edin:

Firebase'da Proje Oluşturun Adım 1: Firebase Console'una gidin.

Adım 2: Bir Proje Oluştur'u seçin ve Proje adını girin, devam etmek için Devam'a tıklayın.

Adım 3: Google Analytics'i kapatın ve Proje Oluştur'u tıklayın.

Bu, Firebase'da Proje oluşturma işlemini tamamlar, sonraki adım Gerçek Zamanlı Veritabanı'nın kurulumudur.

Gerçek Zamanlı Veritabanı Kurulumu Adım 1: Firebase Console'a erişin ve yeni oluşturduğunuz Projeyi seçin.

Adım 2: Sol menüden Gerçek Zamanlı Veritabanı'na gidin.


{
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}
Adım 3: Veritabanı Oluştur'a tıklayın ve Sonraki'yi seçin.

Adım 4: Locked Mode'u seçin ve Etkinleştir'e tıklayın. Artık Gerçek Zamanlı Veritabanı'nı oluşturduk, işaretlediğim gibi yolu kopyalayın.

Veritabanına Kurallar Ekleme Sonra RULES (kurallar) sekmesine geçin ve aşağıdaki kodu kullanarak tüm eski kodu değiştirin: 0000000000000000000'ı kendi Blog ID'nizle değiştirin.

Sonra, değiştirdiğiniz kodu kaydetmek için Yayınla'yı tıklayın.

Şablonda düzenlemeler yapma Adım 1: Aşağıdaki CSS parçasını ]]></b:skin> etiketinden önce ekleyin.




.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}
Adım 2: Görüntülenme sayısını göstermek için aşağıdaki HTML parçasını ekleyin: 
span class="nld_view entry-views hidden" data-add="true" expr:data-id="data:post.id">
/span>
'data-add='true'' parçasını, eğer görüntülenme sayısını gönderi sayfası dışındaki diğer sayfalarda göstermek istiyorsanız 'false' olarak değiştirin. 'True' durumunda sayfa yenilendiğinde görüntülenme sayısı 1 artacak, 'false' durumunda sayfa yenilendiğinde görüntülenme sayısı artmayacak ve sadece mevcut görüntülenme sayısını gösterecektir. Adım 3: Aşağıdaki JavaScript parçasını /body etiketinden önce ekleyin. 
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'databaseUrl',
      abbreviation: true,
      lazyload: true
  }
  function loadJs(e, b, c, d) {
      let a = document.createElement("script");
      b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
  }
  function abvr(a) {
      var b = Math.sign(Number(a));
      return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
  }
  function loadPostVw() {
      for (var c = document.querySelectorAll(".nld_view"), e = firebase.database(), a = 0; a < c.length; a++) {
          var d = c[a],
              b = d.getAttribute("data-id");
          (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
              return function(c) {
                  0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
              }
          }(d, b))
      }
  }
  function postVw() {
      loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
          loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
              var a = {};
              a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
          })
      })
  }
  if (!0 === viewSeting.lazyload) {
      var a = [],
          b = [];
      let c = () => {
          0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
      };
      window.addEventListener("scroll", a => {
          (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
      }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
          c()
      }), localStorage.getItem("LZ_VIEW") && postVw()
  } else postVw()
  /*]]>*/
Bu adımda aşağıdakileri değiştirmeniz gerekiyor: 0000000000000000000'ı, Veritabanına Kurallar Ekleme kısmındaki Blog ID'nizle aynı olacak şekilde değiştirin. 'databaseUrl'yi, yukarıdaki adımda kopyalamanızı söylediğim Gerçek Zamanlı Veritabanı URL'niz ile değiştirin. 'abbreviation'ı 'true' veya 'false' olarak ayarlayabilirsiniz. 'lazyload' için de aynı şekilde 'true' veya 'false' ayarlayabilirsiniz. Son olarak, değişiklikleri kaydedin ve blogunuzda kontrol edin.