[티스토리 스킨]사이드바 관리,배경
- 티스토리스킨수정/사이드바
- 2009. 7. 3. 09:00
블로그를 운영하자면 태그를 몰라도 되지만 알면 편하고 모르면 불편한 존재입니다.
내가 원하는대로 이것 저것 손보고 싶은데 알지못하고 누가 가르쳐주지도 않으니 답답한 노릇이죠^^.
여기서는 깔끔한 사이드바의 관리요령과 배경을 넣는 법과 자바스크립트 하나를 알아보겟습니다.
저의 경우 3단스킨을 사용하고 있어서 왼쪽 사이드바를 수정할것인지,오른쪽 사이드바를 수정할것인지 정해야겠죠. 대부분 사이드바에는 최신글,카테고리,최신댓글....이 있습니다.
먼저 아무거나 하나 찾아봅니다.
저의 경우 오른쪽에 최신글(New Post)이 있습니다.
new post로 검색을 해도되고 최신글로 검색을 해도 됩니다. 브라우져마다 편집-찾기 기능이 있지요.
이 방법이 아니면 스킨을 다운받아 업로드하신분이면 다운받아놓은 스킨에보면 skin.html이 있을겁니다.그걸 실행시켜보면 어느자리에 무엇이 위치해있는지 쉽게 알수 있죠.
여하튼 스킨편집에서 new post 를 검색합니다.
<s_sidebar.... 로 시작해서 </s_sidebar...로 끝나는부분이 사이드바의 최신글에 나타나는 곳입니다.
여기서부터 무슨 말인지 모르겠다 하시는분은 티스토리 스킨가이드 치환자 부분을 먼저 살펴보세요.
<s_sidebar_element> </s_sidebar_element> 부분을 필요없습니다.
나머지 아래 부분을 복사해서 사이드바에 링크나 위젯 어느것이나 동일한 모습의 효과를 볼수 있습니다.
리스트 형식으로 볼려면 <li> </li>사이에 넣으면 됩니다. 즉 <li> 다음에 <a href=.... 와 <span class.... 를 지우고 그곳에 쓰면 됩니다.
시작줄에
<li>원하는 태그나 위젯소스</li>
<li>또 소스</li>
형식이죠.
리스트 형식이 필요없으면 바로 <ul>부터해당되는곳을 지우시고 사용하면 됩니다.
<div id="recentPost">
<h3>New Post</h3>
나머지 삭제하고 여기다 소스를 넣으시고 사용하세요.
<//div>
이렇게 사용하면 됩니다.
html 이 뼈대이면 css는 꾸며주는거라고 생각하면 됩니다.
우선 위의 이미지에서 <h3>New Post</h3> 위에 보시면 div id="recentPost" 라고 아이디가 있습니다.
즉 recentpost 로 css 편집에서 검색을 합니다.
이건 사이드바 중에서도 #recentPost, #recentComment, #recentTrackback 부분만 따로 설정해 놓은겁니다. 즉 최신글에 올라오는 글에대한 설정을 해 놓은것입니다.
배경에 해당하는 부분은 이것이 아니라 아래 그림입니다.
저 위에서 <div id="recentPost"> <h3>New Post</h3> 라고 시작했죠. recentpost(최근글) h3 에 대한 배경은 bgRpost.gif 라고 지정해놨습니다.
이건 제 경우입니다. new post를 보시면 우측 상단에 서류 그림의 아이콘처럼 생긴것이 있습니다.이것을 지정한것입니다.
배경에 흰색을 넣든,검은색을 넣든 이부분을 스킨 편집에 파일업로드를 해서 적용하면 됩니다.
같은 이름으로 이미지를 저장후 업로드하면 수정할것도 없이 편하겠죠.
또 이런식도 있습니다.
3. 배경을 그냥 검은색으로 업로드하고 글씨를 쓰고 글씨에 효과를 넣는거죠.
제 블로그 오른쪽 사이드바에 보면 "매일 무료문자10건 공짜" 라고 있는 부분.한글로 쓴부분이 다 해당이 됩니다. 이 부분은 그냥 검은색 이미지를 업로드하고 글씨를 쓰고 css창에서 공통적으로 효과를 준겁니다.
클릭을 하면 글씨는 없고 애드찜 위젯만있죠. 글씨는 효과적용이 되있습니다.
이 부분은 따로 지정한것이 있습니다. 자 찾아봅시다.
사이드바에 공통적으로 해당되는 곳입니다.
우측 사이드바 h3에 해당하는곳은 글씨를 이탤릭체로 크기는 16으로 배경과 폰트색깔을 지정했습니다.
매일 무료문자 10건에 대한 소스는 아래와 같습니다.
즉 매일 무료문자는 #sidebarRight... 로 글씨의 배경과 스타일과 색깔을 적용하고 우측에 아이콘그림의 이미지는 #recentPost h3{ ... 이라는곳에 적용이 된겁니다.
이것만 알면 얼마든지 수정을 할수가 있지요.
쉽게 설명을 하려다보니 엄청 글이 길어졌습니다.
사이드바에 많은 위젯과 광고,글이 있으면 자리를 넘 많이 차지하죠. 이럴때 이 기능은 매우 유용합니다. 제 블로그에 무료문자에 해당하는것이 바로 자바스크립트를 이용한 것입니다.
티스토리에 있는 기능인 moss - less 기능입니다. 접었다 펼쳤다하는 기능이요. 이걸 사이드바에 적용해 봅니다.
자 설명들어갑니다.
이미지가 안보일경우 첨부파일을 참고하세요.
그럼 아래 이미지처럼 나오지요.
클릭했을경우
이걸 최신글,최신댓글등 모두 적용할수 있습니다. 단 최신글....의 경우 브라우져마다 작용유무가 다릅니다. 제가 해보니 크롬,파이어폭스는 되는데 정작 익스플로러는 클릭했을경우 펼쳐지지가 않더군요.
이부분은 아직 저도 숙제로 남아 있습니다.
사이드바에 공통적으로 꾸미는 방법을 알아봤습니다.
배경을 넣는법과 more less 자바스크립트까지.... 유용한 정보 있으면 또 공개하겠습니다.
간단한걸 자세히 설명하려다보니 너무 길어졌습니다. 글 실력이 없어서 그래요.^^
블로그에 써먹은 간단한 드롭다운메뉴
사이드바 링크관리팁
한줄 공지창 마퀴태그
내가 원하는대로 이것 저것 손보고 싶은데 알지못하고 누가 가르쳐주지도 않으니 답답한 노릇이죠^^.
여기서는 깔끔한 사이드바의 관리요령과 배경을 넣는 법과 자바스크립트 하나를 알아보겟습니다.
1. 사이드바에 공통적인 요소로 꾸미기.
자신의 사이드바에 적용된 css가 어떤건지 스킨-HTML/CSS 편집으로 갑니다.저의 경우 3단스킨을 사용하고 있어서 왼쪽 사이드바를 수정할것인지,오른쪽 사이드바를 수정할것인지 정해야겠죠. 대부분 사이드바에는 최신글,카테고리,최신댓글....이 있습니다.
먼저 아무거나 하나 찾아봅니다.
저의 경우 오른쪽에 최신글(New Post)이 있습니다.
new post로 검색을 해도되고 최신글로 검색을 해도 됩니다. 브라우져마다 편집-찾기 기능이 있지요.
이 방법이 아니면 스킨을 다운받아 업로드하신분이면 다운받아놓은 스킨에보면 skin.html이 있을겁니다.그걸 실행시켜보면 어느자리에 무엇이 위치해있는지 쉽게 알수 있죠.
여하튼 스킨편집에서 new post 를 검색합니다.
<s_sidebar.... 로 시작해서 </s_sidebar...로 끝나는부분이 사이드바의 최신글에 나타나는 곳입니다.
여기서부터 무슨 말인지 모르겠다 하시는분은 티스토리 스킨가이드 치환자 부분을 먼저 살펴보세요.
<s_sidebar_element> </s_sidebar_element> 부분을 필요없습니다.
나머지 아래 부분을 복사해서 사이드바에 링크나 위젯 어느것이나 동일한 모습의 효과를 볼수 있습니다.
리스트 형식으로 볼려면 <li> </li>사이에 넣으면 됩니다. 즉 <li> 다음에 <a href=.... 와 <span class.... 를 지우고 그곳에 쓰면 됩니다.
시작줄에
<li>원하는 태그나 위젯소스</li>
<li>또 소스</li>
형식이죠.
리스트 형식이 필요없으면 바로 <ul>부터해당되는곳을 지우시고 사용하면 됩니다.
<div id="recentPost">
<h3>New Post</h3>
나머지 삭제하고 여기다 소스를 넣으시고 사용하세요.
<//div>
이렇게 사용하면 됩니다.
2. 사이드바 특정구역에만 배경지정하기.
제 블로그의 경우를 이야기하겠습니다. 위의 이야기를 이어서 new post 부분에 배경을 넣고싶다.하면 css를 살펴봐야합니다.html 이 뼈대이면 css는 꾸며주는거라고 생각하면 됩니다.
우선 위의 이미지에서 <h3>New Post</h3> 위에 보시면 div id="recentPost" 라고 아이디가 있습니다.
즉 recentpost 로 css 편집에서 검색을 합니다.
이건 사이드바 중에서도 #recentPost, #recentComment, #recentTrackback 부분만 따로 설정해 놓은겁니다. 즉 최신글에 올라오는 글에대한 설정을 해 놓은것입니다.
배경에 해당하는 부분은 이것이 아니라 아래 그림입니다.
저 위에서 <div id="recentPost"> <h3>New Post</h3> 라고 시작했죠. recentpost(최근글) h3 에 대한 배경은 bgRpost.gif 라고 지정해놨습니다.
이건 제 경우입니다. new post를 보시면 우측 상단에 서류 그림의 아이콘처럼 생긴것이 있습니다.이것을 지정한것입니다.
배경에 흰색을 넣든,검은색을 넣든 이부분을 스킨 편집에 파일업로드를 해서 적용하면 됩니다.
같은 이름으로 이미지를 저장후 업로드하면 수정할것도 없이 편하겠죠.
또 이런식도 있습니다.
3. 배경을 그냥 검은색으로 업로드하고 글씨를 쓰고 글씨에 효과를 넣는거죠.
제 블로그 오른쪽 사이드바에 보면 "매일 무료문자10건 공짜" 라고 있는 부분.한글로 쓴부분이 다 해당이 됩니다. 이 부분은 그냥 검은색 이미지를 업로드하고 글씨를 쓰고 css창에서 공통적으로 효과를 준겁니다.
클릭을 하면 글씨는 없고 애드찜 위젯만있죠. 글씨는 효과적용이 되있습니다.
이 부분은 따로 지정한것이 있습니다. 자 찾아봅시다.
사이드바에 공통적으로 해당되는 곳입니다.
우측 사이드바 h3에 해당하는곳은 글씨를 이탤릭체로 크기는 16으로 배경과 폰트색깔을 지정했습니다.
매일 무료문자 10건에 대한 소스는 아래와 같습니다.
<div id="recentPost"> <h3>매일 무료문자10건 공짜></h3> 위젯소스 </div>
즉 매일 무료문자는 #sidebarRight... 로 글씨의 배경과 스타일과 색깔을 적용하고 우측에 아이콘그림의 이미지는 #recentPost h3{ ... 이라는곳에 적용이 된겁니다.
이것만 알면 얼마든지 수정을 할수가 있지요.
쉽게 설명을 하려다보니 엄청 글이 길어졌습니다.
4. 사이드바에서 접었다 폈다하는 기능.
아래에서 사용하는 () 는 <> 입니다. 색깔로 표시했습니다.참고하세요.사이드바에 많은 위젯과 광고,글이 있으면 자리를 넘 많이 차지하죠. 이럴때 이 기능은 매우 유용합니다. 제 블로그에 무료문자에 해당하는것이 바로 자바스크립트를 이용한 것입니다.
티스토리에 있는 기능인 moss - less 기능입니다. 접었다 펼쳤다하는 기능이요. 이걸 사이드바에 적용해 봅니다.
자 설명들어갑니다.
<div> <a href='javascript:void(0)'onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';> 여기에 보여지는 제목을 쓰면 됩니다.여기에 저는 매일 무료문자10건 공짜를 썼습니다. </a> <div style='display:none'>내용이 들어가는곳입니다.이곳에 무료문자 소스를 넣었습니다.</div>
moss-less.txt그럼 아래 이미지처럼 나오지요.
이걸 최신글,최신댓글등 모두 적용할수 있습니다. 단 최신글....의 경우 브라우져마다 작용유무가 다릅니다. 제가 해보니 크롬,파이어폭스는 되는데 정작 익스플로러는 클릭했을경우 펼쳐지지가 않더군요.
이부분은 아직 저도 숙제로 남아 있습니다.
사이드바에 공통적으로 꾸미는 방법을 알아봤습니다.
배경을 넣는법과 more less 자바스크립트까지.... 유용한 정보 있으면 또 공개하겠습니다.
간단한걸 자세히 설명하려다보니 너무 길어졌습니다. 글 실력이 없어서 그래요.^^
참고링크
상.하 이동 스크립트블로그에 써먹은 간단한 드롭다운메뉴
사이드바 링크관리팁
한줄 공지창 마퀴태그