Blogger sticky (yapışkan) widget nasıl yapılır?

14 Mayıs, 2018
Blogger sticky widget
Blogger sticky widget
Blogger (blogspot) bloglarında sidebarda yer alan herhangi bir eklentiyi nasıl sticky yani yapışkan yaparız? Sayfa ile hareket eden widget yapımı.

Daha önce konuyla ilgili farklı içerikler paylaşmıştık. Eklentilerin sayfa ile hareket etmesini sağlayan bu kodların bazı bloglarda çalışmadığı fark edince bir yeni alternatifin olması faydalı olur diye düşündük. Bu kodlar sayesinde Blogger bloglarınızda dilediğiniz eklentiyi sticky yapmanız mümkün. Şimdi gelelim kodların nasıl Blogger bloglarına eklendiğine.

Tema ardından HTML düzenle seçenekleri ile ulaştığımız HTML alanında Ctrl F yardımıyla aşağıdaki kodu buluyoruz.
]]></b:skin>
Bulduğumuz bu kodun hemen üstüne ise
.sticky{position:fixed!important;top:0;z-index:99;-webkit-transform:translateZ(0);}
bu kodları ekliyoruz. Daha sonra yine Ctrl F yardımıyla
</body>
koduna ulaşıyoruz. Bulduğumuz bu kodun hemen üstüne ise
<script type='text/javascript'>
//<![CDATA[
// Sticky Menubar
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" sticky",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("widget id bu kısma");
//]]>
</script>
Bu kodları ekleyerek işlemi sonlandırıyoruz. Temamızı kaydettikten sonra blogumuzu kontrol edebiliriz. Kırmızı renkle belirginleştirdiğimiz alana sticky yapmak istediğiniz eklentinin id sini eklemeyi unutmayın. Konuyla ilgili sorularınızı yorum yaparak bildirebilirsiniz. Ayrıca daha önceden paylaştığımız "Blogger eklentilerini nasıl yapışkan (sticky) yaparız?", "Blogger eklentilerini sayfa ile hareket ettirme" başlıklı içeriklerimizi de inceleyebilirsiniz.

16 yorum:

  1. Sadece küçük bir CSS kodu ile de yapılabilir. Yeni CSS3 kodları ile daha kolay ve daha düzenli olacak şekilde ve blog şablonunda fazla js koduna gerek kalmadan.

    YanıtlaSil
  2. Adsense reklamlarına uygulasak sıkıntı çıkarır mı?

    YanıtlaSil
    Yanıtlar
    1. Genelde yapılması pek tavsiye edilmiyor ama ben herhangi bir sorunla karşılaşmadım bugüne kadar.

      Sil
    2. Ekşi sözlük yapıyor. Onlar yapıyorsa sorun olmaz.

      Sil
  3. Adsense reklamlara yapınca sıkıntı olmuyor ben daha önce sormuştum yaptım uzun zamandır çalışıyor.

    Önceki kodda siteyi yavaşlatan jquery vardı bunda o yok sanırsam. Siteyi yavaşlatıyor uyarısı veriyordu.

    Diğer blogda sormuştum birden fazla kodu sabitlemek istersek ne yapmak lazım.
    "Merhaba, rica ederim. #widget Id, #widget Id şeklinde aralarına virgül ekleyerek birden fazla eklentiyi sabitleyebilirsiniz."
    cevabını vermiştiniz görmemişim onu deneyeceğim.

    Bu kodda da geçerli mi?

    Teşekkürler.

    YanıtlaSil
  4. iki tane sticky sabitlemeyi virgülle, başka şekillerde denedim olmadı yalnız nasıl yapabiliriz?

    YanıtlaSil
    Yanıtlar
    1. Sidebardaki reklamı sabitleyince buna gerek kalmadı.
      Teşekkürler.
      Sidebardaki reklamı sabitlemek en iyi çözüm.

      Sil
  5. Üst sidebara reklam sabitleme işi süper oldu bu yazınızla reklamlar tam istediğim gibi oldu. Her boşluğa reklam doldurmak doğru değil.
    Bu şekilde sitede 1 reklam olsa bile yeterli.
    3-4 reklam ile çeşitlilik olur.
    Hemde izleyenler reklama boğulmuş olmaz.

    Önceki yazılarda orada bir yorumda sidebar falan yazıyordu o sırada sidebardaki reklamı sabitleme fikri geldi aklıma.
    Tam istediğim buydu.

    Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Ben teşekkür ederim değerli yorumlarınız için.

      Sil
  6. Aklıma bir soru takıldı.

    Şimdi bu etiket ile sidebardaki adsense gatgetini yapışkan yaptık.

    Pencere aşağı doğru indikçe reklam içeriğin üzerine geliyor.

    Daha önce reklam içeriği kapatmamalı şeklinde bir yazı okumuştum.
    Bu şekilde kullanım adsense açısından sorun olur mu?
    Siteden bakıp bilgi verirseniz sevinirim.

    Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Ekranı kapatan pop-up reklamlar için geçerli o uyarı. Ama sizin blogunuzdaki pek sorun yaratmayacaktır. Çünkü ekranın ufak bir kısmını kapatıyor.

      Sil
  7. Çok teşekkürler hocam. Popüler yazılar için kullandım. Bence site içinde gezinti yani sitede kalma oranını artırmaya yönelik iyi bir adım. Reklam için kullanılması bence pek doğru değil. Zaten adblock kullananlar için boş görünecek. Ama popüler yazılarda ilgisini çekecek bir yazıyı okuyarak hiç olmazsa google için seo tadında bir katkısı olur. Teşekkürler...

    YanıtlaSil
    Yanıtlar
    1. Rica ederim. Tabi seçim sizin, dilediğiniz alan için kullanabilirsiniz. Ben ilk zamanlarda son yazılar için kullanıyordum daha sonra blogu reklamlarla boğmamak adına tercih etmiştim.

      Sil

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ı