Blogger eklentilerini sayfa ile hareket ettirme

20 Ağustos, 2017
Sayfa ile hareket ettirme
Sayfa ile hareket ettirme
Blogger (blogspot) bloglarda dilediğimiz eklentiyi sayfayla nasıl hareket ettiririz? Yayın ya da normal sayfalar aşağı - yukarı doğru hareket ederken bu kod sayesinde sidebarlardaki eklentileri sabitleyebilir ve ziyaretçilerin sürekli görmelerini sağlayabiliriz.

Dostlarım kendi blogumda da kullandığım bu kodu özellikle paylaşmak istedim. Ben bu kodu AdSense reklam eklentisi ve email abone ol kutusu için kullanıyorum. Tabi sizde dilediğiniz eklenti için bu kodu kullanabilir ve istediğiniz eklentisi sayfayla hareket ettirebilirsiniz.

Gerçi daha önce bu konuyla ilgili bir içerik paylaşmıştım (Blogger eklentilerini nasıl yapışkan (sticky) yaparız?) ama bu yazımda paylaştığım kodlar bir öncekine göre daha işlevsel.

Kodlardan bahsetmek gerekirse:


İlk olarak kodları eklemeden önce sayfayla hangi eklentinin hareket etmesini istiyorsak o eklentinin id sini bulmamız gerekiyor.
Blogger widget id
Bu görselle daha açıklayıcı olmuştur umarım.

Daha sonra Blogger kullanıcı panelinde Tema - HTML Düzenle seçenekleriyle ulaştığımız kodlar arasında Ctrl F yardımıyla aşağıdaki kodu buluyoruz.
</head>
Ve bu kodun hemen üstüne aşağıdaki kodları ekliyoruz.
<!-- sticky eklenti by BlogTecrübem -->
<script>
//<![CDATA[
HG_makeSticky("HTML4"); // eklentinin id si buraya eklenecek
function HG_makeSticky(elem) {
    var HG_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
    var width = HG_sticky.offsetWidth;
    var iniClass = HG_sticky.className + ' HG_sticky';
    window.addEventListener('scroll', HG_sticking, false);
    function HG_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            HG_sticky.className = iniClass + ' HG_sticking';
            HG_sticky.style.width = width + "px";
        } else {
            HG_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.HG_sticking {background:none !important; position:fixed !important; top:0; z-index:1; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>
<!-- sticky eklenti bitiş BlogTecrübem -->
Son olarak ise yukarıda kırmızı renkle belirttiğim kısıma, hangi eklentinin sayfayla hareket etmesini istiyorsanız o eklentinin id sini eklemelisiniz. Bu işlemlerin ardından değişiklikleri kaydedip blogunuzu kontrol edebilirsiniz.

4 yorum:

  1. Kodlarla ilgili paylaşımlara bayılıyorum ya Tarihten daha çok sevmeye başladım .P

    Kodlar bir yapbozun parcasi gibi yapboz ise bloger parcalari istedigimiz gibi tamamlayabiliyor olmamaiz ise cok güzel

    Eline sağlık üstat

    YanıtlaSil
  2. Özellikle yayın sayısı fazla olan bloglarda aşağı doğru inerken eklentileri sabitlemek faydalı olur. Güzel bilgi duyurmak lazım:))

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · Duyuru · İletişim · Yasal Uyarı