탕비수다 스킨, 썸네일 첫화면 새로 등록한 글 다르게 표현하기

땀똔님의 도움으로 탕비수다 스킨, 썸네일 첫화면 새로 등록한 새글을 다르게 표현해 봤다.


아래의 그림처럼, 


묘한오빠 블로그새로운 글이 등록되면  첫화면 썸네일에 번과 같이 글 하단에 파란색 띠가 표시되고 글을 등록한 시간이 하루가 지나면 와 같이 밑줄이 사라지도록 변경합니다.


이렇게 변경하려고 오랜시간 고민했는데... 땀똔님이 한방에 해결해 주셨습니다.


바쁜신데 불편하게 하여 드려 죄송하고 이 글을 통해 다시 한번 감사드립니다.





해당 날짜만 적용되는 방법 - 보기


작성일 날짜를 기준한 1일, 적용하는 방법 - 보기



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 19

*

*

    • 에구.. 아닙니다요.. ^^;;
      덕분에 탕비수다 스킨의 위대함을 맛볼 수 있었습니다.. @.@

    • 탕비수다 스킨이 수정하려면 생각보다 어렵더라구요. 그래도 땀똔님 덕분에 여러가지 수정할 수 있어 좋았습니다.
      앞으로도 잘 부탁드려요 ㅎㅎ

    • 저도 오랫만에 왔더니...바뀌었네요 스킨이..추카드립니다.
      연말부터 너무 바뻐서 좀 소홀했네요.

      늦었지만 새해 복많이 받으시고요 ㅋ

    • 스킨을 변경할 수 있었던 이유는 땀똔님 덕분이죠 ^^
      저는 중고로 산 자동차 덕분에 DIY하느라 집에서 잘 지냈습니다. ^^
      마눌님 눈치를 보기는 했지만 말이죠

    • 아... 오빠님 블로그에 한가지 문의 드려도 되나요?~~
      메인페이지에 각 포스팅의 제목이 두꺼운 글씨로 표기 되는데.. 그런 어떻게 해야 하나요?
      HTML편집을 찾아 보니 <b> </b> 가 글자를 두껍게 하는 표시던데 어느부분에 이걸 넣아야 할지 모르겠네요....

    • 탕비수다 스킨을 이번에 수정한거라 css파일을 열어 보시면

      08. Main Content 줄을 검색.
      .search-thumbs-wrap .grid-item .item-content-caption h2 를 찾으세요

      .search-thumbs-wrap .grid-item .item-content-caption h2 { font-size: 0.700em; line-height: 1.250em; font-weight: 700; margin-top: 5px; margin-bottom: 0; letter-spacing: .8px; overflow: hidden }
      /*수정: 원본 font-size: 1.125em; font-weight: 400; */

      font-size , font-weight 을 수정하시면 됩니다.

      참고로 저의 블로그는 소스보기가 항상되니 소스보기 하신 뒤, 찾고자 하는 것을 검색하시면 대충 아실거라고 생각해요 ^^

    • 항상 감사드립니다~ 덕분에 조금씩 블로그가 좋아지고 있습니다..^^

    • 수정하신 것보니... 글 목록 보기가 훨씬 좋아보이네요 ^^
      필요하실 때 말씀하세요.
      제가 아는 것이라면 언제든지 알려드릴께요.

    • 새글을 시각적으로 다르게 표시해서 이용자에게 알려주는거 좋은 생각 같습니다 ^^;;
      저는 왜 이런생각을 못했는지 ㅎㅎ...
      저도 코드 연습겸 만들어봤습니다~! 시각적으로는 땀똔님과 같아요~
      티스토리 작성일로 부터 1일 기준하여 썸네일에 새글

      # html : </s_index_article_rep> 바로 앞에 추가!
      <script>
      var reg_time = '[ ##_article_rep_date_## ]';
      var str = reg_time.replace(/[\.\ \:"]/gi, ",");
      var str_cut = str.split(',');
      var result_time = new Date(str_cut[0], str_cut[1], str_cut[2], str_cut[3], str_cut[4]).getTime();
      var now_time = new Date().getTime();

      if((result_time + 86400) > now_time) {
      $(".grid-item.flux:last").addClass("yg-abc");
      }
      </script>

      # CSS
      .yg-abc {
      border-bottom: 5px solid gold !important;
      }

    • 좋은 아이디어 주신것 감사드립니다. ^^

      86400은 초단위란걸 알겠는데
      (/[\.\ \:"]/gi, ","); 와
      e(str_cut[0], str_cut[1], str_cut[2], str_cut[3], str_cut[4]).는

      무슨 뜻인지..^^; 제가 이해할 수가 없어서요

      이왕 도움주시는 것, 설명 부탁 드려도 될까요?

    • 처음글을 보니 '[ ##_article_rep_date_## ]' 이 부분이 치환자이기 때문인지 제대로 입력이 되지 않았네요.
      변법으로 ([) 와 ( ]) 앞에 띄워쓰기를 해뒀습니다 실제로사용할때는 붙여써야 되고요 ^^;
      처음 글에도 변경해 두었습니다.

      <script>
      // 포스팅된 시간을 str 변수에 저장 ex) 2018.01.10 20:41
      var reg_time = '[ ##_article_rep_date_## ]';

      // str에 담긴 문자중 (.)(띄워쓰기)(:)를 (,)으로 변경
      // 변경후 str 변수에 담긴 내용은 2018,01,10,20,41
      var str = reg_time.replace(/[\.\ \:"]/gi, ",");

      // ,을 기준으로 잘라서 배열에 저장함
      var str_cut = str.split(',');

      // str_cut[0] = 2018
      // str_cut[1] = 01
      // str_cut[1] = 10.... 이런식으로 저장되어 있음
      // str 에 담긴 문자를 초로 변경
      var result_time = new Date(str_cut[0], str_cut[1], str_cut[2], str_cut[3], str_cut[4]).getTime();

      // 현재 시간을 초로 변경
      var now_time = new Date().getTime();


      // 하루 = 86400초
      // (포스팅한 시간 + 하루) 를 더한값과 현재시간을 비교했을때 (포스팅한 시간 + 하루)이 더 크다면 하루를 넘기지 않은것이므로 새글이 노출되야함
      // 방금 로드된 .grid-item.flux 을 찾아 yg-abc라는 클래스를 추가함
      if((result_time + 86400) > now_time) {
      $(".grid-item.flux:last").addClass("yg-abc");
      }
      </script>

    • 덕분에 새로운 방법을 알게 되었습니다.
      알려주신 방법은 정리하여 기록해 두어야겠습니다. 감사합니다.
      숨은 고수님들이 많아서 너~무 좋아요

    • 혹시 몰라 추가 댓글달아요
      저의 블로그에서는 모든 글에 밑줄이 생기네요 ^^;
      일단, 땀똔님 걸로 다시 교체했습니다

    • <script>
      var reg_time = '[ ##_article_rep_date_## ]';
      var str = reg_time.replace(/[\.\ \:"]/gi, ",");
      var str_cut = str.split(',');
      var result_time = new Date(str_cut[0], (str_cut[1] - 1), str_cut[2], str_cut[3], str_cut[4]).getTime();
      var now_time = new Date().getTime();

      if((result_time - now_time) / 1000 > -86400) {
      $(".grid-item.flux:last").addClass("yg-abc");
      }
      </script>

      어제는 미쳤었나봅니다 ㅡ_ㅡ;;; 이것이 맞습니다.

    • 나중에 적용해 보고 잘되는지 알려드릴께요 ^^

이전 글

다음 글