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

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.