티스토리에서 이웃목록을 예쁘게

이 글에서 설명할 것 간단히 소개

얼마전 쥬르날님의 방명록에 저의 블로그의 링크처럼 어떻게 하냐고 물어서 설명하려고 하고 있던 차에 설명합니다. 아마 여러분은 티스토리 블로그에 갈 때 그 블로그를 이웃추가하고 싶다면 보통 아래래 그림에서 보실 수 있는 노락색박스에서 메뉴바의 이 블로그를 클릭한 후 내 링크에 추가를 클릭하면 자신의 링크(LINK)에 추가되어 길게 나열된다는 것을 아실 것입니다.  여러분이 아셔야 할 것은 티스토리에 로그인하지 않거나 2차주소(개인도메인)를 사용하는 블로그 등에는 아래 그림의 노란색박스안의  메뉴바가 나타나지 않는다는 것을 아시기 바랍니다. 보통 길게 나오는 것을 저의 블로그의 사이드바에 나온 것 처럼 깔끔하게 만들어 보는 것입니다. 이것을 미리보려면 미리보기는 저의 블로그 사이드바에 있는 LINK에서 보시기 바랍니다.

★아래 수정은 스킨에 태그를 많이 할 것이니 태그 등에 어려움을 느낀시면 그냥 글을 읽지 마세요. 글이 어렵고 초보자를 대상으로 하지 않아서 혹시 스킨을 만져 블로그를 망칠 수 있으니 그냥 넘어가시기 바랍니다.★

주의사항

여러분이 괜히 스킨을 만져 블로그를 망치는 것을 바라지 않으니 생각이 없다면 이 강좌를 보시지 마시고 만약 스킨을 수정하여 이웃목록에 변화를 주고 싶다면 스킨 수정전 반드시 저장하시고 수정하시기 바랍니다. 그래야 수정전으로 간단히 돌아갈 수 있기 때문에 반드시 스킨을 저장합니다. 스킨수정전 저장은 제가 여러분께 권장사항이라기 보다는 필수라고 말하고 싶습니다.

해보기 

내 링크에 블로그를 추가를 하면 그 블로그가  링크 목록에 추가되는 것을 저의 사이드바에 보듯이 나오게 하는 것인데 여러분이 아셔야 할 것은 자바스크립트를 사용하지 않을 것입니다. 이것을 티스토리의 기본 스킨인 BASIC 2008 으로 설명드리며 제가 사용한 브라우저는 크롬 9입니다.  참고로 결과는 http://study3.tistory.com/ 에서 확인하실 수 이며 제의 익스플로러 8과 파이어폭스 3.6에서 보니 크롬 9와 동일하게 나오더라고요.

1. 스킨 저장 : 스킨을 수정하기 전에 스킨 수정이 잘못되면 전으로 돌아가기 위해서 관리의 스킨 메뉴에서 스킨선택을 클릭한 후 스킨 저장 버튼을 눌러 반드시 스킨을 저장합니다. 스킨을 저장안하고 블로그를 망쳐 속상해서 저에게 화풀이로 악플 등을 달지 마세요.

 

2. 링크 부분 찾기 : 관리의 스킨 메뉴에서 스킨 선택을 클릭하여 스킨을 저장한 후 HTML/CSS 편집 버튼을 클릭합니다. 키보드의 Ctrl+F를 눌러 링크 모듈을 입력하여 링크 모듈라는 부분을 찾으면 아래와 같습니다. 그런 후 파란색 부분인 <div id="link">에서 </div>까지 부분을 선택합니다.

3. 코드 복사후 붙이기 :  아래 파일의 코드를 복사해서 위그림의 파란색 부분에 붙이면 됩니다. 다시 말해 위의 파란색 부분을 아래 코드로 변경하는 것입니다. 현재 저의 경우 폰트는 렉시새롬 웹폰트인데 전에는 나눔고딕이었습니다.

이웃목록_소스.txt

 위 그림에서 파란색 부분을 위 코드를 대체하면  아래 그림의 빨간박스같이 됩니다. 이번에는 목록의 폰트를 예쁘게 바꾸어 보겠습니다.

4. 목록 폰트 변경 : 목록안의 폰트를 나눔고딕으로 바꾸며 사이드바의 가로폭이 173이므로  아래 그림처럼 style.css 마지막에 select { font:13px/1.5 NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Gulim, 굴림;width: 173px;}을 더 하면 마무리 됩니다. 지금 스킨은 가로폭이 240이니 자신의 가로폭에 맞게 수정합니다. 

저의 사이드바에 볼 수 있는 LINK에 있는 풀다운 메뉴에서 이웃 블로그 목록외 나머지는 자바스크립트를 사용한 것인데 이것에 대한 것은 http://nextgoal.tistory.com/956 를 보세요. 
 

1. 위 설명이 어려워 무슨 말인지 모르시거나 하면 변경하지  마세요. 괜히 따라하다가 블로그를 망칠 수 있으니 글처럼 한다는 정도만 알고  넘어가세요.
2. 이제 블로그에서 자바스크립트를 사용하지 않으므로 기존처럼 다른 블로그를 자신의 블로그 링크에 추가하면 됩니다.
3. LINK에서 이읏블로그 목록을 제외한 모든 것은 자바스크립트로 했으니 그것은 http://nextgoal.tistory.com/956 을 참조하시고 제가 설명한 것은 onchange가 자바스립트 속성인지 모르나 제가 알기로는 자바스크립트를 사용하지 않아서 자바스크립트와 스킨과의 충돌이나 에러가 없을 것입니다.
4. 저는 스킨을 수정할 줄 알지 CSS를 정확히 모르므로 웹표준에 어긋나는 점이나 틀린 점 등이 있으면 댓글에  적어주시고 스킨을 만들 만큼이 실력은 안됩니다.

보험상품비교

BY GS보험샵