본문 바로가기

Tistory

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기




티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기

 

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


티스토리에서 링크로 추가된 사이트가 많아지면 한도 끝도 없이 아래로 길게 출력돼서 관리하기가 불편할 수 있습니다. 그래서 목록박스 형태로 링크들을 표시하여 길게 출력되는 사이트들을 스크롤로 간단하게 볼 수 있도록 수정해 보겠습니다.


먼저 관리자페이지 → HTML/CSS 편집에 들어가서 link_site를 검색하면 링크 메뉴가 출력되는 소스를 쉽게 찾을 수 있습니다.


 

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


<h3 onclick="javascript:show_hide_div('link_div');">MY LINK</h3> 이 부분은 메뉴를 여닫는 메뉴 제목 부분이고 목록박스를 달게 되면 굳이 메뉴를 여닫을 이유가 없어지니까 빼주도록 하겠습니다. 그리고 나머지들을 정리한 부분은 아래와 같습니다.


 

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


이제 목록박스 소스를 넣어주겠습니다.


<select onchange="javascript:location.href = this.options[selectedIndex].value;;" style="width:175px">
<option value="">- 즐겨찾기 -----------</option>


위 소스를 <div class="link"> 아래 넣어주고 가로사이즈는 사이드바에 따라서 수정해 주시면 되고 목록을 펼쳤을 때 나오는 박스 가로사이즈는 관리자페이지 → 화면설정 → 화면출력 메뉴에서 링크 글자 수를 설정할 수 있는데 이 숫자에 따라서 가로사이즈가 결정됩니다.


<option value="[샵#_link_url_##]">[샵#_link_site_##]</option>


위 소스는 <s_link_rep> 아래에 넣어주면 됩니다. (위 샵 글자는 치환자 때문에 그렇게 쓴 것이니 # 으로 바꿔 사용하세요.)


마지막으로 </select> 소스를 </s_link_rep> 아래에 넣어주면 됩니다.


그런데 목록박스에 나오는 사이트를 클릭했더니 새창으로 뜨질 않고 같은 창으로만 뜨는 불편함이 발생합니다. 그래서 select 부분의 일부 소스를 수정해 주겠습니다.


<select onchange="javascript:location.href = this.options[selectedIndex].value;;" style="width:175px">

<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:175px">


수정된 링크 메뉴 소스입니다.


 

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


아래 파일을 받아서 수정하실 경우에는 <div class="link"> 에서 </div> 까지 지우고 그 자리에 소스를 넣어주면 됩니다.

 

티스토리 IS BASE 스킨 링크메뉴 목록박스로 만들기


[파일 다운로드]

l_s.txt