티스토리 블로그 대문 티에디션의 리스트를 마음대로 확장시켜 보자...

티스토리 블로그에는 티에디션이라는 대문을 쉽게 만들 수 있는 것이 있죠. 이것을 이용하면, 특정 포스팅된 글이 아닌 블로그로 들어왔을 때 해당 티에디션으로 꾸민 모습으로 보여지게 되는 것이죠. 아래 이미지가 바로 티에디션을 이용한 모습입니다.

위 이미지를 보면, 전체보기 메뉴에 4가지 포스팅만 기본적으로 보이도록 설정을 했었는데요. Default 는 4개만 설정되도록 되어 있습니다. 4개, 8개, 12개 포스팅을 보여주려면, +, - 버튼을 이용해서 간단하게 설정할 수 있지만, 5~7개정도를 설정하기 위해서는 어떻게 해야 할까요?

■ 티에디션 시작하기...

관리페이지의 화면설정을 클릭하게 되면 티에디션 시작하기 라는 버튼을 발견할 수 있습니다. 이 버튼을 누르면 비로서 티에디션을 설정할 수 있는 관리 화면이 나타나게 됩니다.

■ 해당하는 메뉴 선택

개수를 수정하려는 메뉴를 선택을 하면, 좌측과 같이 조그만 팝업이 뜨면서 그 메뉴의 내용을 수정할 수 있습니다.

■ HTML 선택

팝업에서 디자인을 선택하면, HTML 이라는 버튼이 있는데요. 이 버튼을 누르면, 해당 메뉴의 상세한 설정을 코딩을 통해서 상세하게 수정할 수 있습니다. 

■ HTML 자세히 보기...

HTML 을 보시면, 많은 내용들이 있는데요. 스크롤로 되어 있는 내용을 여기에서는 수정하기가 힘들 경우가 많습니다. 그래서 h2 부터 범위 지정을 통해서 복사해서 문서편집기에 붙여넣기를 해서 전체적으로 보는 것이 편합니다. 단, 익스플로러에서는 범위지정해서 복사가 안되더라구요. 크롬을 이용하면 정상적으로 되니, 참고하시기 바랍니다. 모든 것을 복사했으면, 수정하는 방법에 대해서 살펴보도록 하겠습니다.

■ 숫자 Index 를 수정하자...

총 4개의 포스팅을 보여줘야 하기 때문에 div 태그 부분이 총 4번에 걸쳐서 작성되어 있는 것을 볼 수 있습니다. 그래서 4개에서 5개로 늘리기 위해서는 위 div 태그 부분을 한번 더 복사해서 빨간색으로 테두리된 부분을 수정하면 되는데요. 마지막 인덱스가 3으로 되어 있을겁니다. 0부터 시작했으니, 당연한것인데요. 이 부분을 마지막에 복사하셔서 4로 모두 변경해주시면 됩니다.

위 이미지는 마지막에 오는 div 태그 부분입니다. class 내용이 다르죠? 마지막에 오는 부분은 스타일이 다르게 적용되는 것 같습니다. 그래서 마지막이 아니라면 class 명을 tt-span-3 으로 작성하시고, 마지막이라면 tt-span-3(공백)tt-last 로 클래스명을 작성하셔야 합니다.

■ 적용된 결과

총 8개로 적용하기 위해서는 마지막 인덱스가 7 이어야 되며, 이렇게 적용시킨 결과는 위 이미지와 같습니다. 위 소스를 수정하는 방법은 4의 배수로 표현하는 것이 아닌 5~7개 처럼 4의 배수가 아닌 경우에 적용하셔서 하는 방법입니다. 조금 연구하셔서 좀 더 이쁜 스킨 만들어 사용하시기 바랍니다. 어려우시면 유료 스킨 사셔서 이뿌게 꾸미세요...ㅎㅎㅎ

이상, 초매였습니다.