Blogger eklentilerini nasıl yapışkan (sticky) yaparız? |
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 |
Ş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>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ı.
<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>
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.
Teşekkürler...
YanıtlaSilsidebar'ın tamamını yapışkan yapmak için bu kod düzenlenebilir mi? widget yerine sidebar yapabilirmiyiz
YanıtlaSilMerhabalar, 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.
Silsidebardaki reklamı yapışkan yapmak reklam adına bütün sorunları çözer fikir için teşekkürler.
SilYaptım oldu.
Meraba,
YanıtlaSilYararlı 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.
Merhaba, rica ederim. #widget Id, #widget Id şeklinde aralarına virgül ekleyerek birden fazla eklentiyi sabitleyebilirsiniz.
SilMerhaba, 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ıtlaSilMerhabalar, 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.
SilWidgetin 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.
SilBu kodu da deneyebilirsiniz. (http://blogtecrubem.blogspot.com/2017/08/blogger-eklentilerini-sayfa-ile-hareket-ettirme.html)
SilYok 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.
SilBlogunuzun linki nedir?
Silhttps://www.oscarfavorite.com
SilKodlar ekli değil.
SilKodlar 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Ş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.
SilUzun 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.
Silbende işe yaramadı hocam neden acaba?
YanıtlaSilHocam bu sitedeki en düzgün çalışan sticky kodu bu :/
SilBu sitedeki bütün kodlar taş gibi çalışır.
SilBir çoğunu denedim kullandım, kullanıyorum.
Bir iki haftadır bu yazıya yorum yazmak aklımdaydı buraya yorum yazıldığını görünce yazayım dedim.
Son google güncellemesi ile chrome tarayıcılarda yapışkan reklam kodları gösterilmeyecekmiş.
Global Better Ads Standartları çerçevesinde sticky ve diğer reklam şekillerini kullananlar için chrome tarayıcıda reklamlar 9 temmuzdan itibaren engellenecek şeklinde bir açıklama yapılmış. Diğer tarayıcılar için engelleme yok sanırım.
Buradaki kodla adsense dışında sticky kullanırsanız sıkıntı yok.
Ben buradaki kodu kullanıyorum. Kaldırmaya da niyetim yok. Varsın chrome kullananlar orada reklam görmesin.
Başarılar.