Blogger 사이드바 Sticky 위젯 설치하기 | Sticky Sidebar Widget for blogger.

Blogger 사이드바 Sticky 위젯 설치하기

사이트: https://www.hownaija.com.ng/2020/09/how-to-create-responsive-sticky-sidebar-widget-on-blogger.html

기존 사이드바 Sticky 스크립트를 적용 시 위젯이 footer 까지 Overlap되는 오류가 있었는데,
이 코드는 Sticky 위젯을 특정 위젯까지 Stop 할수 있는 기능이 들어가 있어서 매우 좋습니다.

-이 스크립트는 blogger 사이드바 위젯 중 1개를 float 할 수 있다.
-이 위젯은 footer 에 overlap 되지 않는다.
- 반응형 템플릿 사용 시 모바일에서는 hidden 처리됩니다.

적용 방법

Template > Edit HTML 에 들어갑니다.


1. jQuery 모듈 확인 및 삽입

jQuery 모듈이 없다면 head 사이에 넣으세요.
바로 위에 넣으면 됩니다.

1	<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

모듈이 있으면 이 단계는 넘어가세요.


2. body 태그 위에 다음 코드를 넣으세요

</body>

body 태그 위에 다음 코드를 넣으세요

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

3. 위에 코드중에 Highlighted 된 #PopularPosts1 을 모두 widget ID 로 변경하세요

  (sticky를 원하는 위젯 ID로 모두 바꿔주세요.)

#footer-wrapper 를 위젯 ID로 바꿔주세요
   (이 부분은 overlap를 방지하기 위해 어느 위젯까지만 Sticky 될지 결정합니다.)


4. Sticky 위젯 CSS추가하기

#PopularPosts1{width:100%;max-width:320px}
@media only screen and (min-width:260px) and (max-width:989px){
#PopularPosts1{display: none!important;}}

#PopularPosts1 을 위젯ID로 변경하세요

위젯의 최대 size도 정의할 수 있습니다.