북클럽 스킨으로 변경, 그다음 한 일은?

하루일기 블로그 스킨을 북클럽 스킨으로 변경했다. 이제까지는 고래스킨을 사용하고 있었다. 속도도 워낙 빨랐고, 나로서는 아무런 불만 없이 쓰고 있었지만, 가독성이 떨어지고 답답하다는 의견이 있었다. 무엇보다 다른 글을 더 이상 볼 마음이 나지 않는다는 의견이 있어 깜짝 놀라 바꾸게 되었다.

북클럽 스킨으로 바꾸고 난 다음에 한 일은 다음과 같다.

1. html 편집

가. 애드센스 코드 넣기

블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 가서 애드센스 코드 스크립트를 넣어 주었다. 이 문구는 스킨을 바꾸기 전에 미리 복사해 두었다. 미처 복사해두지 못했다면 애드센스에 가서 광고 코드를 복사해 오면 된다.

'html 및 css 편집으로 인해 발생하는 문제는 직접 수정하셔야 합니다. 계속 진행하시겠습니까?' 하는 질문이 나오면 '확인'을 선택해야 한다.

나. 사이드바 고정

이것 역시 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 가

야 한다. 이번엔 html이 아니라 css로 들어가야 한다.

@charset "utf-8";

이다음줄에 바로 아래 내용을 붙여 넣고 적용 단추를 눌러주면 된다.

#aside {
position: sticky;
position: -webkit-sticky;
top: -60px;
}

다. 최근글 / 인기글 순서 변경

사이드바에 최근글-인기글을 인기글-최근글로 순서를 바꿨다. 홈 화면에서 이미 최근글 순서로 나오고 있으니, 사이드 바에서 굳이 최근글을 보여줄 필요는 없지 않을까. 이왕 글 목록을 띄우려면 인기글이 낫겠다는 생각에 인기글이 먼저 나오도록 순서를 바꿨다.

블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 가서 '인기글'을 찾는다. 대략 612번째 줄에 있는데, 인기글과 최근글의 순서만 바꿔주면 된다.

<!-- 인기글/최근글 -->
                  <div class="post-list tab-ui">
                <div id="popular" class="tab-list">    
                  <h2>인기글</h2>
                      <ul>
                        <s_rctps_popular_rep>
                          <li>
                            <a href="">
                              <s_rctps_rep_thumbnail>
                                <img loading="lazy"
                                  src="//i1.daumcdn.net/thumb/C58x58.fwebp.q85/?fname=" alt="" />
                              </s_rctps_rep_thumbnail>
                              <span class="title"></span>
                              <span class="date"></span>
                            </a>
                          </li>
                        </s_rctps_popular_rep>
                      </ul>
                    </div>
                    <div id="recent" class="tab-list">
                      <h2>최근글</h2>
                      <ul>
                        <s_rctps_rep>
                          <li>
                            <a href="">
                              <s_rctps_rep_thumbnail>
                                <img loading="lazy"
                                  src="//i1.daumcdn.net/thumb/C58x58.fwebp.q85/?fname=" alt="" />
                              </s_rctps_rep_thumbnail>
                              <span class="title"></span>
                              <span class="date"></span>
                            </a>
                          </li>
                        </s_rctps_rep>
                      </ul>
                    </div>  
                  </div>