티스토리(Tistory) 사이드바의 메뉴(최신 포스트, 최신 댓글 등)를 블로그 하단에 보이게 하는 방법

갑자기 사이드바에 있는 메뉴를 티스토리 하단에 위치하고 싶어졌습니다.

어떤 사이트를 가봤더니 그렇게 보이는 게 아주 깔끔해 보이더라구요.

어떻게 하면 될까요?

[관리자 > HTML/CSS 편집] 메뉴로 이동해 보겠습니다.

이곳에서 직접 편집하는 게 불편하기 때문에 skin.html에 있는 내용을 Editplus에 옮겨와서 편집을 해보겠습니다.

소스 맨 아랫쪽에 사이드바의 메뉴들을 보여줄 영역을 div 태그로 만듭니다.

<div id="footSidebar">
</div>

이렇게 만들었다면, 가져올 사이드바의 소스를 찾아서 방금 만든 div 태그 안에 넣습니다.

소스를 넣을 때는 복사해서 넣지 말고 잘라내기 해서 넣으세요.

<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div id="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""> .</a>
<span class="cnt"></span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 최근 댓글 모듈 -->
<div id="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
      </div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="" onclick="window.open(this.href); return false"> .</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

<div id="footSideBar"> 사이드바에서 가져온 소스 </div>

저는 [최신 포스트 모듈], [최신 댓글 모듈], [링크 모듈] => 총 3개의 모듈을 가져왔습니다.
이렇게 소스가 완성되었다면 skin.html에 소스를 넣어서 [저장]하시면 됩니다.

이제 CSS로 꾸며보겠습니다.

#footSidebar {
                width:100%;
                height:300px;
                background-color:#6D7DB3;
                margin-bottom:20px;
                padding:10px 0 10px 0;
                color:#FFFFFF;
                font-size: 11pt;
             }
#footSidebar a {color:#FFFFFF;}
#footSidebar a:link {color:#FFFFFF;}
#footSidebar a:hover {color:#FFFFFF;}
#footSidebar ul {list-style:none;}
#footSidebar ul li {margin-bottom:5px;}
#footSidebar h3 {text-align:center; padding-bottom:5px;}

#recentPost {float:left; width:365px; margin-right:20px; text-align:left;}
#recentComment {float:left; width:365px; margin-right:20px; text-align:left;}
#link {float:left; width:320px; text-align:left;}

저와 동일하게 하려면 위와같이 CSS 소스를 맨 아랫쪽에 추가해 주시면 되는데요.

각 블로그의 상황에 맞게 조금씩 수정해서 사용하시면 됩니다.

#footSidebar {
                width:100%;
                height:300px;
                background-color:#6D7DB3;
                margin-bottom:20px;
                padding:10px 0 10px 0;
                color:#FFFFFF;
                font-size: 11pt;
             }

이 부분은 하단 영역을 꾸며주는 부분입니다.
배경이미지나 폰트 크기 등을 알맞게 수정해 주시면 됩니다.

#footSidebar a {color:#FFFFFF;}
#footSidebar a:link {color:#FFFFFF;}
#footSidebar a:hover {color:#FFFFFF;}
#footSidebar ul {list-style:none;}
#footSidebar ul li {margin-bottom:5px;}
#footSidebar h3 {text-align:center; padding-bottom:5px;}

이 부분은 하단에 옮겨온 실제 내용들을 꾸며주는 부분입니다.
링크의 색상이나 폰트 크기 등을 변경하고 있습니다.

#recentPost {float:left; width:365px; margin-right:20px; text-align:left;}
#recentComment {float:left; width:365px; margin-right:20px; text-align:left;}
#link {float:left; width:320px; text-align:left;}

이 부분은 각 모듈을 가로로 정렬해 주는 부분입니다.
이 소스가 없으면 세로로 일렬로 쭉~ 나옵니다.

style.css 맨 하단에 소스를 붙여넣은 다음에 [저장]하세요.

자, 이제 완성된 모습을 볼까요?

저는 마음에 드는데 어떠실지 모르겠네요.

각 블로그에 맞게 CSS를 적당히 수정해 주시면 예쁘게 꾸밀 수 있으니 한번 해보세요.