태터데스크에 최근에 업로드 된 글을 가리키는 새글 아이콘이 있으면 편할것 같아서 JavaScript를 이용해서 함 달았습니다.
사용자가 지정한 기간 이내 (아래 예에서는 3일) 에 포스팅된 글에 대해 새글 아이콘을 표시해 주도록 하였습니다. 다만, 치환자로 넘어오는 시간정보가 날짜단위이기 때문에 정확한 날짜 계산은 불가능 합니다.
참고로 치환자는 당일 작성한 포스티의 경우 시간이, 그 이전에 작성한 경우는 날짜만 넘어옵니다. 따라서, 정확한 시간단위로 기간을 설정하는 것은 어려울 듯 합니다.
1. 새글아이콘 준비
관리자 -> 스킨 -> HTML/CSS 편집 -> 파일업로드를 통해 스킨의 images 디렉토리에 원하는 아이콘을 업로드 한 후, 그 절대주소를 이용합니다. 절대주소의 디렉토리는 사용하고 있는 스킨에 포함된 이미지의 속성을 보면 알 수 있습니다.
( 본 블로그의 경우는 http://cfs.tistory.com/custom/blog/0/7605/skin/images/이미지이름 이 되는 군요. )
2. HTML 코드 추가
아래 코드를 태터데스크의 초기화면->테터데스크 설정하기->최신글 아이템의 설정 -> 아이템 HTML 수정 을 통해 삽입합니다. 이때, <s_list>와 </s-list> 사이에 삽입하여야 하고, 줄바꿈(엔터키)은 삭제하여 그냥 한 줄로 만들어 줍니다. 현재, 썸네일형 최신글에서만 테스트 해 보았으나, 다른 아이템에서도 정상 동작하리라 생각됩니다.
src = "위에서 준비한 new 아이콘의 주소 입력"
style = "display:block; float:left; margin:0; padding:0; margin-top:3px; margin-right:5px;"
/* display:block 이외의 스타일은 임의로 설정하면 됨 */
onload = "
basis = 3; /* 새글 기준 날짜 */
date1 = (new Date()).getTime() / 1000 / 86400; /* 오늘 날짜 */
date2 = Date.parse('[## _item_date_ ##]') / 1000 / 86400; /* 포스팅 날짜 */
/* _item_date_ 앞뒤 공백은 제거하세요 */
if (!isNaN(date2) && date1 - date2 > basis)
this.style.display = 'none';
"
/>
3. 확인해 보기
본 블로그에 적용된 결과를 확인해 보세요. http://www.crazybar.net
ps. 혹시 적용하시다가 잘 안되는 부분 있으시면 댓글로 남겨주세요.
---------- 추가내용 ----------
아이콘의 위치지정에 관해 문의하시는 분이 계셔서 내용 추가합니다.
위에 설명한 <img ~ /> 가 아이콘을 보여주는 부분이므로 이 부분을 <s_list>~</s_list> 에 넣어주면 되는데요. 이 부분은블로그마다 설정이 달라 일괄적으로 말할 수는 없습니다.
일반적으로, <s_list>~</s_list> 는 사진/제목/내용부분으로 나눠볼 수 있습니다. 이중에서 실제 제목에 해당하는 부분이 바로 [## _item_title ##] 라는 치환자로 되어 있고, 보통 링크를 위해 <a ~>[## _item_title ##]</a>의 형식으로 되어 있을 겁니다.
만약, 제목 바로 뒤에 아이콘을 넣고자 한다면 이 치환자 바로 뒤에 새글 아이콘을 삽입하면 됩니다.
참고로 본 블로그는, 제목 앞에 표시하기 위해 제목 치환자의 앞에 삽입했으며, 링크를 같이 보여주지 않기 위해 치환자를 감싸고 있는 <a~>~</a> 태그 앞쪽에 위치하고 있습니다.
<img ~ /><a href="[## _item_link_ ##]" ~ > [## _item_title ##] </a>
참고로, 위 소스가 본 블로그에 적용되어 있는 부분입니다.
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto (4) | 2008/10/31 |
|---|---|
| 태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) (34) | 2008/10/29 |
| 태터데스크에 새글 아이콘 달기 (17) | 2008/10/29 |
| 블로그 가치평가 by 블로그얌(Blogyam) (6) | 2008/10/28 |
| Exif 정보출력 - 카테고리, 태그 단위로 표시여부 제어하기 (2) | 2008/10/22 |
| Exif 정보출력 플러그인 - CSS로 제어하기 (2) | 2008/10/22 |
TRACKBACK http://www.crazybar.net/trackback/423
-
[tistory] 테터데스크에 "new" 아이콘 달기 삭제
2008/10/01 22:54TRACKBACK FROM < 삐딱한 냐옹이의 자투리 공간 >http://www.crazybar.net/423 여기에 가서 소스를 받은 다음, (오른쪽 클릭/drag 금지 이므로 화면 두 개 띄워놓고 열심히 따라치시오 ^^) 최신 목록 : 썸네일/텍스트... <--- 요 옆에 있는 설정을 누르고, 새로 뜬 화면에 있는 "아이템 설정 html"로 들어가서 <s_list>와 </s_list> 사이에 넣어주면 된다. ---------------------- 티스토리에 이미지를 업로드하면 images 디렉토리로 바로..
-
태터데스크 (첫페이지 만들기)에새글(new)아이콘을 달아봐습니다 삭제
2008/10/29 21:04TRACKBACK FROM 즐거운하루티스토리에 플로그인 기능중에 태터데스크 (첫페이지 만들기) 이라는 기능있습니다 카페나 웹사이트 처럼 새로운 글이 올라오면 new 나오면 좋게다는 생각을 했어는데요 찾아보니깐 있어요 ^^ 소개합니다 짜~짠~ 태터데스크 (첫페이지 만들기) 적용한 화면입니다 태터데스크 (첫페이지 만들기)기늘을 사용하시는 분이라면 사용해보시면 괜찮을것 같네요 사용방법과 태그는요 호아범 님 사이트에 가시면 됩니다요 간단히 사용방법을 안내하자면 아이템 HTML 수정 <s_li..
-
티스토리 절대경로 활용하기..(이미지호스트) 삭제
2009/03/24 17:07TRACKBACK FROM KIDORY 육아일기티스토리 절대경로를 활용한 이미지 호스트 대신하기. 머니야님의 포스트 무제한 트래픽 무료 이미지 호스팅 강추!소개! 를 본후 이미지 호스트라는 기능을 처음 알게 되었네요.. KIDORY블로그를 아시는 분들은 아시겠지만, 초보 블로거 인지라 이미지 호스트가 왜 필요한지조차 감으로만 느끼고 있습니다. 머니야님의 댓글로 티스토리 절대경로에 대해 문의 하셨는데요.. 댓글을 보고 나니 이미지 호스트에 조금씩 감이 잡히네요.. 굳이 머니야님께서 소개하신 인터넷..
-
테터데스크에 새글 아이콘 달기 삭제
2010/03/08 10:00TRACKBACK FROM ann, t뭔가 밋밋한 블로그 첫페이지에 새글 있다는 표시를 좀 해주고 싶었어요.. 사실 메뉴에 달고 싶은데..아직 그정도 능력자가 아닌 관계로..ㅋㅋ 검색에 검색을 거듭한 결과 http://www.crazybar.net/423 ↑ 호아범님의 글을 발견하였어요^^ 결과물은 ↑ 이렇구요.. <img src = "새글아이콘 주소" style = "display:block; float:left; margin:0; padding:0; margin-top:3px; ma..
댓글을 달아 주세요
이 소스가 아직도 동작하는 소스인가요? 전 제대로 안되던데 ㅠ 되면 좋을것 같아서요
2008/01/10 00:53 [ ADDR : EDIT/ DEL : REPLY ]네... 아직 동작하구요, 지금도 사용중입니다.
2008/01/10 10:17 [ ADDR : EDIT/ DEL ]포스팅에는 편의상 줄바꿈을 하였는데요, 입력하실때 onload에 해당되는 부분은 줄바꿈을 하시면 안됩니다.
해보시고 안되면 다시 문의 주세요...
혹시 이거 단위를 '시간'단위로 만들수는 없나요... 제 블로그 같은 경우는 업데이트가 빠른편이라 날짜로 설정해주면 거의다 잡혀버리는데요 ㅠ
2008/01/11 11:14 [ ADDR : EDIT/ DEL : REPLY ]일단 적용은 해 보셨나요?
2008/01/11 14:49 [ ADDR : EDIT/ DEL ]티스토리에서 날짜 정보가 넘어올때 당일 작성한 포스트는 시간만, 당일 이전에 작성한 글은 날짜만 넘어옵니다.
따라서, onload에 해당되는 부분을 적당히 잘 바꿔주면 님께서 원하시는 데로 어느 정도는 표현이 가능합니다.
아하
치환자가 먹혀있었네요 ~! 덕분에 잘 사용중이랍니다 
2008/01/11 20:32 [ ADDR : EDIT/ DEL : REPLY ]감사합니다... 잘 사용하겠습니다.
2008/10/01 22:51 [ ADDR : EDIT/ DEL : REPLY ]네... 허접한건데 도움이 되셨다면 다행입니다.
2008/10/02 00:53 [ ADDR : EDIT/ DEL ]엇 이거 제가 해볼려다 손놓고 있었던건데 감사합니다 ㅎㅎ 넙죽 잘 받아먹어도 되죠?;;
2008/10/22 01:37 [ ADDR : EDIT/ DEL : REPLY ]네... 그르세요.. ^^
2008/10/22 10:38 [ ADDR : EDIT/ DEL ]캬~좋은기능인데요 제 블로그에 적용해봐서요 ^^
2008/10/27 21:52 [ ADDR : EDIT/ DEL : REPLY ]네.. 감사합니다. ^^
2008/10/27 23:14 [ ADDR : EDIT/ DEL ]유피님의 질문에 대한 답변을 본문에 추가해 두었습니다.
2008/11/24 23:40 [ ADDR : EDIT/ DEL : REPLY ]질문: http://www.crazybar.net/guestbook#comment3619853
제 블로그의 절대경로랑은 수준이 다른 글인데요..^^;
2009/03/24 17:07 [ ADDR : EDIT/ DEL : REPLY ]잘봤습니다...
코드가 들어가면 어려워서 이해가..@_@
부끄럽지만 제 글도 걸고 갑니다~
아이구, 무슨 수준씩이나요... 부끄럽게스리.. ^^
2009/03/25 02:06 [ ADDR : EDIT/ DEL ]안그래도, 트랙백좀 달아주십사 말씀드릴까 하던 참인데, 감사합니다.
좋은 팁 너무나 감사합니다.
2009/07/26 14:01 [ ADDR : EDIT/ DEL : REPLY ]근데 일단
/* display:block 이외의 스타일은 임의로 설정하면 됨 */
/* _item_date_ 앞뒤 공백은 제거하세요 */
이 두줄은 넣을 필요가 없지요?
basis = 3; /* 새글 기준 날짜 */
date1 = (new Date()).getTime() / 1000 / 86400; /* 오늘 날짜 */
date2 = Date.parse('[ ## _item_date_ ## ]') / 1000 / 86400; /* 포스팅 날짜 */
이부분에서는 3일까지 새글 표시를 하라는것은 알겠는데
* 새글 기준 날짜 * * 오늘 날짜* * 포스팅 날짜 * 는 그냥 앞뒤 빈칸만 없애면 되는건가요?
3일전의 글도 다 새글 마크가 붙어 있는데..
좀 헷갈리네요.
<img src = "제 블로그 뉴 아이콘 절대 주소" style = "display:block; float:left; margin:0; padding:0; margin-top:3px; margin-right:5px;" onload="basis = 3 ; date1 = (new Date()).getTime() / 1000 / 86400; date2 = ('[ ## _item_date_ ## ]') / 1000 / 86400; if (!isNaN(date2) && date1 - date2 > basis) this.style.display = 'none';"/>
확인해 봐 주시면 너무나 감사하겠습니다.
감사합니다
/* 로 시작해서 */ 로 끝나는 내용은 주석입니다.
2009/07/27 16:58 [ ADDR : EDIT/ DEL ]설명이므로 넣어도 되고 그렇지 않아도 됩니다.
위 스크립트가 동작하는 방식을 좀 이해하시면 편하실듯 합니다.
기본적으로 모든 글에 새글 아이콘이 달립니다. 기본적으로 달려는 있으나 화면에 보이지 않는 상태입니다.
그중에서 해당 시간에 속하는 글들의 새글아이콘만 화면에 보여지는 상태로 바뀌는 거죠.
제 설명이 도움이 되셨는지요?
좋은 팁 가져갑니다..트랙백 걸었어요..ㅋㅋ
2010/03/08 10:02 [ ADDR : EDIT/ DEL : REPLY ]저도 능력자가 되고싶다는..ㅎㅎ