Blogger eklentilerini nasıl yapışkan (sticky) yaparız?

29 Ocak, 2017

Blogger eklentilerini nasıl yapışkan (sticky) yaparız?
Blogger eklentilerini nasıl yapışkan (sticky) yaparız?
Blogger (blogspot) bloglarında istenilen eklentiyi nasıl sticky (yapışkan) yaparız? Blogger'da sayfa ile hareket eden eklenti nasıl yapılır? Blogger'da eklentileri yapışkan (sticky) yapma...

Son zamanlarda bir çok web sitesinde ve Blogger temalarında sık karşılaştığımız bir konu bu, yapışkan eklentiler. Bu yapışkan yani sticky eklentiler sayfa ile hareket eder ve ziyaretçilerin dikkatini çekmeyi başarır. Özellikle dikkat çekmek istediğiniz eklentiyi yapışkan yaparak sayfa ile hareket etmesini sağlayabilirsiniz. Çoğu blogda genelde reklam bannerı veya sosyal medya sayfaları sticky yani yapışkan yapılıyor.

Şimdi gelelim Blogger eklentilerin nasıl yapışkan yapılacağına...


1. Öncelikle Blogger kullanıcı paneline gidin ve sol tarafta olan "Yerleşim" sekmesine tıklayın.

2. Yerleşim kısmında hangi eklentiyi yapışkan (sticky) yapmak istiyorsanız, o eklenti için "Düzenle" ye tıklayın.
Blogger widget id
Blogger widget id
3. Yukarıdaki resimde gördüğünüz gibi eklenti için düzenle dediğimizde açılan küçük sayfada, link kısmının en sonunda yer alan HTML kısmını not alınız. Benim yapışkan yapmak istediğim eklenti için yukarıdaki resimde gördüğünüz gibi eklentinin id si HTML4. Bunu not aldıktan sonra düzenleme sayfasını kapatın.

Şimdi eklentiyi yapışkan yapmak için gereken kodları ekleyelim

1. İlk önce Blogger kullanıcı panelinde sol tarafta yer alan "Şablon" sekmesine tıklayın ve ardından açılan sayfada "HTML düzenle" seçeneğini seçerek kodların olduğu sayfaya ulaşın.

2. Kodlar arasında Ctrl F yardımıyla aşağıdaki kodu bulun.
</head>
3. Bulduğunuz bu kodun hemen üstüne, aşağıdaki kodları yapıştırın.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop();
         
        if (ks_current_top > ks_widget_top) {
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' });
        }
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>
4. Daha sonra ilk başka bahsettiğim ve not aldığınız eklenti id sini yukarıdaki kodda kırmızı renkle belirttiğim #widget id lerin yerine yazın. Yani yukarıdaki ('#widget Id') lerin görünümü ('#HTML4') şeklinde olmalı.

Tüm yapmanız gerekenler bunlardı. Son olarak şablonu kaydedin ve blogunuzu kontrol edin.

✋Bu içerik Kişisel Blog - BlogTecrübem tarafından hazırlanmıştır.

4 yorum:

  1. sidebar'ın tamamını yapışkan yapmak için bu kod düzenlenebilir mi? widget yerine sidebar yapabilirmiyiz

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, denemedim daha önce ama yapılabilir. Örneğin sidebar da yer alan tüm eklentileri tek bir div de (eklentide) toplayıp o div in id sini yukarıda yer alan koda ekleyebilirsiniz. Ya da çalışır mı bilmiyorum ama sidebar ı yukarıdaki koda ekleyip te deneyebilirsiniz.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2017 Blog Tecrübem - Kişisel Blog Her hakkı sakldır.
I Blogger!