[늑대] 사이드바에 링크 모듈 추가하고 관리하기

지난 공지사항에 블로그 수정사항 중 사이드바에 추천 사이트가 추가 되었다고 알려 드렸더니,
이웃 블로거이신 용자님께서 '이봐, 그러지 말고 태그 공개 해보는건 어때~' 라고 말씀 하셨습니다. ㅋ

태그를 공개 하기전에 주의사항을 말씀 드리겠습니다.

본 태그는 IS BASE 스킨 사용자들만 해당 되며, 다른 스킨을 이용하는 분들께서는 각 스킨의 사이드바 링크모듈의
태그를 잘 살펴 보시고 연습하여 태그를 순차적으로 수정 하시길 바라겠습니다.

모듈 제목 부분이 이미지로 표시되는 스킨은 추가할 링크 모듈의 이미지 파일을 직접 업로드 해야 할 것이며,
모듈 제목이 이미지가 아닌 텍스트 파일로 표시되는 스킨은 본 강좌를 참고 하시고,
HTML 태그를 재차 수정하여 적용 해보시길 바랍니다. (태그 연습용 블로그를 생성 하는걸 권유)


링크 모듈을 추가하게 된 배경?

사실 팀 블로그는 링크 모듈을 추가하기 전에는 한 곳에서 이웃 블로그와 추천 사이트들을 추가하고 관리 했습니다.
어느 날, 링크 모듈을 본 필자는 '링크 모듈을 추가해서 블로그와 사이트를 나눠볼까?' 라고 생각하여
링크 모듈 추가방법에 대해서 연구(?)하기 시작 했습니다.

몇번의 시도끝에 링크 모듈의 추가 태그를 완성 했지만, 모듈 제목을 클릭하면 모듈이 접히는 태그가
미완성이 되어 다시 한번 태그 수정에 돌입하여 완성 했습니다!

링크 모듈의 추가 태그를 완성한 후에 '이걸 공개해? 그냥 놔둬?' 라고 선과 악이 자주 드나들곤 했는데-_-;
용자님께서 태그를 공개 해달라고 하셔서 공개 하기로 결정 했습니다. ㅋㅋ

위의 이미지를 보시면 아시겠지만, 기존 IS BASE 스킨의 링크는 HTML 수정 전 화면 입니다.
이제 링크 모듈을 추가하면 HTML 수정 후 화면처럼 링크 모듈이 추가 됩니다.

자, 그럼 관리자 모드에서  스킨 -> HTML/CSS 편집  메뉴로 가셔서 skin.html 화면을 밑으로 스크롤 한 다음에
사이드바에서 링크 모듈을 찾아 봅시다. (다른 방법으로는 CTRL + F 한 후, [링크 모듈] 입력 후 검색하면 됩니다;)

위 이미지에서 빨간색 네모박스는 링크모듈 태그이며, 파란색 네모박스는 카운터 모듈 태그 시작점 입니다.
링크모듈 태그의 마지막 부분에서 첫번째 </div> 태그 뒤에 아래의 소스를 사용자 입맛에 맞게 수정하고 추가 하시면 됩니다.

(짜다 싶으면 물넣고, 싱거우면 소금이나 간장을 넣어 주세요 ㅋ;;)

<div class="no title">
<h3 onclick="javascript:show_hide_div('no title_div');">모듈 제목 (예: 추천 사이트)</h3>
<div id="no title_div" >
<ul>
<s_link_rep>
<li>
<a href="사이트 주소" onclick="window.open(this.href); return false"><script type="text/javascript" >is_LinkIcon('사이트 이름');</script></a><br>  ┗▶ 링크 클릭 시, 새창으로 보여주는 태그
</li>
</s_link_rep>
</ul>

위의 태그를 사용자 임의로 수정 후, 미리보기를 하여 태그가 잘 나온다면 저장하여 확인 해봅시다.
(HTML 저장 하기 전에 블로그 백업을 꼭 하시길 바랍니다)

추가된 링크 모듈에 사이트를 추가 할려면?
<a href> 태그부터 <br> 태그까지 추가한 다음에 사이트 주소와 이름만 수정 하시면 됩니다.


※ 추가 팁!

사이드바의 다른 모듈 제목을 변경 하실려면 위의 태그에서 모듈 제목 부분만 수정 하시면 됩니다.
(예: notice - 공지사항)


IS BASE 스킨 사용자가 아닌 경우, 사이드바의 링크 모듈 태그를 직접 수정하고 분석하면
해당 스킨에 링크 모듈을 추가하는 HTML 태그를 알 수 있을 것입니다. ^^*

강좌에 관련된 질문은 덧글로 해주시면 감사 하겠습니다!

By 늑대