≡ Menu

Kerem Sarı

WordPress Eklentisiz Sabit Sidebar Yapımı (Fixed Widget)

Eklenti kullanmayı sevemediğim için bloğuma uygulamak istediğim özellikleri kendim kodlayarak yapmaya çalışıyorum ve bunları sizlerle paylaşıyorum. Yakın zamanda sidebar’da sabit bir reklam kullanmak isteyince araştırmaya başladım. Bırakın yerli kaynağı, yabancı kaynak bile bulamıyordum neredeyse. Sanırım benden başka kimse sabit bir reklamlar için eklenti yüklemekten çekinmemiş.

Sabit Sidebar Yapımı

İki satır CSS’den oluşan her şekilde tarayıcının en üstünde kalan dandik bir sabit div olmayacak.

Sidebar div içerisinde sabit kalan widget yapımına başlayalım.

Sitenizin <head> etiketinin hemen altına ekleyin.

<script>$(document).ready(function () {  
var top = $('.krm-sabit').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) { $('.krm-sabit').addClass('sabit');} 
else { $('.krm-sabit').removeClass('sabit');}
$('.krm-sabit').width($('.krm-sabit').parent().width());});});
</script>

Burayı en sona bırakın. <head> etiketinin hemen altına eğer çalışmazsa ekleyin.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Hangi kütüphaneyi kullandığınızı bilmiyorum, belki gerek yoktur diye çalışmazsa ekleyin dedim. Gereksiz yük yaratmayalım.

CSS dosyanıza ekleyin.

.sabit {
position:fixed;
top:0;
z-index:99999;}

Sabit kalmasını istediğiniz widget veya sidebarın tamamına uygulayabilirsiniz. Yapmanız gereken tek şey sabit kalmasını istediğiniz div’e krm-sabit class tanımı yapmaktır.

Uygulamakta sorun yaşarsanız bana ulaşın, sizi yönlendiririm.

Yazar Hakkında: Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı seo çalışmalarıyla ilgileniyor! Bu yüzdendir ki; bu blogda bu konuların ne işi var demeyin! O konular bir fikre hayat veriyor.


{ 3 Yorum… add one }
  • İdo

    Hocam öncelikle eklenti kullanmadan yapabiliyor olmak hoşuma gitti. Yaptığı tek işlem reklamı sabit tutmak sonuçta. Bu yüzden eklenti kullanmak gerçekten gereksizdi. Adım adım uyguladım işe yaradı.

    • Kerem SARI

      İşinize yaradığına sevindim.

  • Anonim

    Bu olay yüzünden başım zamanında çok ağrımıştı ancak çok basit ve js’ye ihtiyaç duymadan bir çözüm yolu üretildiğini fark ettim.

    Kaydırdığımızda sabit kalmasını istediğimiz kapsayıcı dive position:sticky; eklememiz yeterlidir. Kaydırdıktan sonra üstünde boşluk kalsın derseniz top:30px; kodunu da ekleyebilirsiniz. Değeri kendinize göre ayarlayın.

    Position:Sitcky;

Bir yorum yazın