Blogger’da Sayfa Kaydırılınca Hareket Eden Eklenti

Blogger’da sitenizi hazırladınız ancak içeriğiniz çok ve bazı içeriklerin sürekli ön planda olmasını istiyorsunuz. Gerek adsense reklamları için, gerek popüler yayınlar eklentisi için veya istediğiniz herhangi bir eklentinin sayfada yapışkan olmasını istiyorsunuz.

Peki nasıl yapılır? Bir eklenti ne olursa olsun nasıl görüntülenebilir? Sayfa aşağı kaysa bile, sayfayla beraber nasıl hareket edebilir?

Bu soruların cevabı olacak bir kod var ve bu kodu uyguladığınızda, istediğiniz içeriğin sayfayla beraber hareket etmesini sağlayabilirsiniz. Haydi gelin başlayalım.

Öncelikle hangi eklentinin yapışkan olmasını ve sayfayla hareket halinde olmasını istiyorsanız o eklentinin adını bilmeniz lazım. Başlıklı eklentilerin adı başlıkta yazandır ancak adsense gibi başlıksız olanların adı daha farklı olur. Bu öğrenmek için aşağıdaki resme bakın.

Eklentinin yerleşim sekmesindeki kısmından düzenleme bölümüne gelindiğinde karşımıza üstteki resim çıkacaktır. Bu resimde gösterilen yazı, eklentinin ismidir.

Eklentimizin ismini artık biliyoruz, o zaman ikinci aşamaya geçebiliriz.

(adsbygoogle = window.adsbygoogle || []).push({});

Blogger’da Sayfayla Hareket Eden Eklenti Nasıl Yapılır?

Şimdi tema sekmesine girip html düzenle kısmına giriyoruz. Ctrl+f diyerek aşağıdaki kodu aratıyoruz.

</head>

Bu kodun hemen üstüne ise aşağıdaki kodu ekliyoruz.

<script>
//<![CDATA[
HG_makeSticky(“HTML12“);
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>

Bu kodu ekledikten sonra yapmanız gereken tek bir işlem daha var. Kodda vurgulanan HTML12 kısmının olduğu yere, kaydırmak istediğiniz eklentinin ismini yazacaksınız. Doğru yazmazsanız kod işlemeyecektir, bu sebeple , yukarıda yer alan resimden yola çıkarak hareket etmenizde fayda var.

Herkese kolay gelsin, soru ve görüşleriniz için yorum yazabilirsiniz.