티스토리 오디세이 스킨 사이드바 위치 변경 방법 - 사이드바 왼쪽 오른쪽 바꾸기

안녕하세요

티스토리에서 올해 9월 새로운 스킨을 업데이트했는데요

바로 오디세이(Odyssey) 라는 스킨이예요

이 스킨의 특징은 사이드바가 오른쪽에 있어요

서랍형으로도 만들 수 있지만 사이드바가 아무래도

카테고리도 잘보이고 잘쓰게 되는데요

사이드바를 왼쪽으로 이동하는 방법에 대해서 알아볼게요

오디세이의 어원은 그리스 신화를 시작으로 하는 것 같아요

블로그 페이지에서 오디세이 스킨을 보시면

사이드바가 오른쪽에 위치하는 것을 볼 수 있어요

오디세이 스킨은 깔끔하고 이쁜 것 같아요

스킨 편집에 가셔서 PC 레이아웃 사이드바 형태를 살펴보아도

'2단 우측 사이드바', '1단 서랍 사이드바' 두 가지만을 지원하고 있는데요

왼쪽 사이드바는 지원을 하지 않고 있어요

왼쪽을 잘 활용해야 하는 이유는

왼쪽위가 가장 뜨거운(HOT) 공간이기 때문이예요

마케팅에서는 비싸다고 알려진 공간으로 비싼 공간을 효율적으로 잘 활용해야 해요

우리나라 처럼 왼쪽에서 오른쪽으로 글을 읽는 문화에서는

사람들은 F자 형태로 시선이 움직인다고 해요

우선 "스킨 편집"에서 "html편집"으로 들어와주세요

스킨편집이 어디 있냐면

Blog 홈 화면에서 q 를 누르셔도 되고

url에
티스토리명.tistory.com/manage
라고 치고 들어오시면

왼쪽 메뉴바에 스킨 편집이라고 있어요

 

html 편집을 누르시면 코드들이 보이시는데

코딩을 못하시는 분들도 포기하시지 마세요

정말 쉬워요, 복사 붙여넣기만 할 줄 알면 된답니다.

아래의 코드를 복사해주셔서 html 편집 맨 아래쪽에 보시면

</body> 부분이 있는데 여기 앞에 커서를 두고 붙여넣어 주세요

그러면 위에 사진과 같이 나올거예요

여기서 저장을 하고 나와주세요

<style>
  @media screen and (min-width: 1061px) {
    .wrap-right .area-aside {
      margin: 32px 80px 0 0;
    }
  }
</style>
<script>
  var _main = document.querySelector('.main');
  var areaMain = document.querySelector('.area-main');
  var areaAside = document.querySelector('.area-aside');
  _main.insertBefore(areaAside, areaMain);
</script>

 

다시 블로그로 돌아와 보시면

이렇게 이쁘게 사이드바가 왼쪽으로 이동한 것을 확인할 수 있습니다.

모르시거나 잘 안되시는 분들은 댓글로 남겨주세요 😗

감사합니다 ㅎㅎ