구글블로그는 한국유저가 없어서 그런지 정보를 찾기가 쉽지 않은것 같습니다.

간단한 html 수정의 경우 티스토리 블로그의 경우 검색하면 관련된 정보가 몇개는 나오는데 구글블로그는 어쩌다 한개 찾으면 있긴한데 내 블로그와 구조가 같지 않을 경우 시행착오를 겪을 수 밖에 없습니다.

이번에 구글블로그에 사이드바광고가 본문 글을 따라오다 멈추게 적용하고자 하였습니다.

티스토리의 경우 관련된 것을 검색하면 아래와 같은 정보를 쉽게 찾을 수 있습니다.

북클럽 스킨

[ 블로그관리→스킨편집→html편집→CSS→맨 하단에 아래 코드 추가 ]

#aside {
  position: sticky;
  position: -webkit-sticky;
  top: -

고래 스킨
[ 블로그관리→스킨편집→html편집→CSS ]
Ctrl+F를 이용해 #container #main #sidebar을 찾고 아래 코드와 같이 수정

  #container #main #sidebar {
    margin-left: 15px;
    max-width: 300px;
    align-self: flex-start;
    top: 2rem; flex:1;
    position: sticky;
    position: -webkit-sticky;
    }

구글블로그에서 사이드바 고정 광고

이러한 설정을 구글블로그에서는 어디를 수정 해야 할까요?
아래에서 설명하는 3군데에 관련 코드를 넣으면 됩니다.

<!-- Content Wrapper -->
   <div class='row' id='content-wrapper'>
   <div class='theiaStickySidebar'>    ◀삽입 코드


<!-- Sidebar Wrapper -->
   <div class='theiaStickySidebar'>    ◀삽입 코드
   <div id='sidebar-wrapper'>

위에서 "<div class='theiaStickySidebar'>" 를 넣었기 때문에 어디선가는 닫아주는 "</div>"를 넣어줘야 합니다. 그 위치는 html 편집에 들어가서 해당줄 좌측에 보면 "▼" 모양의 작은 삼각형이 있습니다. 이것을 누르면...

아래와 같이 "↔"모양이 생기는데 그곳에 넣어주면 됩니다.
하지만 어떤 경우에는 이곳에 넣으면 약간 오류가 있을 수 있습니다.
사이드바 광고가 잘 따라오지 않는다던가 블로그 레이아웃에 문제가 생길 수 있습니다.

"↔"이렇게 위치표시가 있어도 그 위나 아래 근처에 넣어보고 오류가 없는 위치에 넣어야 합니다. 여기저기 근처에 넣어보는 노가다성 작업이 필요합니다.

문제가 생길 여지가 있으니 사전에 백업을 권장합니다.

<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(&#39;#content-wrapper, #sidebar-wrapper&#39;).theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

 ▲</body>위로 상단 전체 삽입
</body> 