Davetsiz Hayat'a hoşgeldiniz, 17 Kasım 2017

Blogger Sayfa İle Kayan Sticky Widget Yapımı

Blogger Sticky Widget Nasıl Yapılır ?

Blogger eklentilerinde  çok sayıda kullanabileceğimiz özellik  yok. Ama  yabancı  geliştiriciler bu konuda boş durmuyor. WordPress de  kullanılan sayfa ile kayan araç çubukları  blogger sitelere de uyarlanabiliyor. Buna  sticky widget yani yapışan  widget deniyor.

Bu widget ‘ ın uygulanması da  çok basit.  Eğer  blogger da  şablon ile alakalı az çok bilginiz var ise  kolaylıkla düzenleyebiliyorsunuz.

Blogger Sticky Widget Kullanımı:

1. İlk Önce blogger panelimize  giriş yapıyoruz.  Yerleşim  kısmından sayfa ile kayan widget yapmak istediğimiz sütuna   Gadget Ekle  kısmına  tıklayarak bir HTML JavaScript  gadget ekliyoruz.  Daha sonra oluşturduğumuz  gadget ‘ da  Düzenle  kısmına  tıklıyoruz. Yeni bir pencere  olarak açılacak. Açılan pencerenin adres satırının sonunda [kirmizitext] #HTML1 [/kirmizitext]  şeklinde  bir yazı yazar. Tabi sizinkinde  HTML 2  veya başka olabilir onu bir kenara yazıyoruz.

2.  Şablon > HTML düzenle > Şablonu Biçimlendir  şeklinde  girip aşağıdaki kodu  </body>  kodunun hemen üstüne  yapıştırıyoruz.  Ve  şablonu Kaydediyoruz.

[code lang=”js”]<script type=’text/javascript’>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",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("HTML1");
//]]>
</script>[/code]

Üsteki kodun sınunda yazan HTML1 kodunu kendi oluşturduğumuz widgetinkiyle değiştiriyoruz.
3.  Daha sonra  aşağıdaki kodu  ]]></b:skin>  buluyoruz  ve hemen üstüne ekliyoruz  ve şablonu kaydediyoruz.

[code]/* Davetsiz Hayat www.davetsizhayat.com */.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;} [/code]

Şu anda  widgetimizin  çalışması  gerekiyor.  Eğer yapamadığınız  bir şey varsa yorumlardan yardımcı olabilirim.

Blogger  Sticky  Widget Eklentisi  hakkında  aşağıdaki örnek siteye bakarak inceleyebilir siniz..

 

[kirmizibuton]Demo [/kirmizibuton]

Etiketler:

BU KONUYU SOSYAL MEDYA HESAPLARINDA PAYLAŞ

Yorumlar

Henüz yorum yapılmamış.

Yorum Yaz