HTML/CSS 편집에서 사이드바 기본 모듈을 좌, 우로 이동하여 위치시키기

지난번에는 HTML/CSS 편집에서 블로그 우측 사이드바 카테고리(category)목록 모듈 및 배경색 삭제(링크)에 대해서 설명을 드렸고 이번에는 제 블로그 우측 사이드바에서 최근 포스트 모듈, 최근 댓글 모듈, 최근 트래백 모듈, 글 보관함 모듈, 링크 모듈등을 좌측 사이드바로 이동해 보도록 하겠습니다.

사이드바 설정에서 안되는 기본 모듈도 사이드바에 좌, 우측으로 이동이 가능하고 사이드바 설정에서 추가 삭제가 되는 모듈은 사이드바 설정에서 드래그로 옮길 수가 있습니다.

이번에 우측에 있는  최근 포스트 모듈, 최근 댓글 모듈, 최근 트래백 모듈, 글 보관함 모듈, 링크 모듈의 태그 소스를 HTML/CSS 편집 skin.html 창에서 카운터 모듈 태그 아래로 붙여 넣기 하시면 됩니다.

제가 사용하는 티스토리 블로그 3단형 NaVyMoD 스킨이으로 설명에 도움을 주고자 참고한 이미지이고 위와같이 우측에 있던 모듈이 좌측으로 옮기는 작업입니다.

관리자(admin) - HTML/CSS 편집 - skin.html창으로 이동을 하시고 skin.html창에서  <!--최근 포스트 모듈-->, <!--최근 댓글 모듈-->, <!--최근 트래백 모듈-->, <!--글 보관함 모듈-->, <!--링크 모듈-->의 태그를 <!--카운터 모듈--> 태그 아래에 잘라내기(Ctrl + x)해서 붙여넣기(Ctrl + v)를 하시면 됩니다.

<!-- 최근 포스트 모듈 -->

<div id="recentPost" class="tt-module">

<h3>Recent Post</h3>

<ul>

<s_rctps_rep>

<li>

<a href=""></a>

<span class="c_cnt"></span>

</li>

</s_rctps_rep>

</ul>

</div>

</s_sidebar_element>

<s_sidebar_element>

<!-- 최근 댓글 모듈 -->

<div id="recentComment" class="tt-module">

<h3>Recent Comment</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="recentTrackback" class="tt-module">

<h3>Recent Trackback</h3>

<ul>

<s_rcttb_rep>

<li>

<a href=""></a>

<span class="info"><span class="name"></span><span class="date"></span></span>

</li>

</s_rcttb_rep>

</ul>

</div>

</s_sidebar_element>

<s_sidebar_element>

<!-- 글 보관함 모듈 -->

<div id="archive" class="tt-module">

<h3>Archive</h3>

<ul>

<s_archive_rep>

<li>

<a href=""></a>

<span class="c_cnt">()</span>

</li>

</s_archive_rep>

</ul>

</div>

</s_sidebar_element>

<s_sidebar_element>

<!-- 링크 모듈 -->

<div id="link" class="tt-module">

<h3>My Link</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>

</s_sidebar>

< !--카운터 모듈--> 태그소스 또는 기존에 설명했던 것 중 블로그 이미지/설명 모듈, 달력 모듈, 태그 모듈 등 원하는 태그소스 아래에 원하는 모듈을 잘라내기해서 붙여넣기 하시면 되고 좌측에 있는 모듈을 우측으로 옮기시려면 <!--최근 포스트 모듈-->, <!--최근 댓글 모듈-->, <!--최근 트래백 모듈-->, <!--글 보관함 모듈-->, <!--링크 모듈--> 등 중 원하는 위치에 태그 소스를 잘라서 붙이시면 좌우로 원하는 자리에 모듈을 배치할 수 있습니다.

writen by 7istory.tistory.com