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.

18 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
    2. sidebardaki reklamı yapışkan yapmak reklam adına bütün sorunları çözer fikir için teşekkürler.

      Yaptım oldu.

      Sil
  2. Meraba,

    Yararlı bir paylaşım olmuş teşekkürler.

    Burada tek html sabitleme varken yapmak istediğim blog sayfasının bir sağındaki birde solundaki boşlukta html sabit olması bunu nasıl yapabiliriz?

    Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Merhaba, rica ederim. #widget Id, #widget Id şeklinde aralarına virgül ekleyerek birden fazla eklentiyi sabitleyebilirsiniz.

      Sil
  3. Merhaba, bu değerli paylaşım için teşekkürler. Kodları yerleştirdiğimizde gerek ana sayfa da gerekse yazılarımızda sondaki widgetin sürekli kaydığını görüyoruz. Buraya kadar tamam hiçbir sıkıntı yok gayet güzel çalışıyor fakat ana sayfanın ya da yazının sonuna geldiğimizde bu yapışkan widget sayfa sonuna inilmesine izin vermiyor yani footer-column-container kısmına iniş yapılamıyor. Sanki sayfa orada tıkanıyor indirmeye çalıştıkça zorlanıyor ve hiçbir türlü iniş yapmıyor sorun ne olabilir nasıl çözebiliriz yardımcı olabilirseniz sevinirim. Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, rica ederim. Ekrana göre hareket ediyor eklenti. Fixed top 0 kodu ile ekranın en üstüne yerleştiriliyor. Ekran hareket ettikçe daima en üstte kalıyor. Top kodunun yanında yer alan 0 (sıfır) değerini arttırarak yeniden konumlandırabilirsiniz.

      Sil
    2. Widgetin konumlanmasında ya da sayfayı aşağı indirirken bahsettiğiniz gibi onun da hareket etmesinde bir sıkıntı yok benim sıkıntım sayfanın en altına inilemiyor hani normalde bu widget sabitken sayfayı en alta indirebiliyoruz ya bu widget yapışkan olduğunda inemiyoruz buna dair bir çözüm öneriniz var mı? Tekrar teşekkürler.

      Sil
    3. Bu kodu da deneyebilirsiniz. (http://blogtecrubem.blogspot.com/2017/08/blogger-eklentilerini-sayfa-ile-hareket-ettirme.html)

      Sil
    4. Yok hocam oradaki eklentiyi ekleyince hiçbir şekilde widget sayfayla birlikte hareket etmedi buradakiyle etmişti ama dediğim gibi bir problem oluyordu. Sanırım sorunu çözemeyeceğiz.

      Sil
    5. https://www.oscarfavorite.com

      Sil
    6. Kodlar dediğim gibi sayfanın en altına gitmemize olanak sağlamadığından kaldırmıştık elbette. Madem o şekilde bakacaksınız tekrar ekledim sizden mesaj gelene kadar ekli dursun o zaman.

      Sil
    7. Şimdi gördüm. AdSense reklam eklentisinin uzunluğu fazla olduğu için footer kısmının üstüne geliyor. Reklam widgetini 300*250px olarak tercih ederseniz sorun çözülecektir.

      Sil
    8. Uzun yazılardan birinde site içinde tekrar deneme yapınca bahsettiğim sıkıntı oluyor o sizin dediğiniz ilk bakışta düzgün bir şekilde sitede aşağıya iniliyor ve sadece dediğiniz gibi footer üstüne kayma yapıyor benim bahsettiğim site içinde bir iki kez deneme yapınca karşılaşılıyor. Ve sanırım bunu çözemeyeceğiz gibi.

      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.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Telif Hakkı © 2016 - 2018 Blog Tecrübem. Tüm Hakları Saklıdır.
I Google!