블로거 사이드바 스크롤에 따라오게 만들기 Sticky Sidebar for Blogger

 구글 블로거에서 사이드바가 스크롤에 따라오게 만드는 방법입니다. 한국말로 뭐라고 해야 할지 모르겠는데 영어로는 Sticky Sidebar라고 해요. 블로거 템플릿 중에 이미 Sticky Sidebar가 적용되어 있는 것들도 있지만, 테마를 직접 만들거나 기존의 테마를 수정하고 싶다면 코드를 새로 추가하셔야 해요. 'theia sticky sidebar'라는 플러그인을 이용해서 만들겁니다. 깃허브에 설명이 있지만 영문이라 이해가 힘든 분들을 위해 작성합니다.

★theia-sticky-sidebar 깃허브 원문: https://github.com/WeCodePixels/theia-sticky-sidebar

 티스토리나 블로거처럼 HTML을 직접 수정할 수 있는 사이트라면 모두 적용 가능합니다. 블로거의 HTML구조를 수정하려면 [테마 - 맞춤설정 옆의 ▼ 클릭 - HTML 편집]으로 가시면 됩니다.

 theia sticky sidebar를 적용하려면 사이트 구조를 다음과 같이 변경해야 합니다.

<div class="wrapper">
    <div class="content">
        <div class="theiaStickySidebar">
            ...
        </div>
    </div>
    <div class="sidebar">
        <div class="theiaStickySidebar">
            ...
        </div>
    </div>
</div>

 알맞은 위치에 <div class="theiaStickySidebar>를 추가하셔야 하는데요. 코드만 보고는 이해가 힘들 수 있는데, 콘텐츠가 있는 전체에 하나 추가하고, 사이드바에 하나 추가하면 됩니다. 아래 이미지를 보시면 이해가 되실 거예요. 예시는 제가 운영하는 다른 블로그입니다.

콘텐츠 전체 영역과 사이드바 영역에 코드를 추가하면 됩니다.

 코드는 개발자 도구로 찾으시면 됩니다. 크롬 기준으로 F12버튼을 누르면 개발자 도구가 나옵니다. 상단 첫 번째에 있는 요소 선택 도구를 이용해서 해당 영역을 클릭하세요.

 이 때 주의하실 점은 해당 영역의 가장 바깥쪽 코드를 찾아야 한다는 것입니다. 아래 예시는 제가 찾은 코드인데요.

 제가 영역을 클릭했을 때 class가 "sidebar section"이 나왔지만, 바로 위에 있는 "sidebar-wrapper"를 클릭하셔도 해당 영역이 선택됩니다. 그렇다면 제가 찾던 코드는 sidebar-wrapper가 되는 겁니다. 마우스를 코드에 가져가면 어느 부분인지 표시되니까 잘 찾아보시길 바랍니다.

 템플릿마다 요소 이름이나 구조가 다를 겁니다. 제 블로그는 다음과 같이 되어 있네요.

<div id="wrapper">
    <div id="content-wrapper">
-----------------------------코드를 추가하는 부분
        <div id="main-wrapper">
        </div>
        <div id="sidebar-wrapper">
-----------------------------코드를 추가하는 부분
            <div class="sidebar section" id="sidebar">
            </div>
        </div>
    </div>
</div>

---추가해야하는 코드---
<div class="theiaStickySidebar">

 이제 HTML 편집으로 가서 Ctrl+F로 요소의 위치를 찾으세요. 저는 'content-wrapper'와 'sidebar-wrapper'를 찾으면 되겠네요. 요소 이름을 기억해두세요!

 코드를 추가할 때 주의사항은 요소가 <div>로 시작하니까 </div>로 감싸주어야 한다는 것입니다. </div>를 어디에 추가해야 할지 찾는 방법은 옆에 있는 화살표(삼각형)을 클릭하는 것입니다.

삼각형을 클릭하면 해당 요소가 접히면서 코드 끝부분이 나옵니다.
거기에 </div>를 추가하시면 됩니다.

 이제 다음 코드를 찾아주세요.

</body>

 아마 가장 아래쪽에 있을 거예요.

 그 위에 다음 코드를 붙여 넣습니다.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
<script src='//cdn.jsdelivr.net/npm/theia-sticky-sidebar@1/dist/theia-sticky-sidebar.min.js' type='text/javascript'/>

<script type='text/javascript'>
  jQuery(document).ready(function() {
    jQuery('#content-wrapper, #sidebar-wrapper').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>
</script>

 '$' 다음에 있는 content-wrapper와 sidebar-wrapper에 여러분 페이지의 요소 이름을 입력하시면 됩니다.

※요소가 id라면 '#'을, class라면 '.'을 앞에 붙이셔야 합니다.

//Settings에 있는 내용은 선택 사항입니다.

 additionalMarginTop: 사이드바 상단의 margin값 지정

 additionalMarginBottom: 사이드바 하단의 margin값 지정

 updateSidebarHeight: 사이드바의 높이 설정. 배경이 보이지 않는 경우에 설정합니다.

 minWidth: 사이드바의 너비 지정

 disableOnResponsiveLayouts: 반응형 레이아웃을 자동으로 감지하고, 작은 화면이 될 경우 비활성화됨.

 템플릿마다 다를 것 같은데 본문이 사이드바보다 짧으면 맨 아래로 스크롤이 되지 않는 오류가 있을 수 있습니다. 근데 그럴 일은 거의 없으니까 공식 홈페이지 같은 게 아니라면 신경쓰지 않으셔도 될 것 같네요. 자바스크립트를 다룰 줄 안다면 수정해서 사용하면 되겠습니다.