Blogger eklentilerini 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.

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.