왓에버(Whatever) 스킨 적용하기(3) : 사이드바 오른쪽으로 옮기기

 

왓에버(Whatever) 스킨의 최대 단점은 사이드바가 하단에 위치한다는 점이다. 일반 접속자들은 블로그 하단으로 가서 광고를 클릭할 만큼 여유롭지 않습니다. 따라서 사이드바를 오른쪽으로 옮겨 보도록 하겠습니다.

 

검색하실때는 ctrl + f 입니다. 아래의 7개만 따라하시면 오른쪽 사이드바는 여러분의 것입니다.

 

1. HTML 변경

  스킨적용하기 (2)탄에 이어 사이드바를 HTML에서 어떻게 옮기는지 알려드리겠습니다. 저번에도 말씀드렸지만 여러분들은 프로그래머가 아니기때문에 모든 자세한 설명은 생략하겠습니다. 알려드리는 키워드를 찾아서 변경만 해 주십시요.

 

 (1) div class="inner"를 찾아서 초기 위치에서는 삭제한 후 </s_cover_group>과 <s_page_rep> 사이에 넣어 주세요. 이때, div class="main-body"를 추가해 줍니다.

  -초기 div class="inner" 위치 : 170 line

초기 div class="inner" 위치

   - 변경 위치 : 138 line 정도

   - 입력 사항 : div class="inner"

   - 추가 사항 : div class="main-body"

div class="inner"

 (2) </s_article_re>을 찾아서 </s_article_re>과 <s_tag> 사이의 </div>를 삭제해주세요

 

</div> 삭제

 (3) </s_paging>을 찾아서 </s_paging>과 <aside id="aside"> 사이의 </article>을 삭제한 후 </div>를 추가하세요

 

 

수정 전/후

 (4) <aside id="aside">를 찾아서 바로 아래 <div class="inner">를 삭제해 주세요

<div class="inner"> 삭제

 (5) footer를 찾아서 바로위에 </aside>와 </div>사이의 </div>를 삭제해 주세요.

 

</div> 삭제

 

(6) footer를 찾아서 바로 위에 </section>과 </div> 사이에 </article>을 추가해 주세요.

</article>추가

2. CCS 변경

189 line 정도에 sidebar를 검색하시고 #content . inner부터 sidebar-3까지 아래 코드를 그대로 복사하셔서 붙여넣기 하세요. 그러면 끝입니다. 여러분은 이제 오른쪽에 뜨는 사이드바까지 완성하셨습니다!!!!

CSS 변경

 

반응형

/*사이드바 구현*/
#content .inner { 
    max-width: 1200px; 
    margin: 0 auto; 
overflow: hidden;

} 
#content .main-body {  
    max-width: 860px; 
    overflow: hidden;
    width: 69%; 
    margin: 0 auto; 
    float: left;
 overflow: hidden;
 
} 

#aside { 
    margin-top: 100px;
    width: 31%;
   float: right;
    padding-top: 30px;
    height: auto;
    box-sizing: border-box;

/*    border-top: 1px solid #e6e6e6; */ 
} 
#aside .inner {  
    max-width: 1200px; 
    margin: 0 auto; 
    height: auto;
    
} 
#aside h2 { 
    margin-bottom: 7px; 
    padding-bottom: 10px;
    left: 5px;
    font-size:1em; 
    color: #b0d197; 
  border-bottom: 1.5px solid #b0d197;
}
#aside .sidebar-1 { 
    width: 85%;
    min-height: 10px;
    box-sizing: border-box;
    float: right;
} 
#aside .sidebar-2 { 
    width: 85%;
  min-height: 10px;
  box-sizing: border-box;
  float: right;
} 
#aside .sidebar-3 { 
    width: 85%;
    min-height: 10px;
  box-sizing: border-box;
  float: right;
}