본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

티스토리 블로그 사이드바 모듈을 풀다운(pull down)메뉴로 만들기


이 포스트는 바로 전에 작성한
티스토리 티스토리 블로그에 3D 입체 태그구름 달기포스트가 첫화면에 보이는 동안은
사이드바의 태그구름이 구현되지 않기에 첫화면을 바꾸기 위해서 부랴부랴 작성하는 포스트입니다.


사실은 내일쯤 써보려고 했거든요.

블로그의 사이드바를 보면 모듈이 참 많이 들어가는데요.
위젯형식, 플러그인 형식, html태그박스, 스크립트 등 여러가지 모듈이 들어가죠.
다 넣기에는 너무 지저분하게 보이고 그렇다고 빼기엔 아깝고....

특히 월별 글목록(Archives), 최근 트랙백(Recent Trackbacks), 최근 코멘트(Recent Comments), 링크 등의 목록이 많아지면
쭈욱~~~~ 아래로 길게 늘어지는데요. 개인적으로 코멘트는 그냥 보여지는게 좋은 듯 하고 나머지는 필요할 때 볼 수 있게
풀다운 메뉴로 바꾸면 어떻까 생각을 해봤어요.
블로그를 돌아 다니다 보면 실제로 풀다운 메뉴를 적용하신 블로거도 볼 수가 있죠.

그래서 저도 해봤습니다.

우선 월별 글목록과, 최근 트랙백을 풀다운 메뉴로 바꿔봤는데요.
링크 목록까지 바꾸려고 했으나 위에 설명드렸다시피 급하게 포스트를 작성하느라.....^^

소스코드를 붙여넣을 위치를 먼저 알려 드려야 할 것 같아서 사이드 바에 대한 설명을 먼저 간단히 드릴게요.
요 내용은 앞에 포스트에서 설명했으나 여기서도 하는게 좋을 듯해서....

그림을 보시면 사이드바에 위치하는 모듈은 <s_sidebar_element>와</s_sidebar_element> 한쌍이 하나의 모듈이 됩니다.
그림에서 주황색으로 표시된 부분이 하나의 모듈이 되는거죠. 저건 검색모듈이네요.

그러면 어느 위치에 넣느냐. 하나의 모듈이 끝나는 부분과 다음 모듈이 시작되는 사이에 들어가면 되죠.
위에서는 주황색 아래 파란색 사이에 넣으면 되겠죠?

긴말 필요없이 소스 퍼가시도록 올려드립니다.
아래의 소스(오른쪽 상단 아이콘 중 첫번째 'view source'를 클릭하시고 뜨는 창에서 소스복사)를 'skin.html'의 사이드바 부분에 붙여 넣으시면 됩니다.

먼저 최근트랙백 소스입니다.




Recent Trackbacks



그다음 최근글목록 소스입니다.




Archives



사이드바에 적용한 모습입니다.

별로 어렵지 않죠?
조만간 링크도 바꿔서 올려보겠습니다.

덧 붙이기

북마크 모듈도 추가합니다.
최근 글목록과 트랙백은 같은 창에서 뜨게 했는데 북마크는 새창에서 뜨게 적용했습니다.




Bookmarks