블로그(티스토리) 타이틀 옆에 실시간 시계 넣기 (요일·오전/오후)

블로그 타이틀 옆에 시간이 나오면 좋겠다고 생각했다.

 

스킨 HTML은 손대지 않고, 헤더의 .title-logo 옆에 현재 시간을 붙였습니다.
요일·오전/오후·분·초까지 표시하고, 숫자 폭을 tabular-nums로 맞춰 흐트러짐을 줄였습니다.
아래 CSS/JS만 추가하면 바로 적용됩니다. 

• HTML 수정 없이 CSS/JS만으로 동작
• 요일 (토) 포함, 오전/오후 표기
• 숫자 폭 균일: font-variant-numeric: tabular-nums
• 제목과 베이스라인 정렬: .link_logo{ align-items: baseline }

※ 이 코드는 Odyssey 스킨에서 확인했습니다. 다른 스킨은 타이틀 선택자만 자신의 스킨 구조에 맞게 바꿔 주세요. 

 

 

추가하는 방법 

1. html에 추가  </body> 바로전에 스크립트 추가  

스킨의 html 부분 제일 마지막 </body> 바로전에 스크립트 추가

 

 

script 복사용 코드 - html에 추가  </body> 바로전에 스크립트 추가  

<!-- 시간 -->
    <script>
    (()=> {
      const h1 = document.querySelector('.title-logo');
      const a  = h1 && h1.querySelector('.link_logo');
      if(!a || h1.querySelector('.nowtime')) return;
 
      const span = document.createElement('span');
      span.className = 'nowtime';
      h1.appendChild(span);            
 
      const z = n => n<10 ? '0'+n : ''+n;
 
      function fmt(){
        const d=new Date();
        const y=d.getFullYear(), m=d.getMonth()+1, day=d.getDate();
        const w=['일','월','화','수','목','금','토'][d.getDay()];
        let h=d.getHours(), ap='오전'; if(h>=12){ap='오후'; if(h>12) h-=12;}
        return `${y}년 ${m}월 ${day}일 (${w}) - ${ap} ${h}시 ${z(d.getMinutes())}분 ${z(d.getSeconds())}초`;
      }
 
      function tick(){
        span.textContent = fmt();
        setTimeout(tick, 1000 - (Date.now()%1000));
      }
      tick();
    })();
    </script>
<!-- 시간 끝-->

 

 

2. 스킨의 css 부분 제일 마지막에 추가

스킨의 css 부분 제일 마지막에 추가

 

 

css 복사용 코드 - 스킨의 css 부분 제일 마지막에 추가

/* 타이틀 줄: 가로 일렬 + 왼쪽 정렬(스킨이 바꿔치기해도 유지) */
.inner-header .title-logo{
  display:flex;
  flex-direction:row !important;
  justify-content:flex-start !important;
  align-items:center;
}
 
/* 링크와 시계의 기준선이 자연스레 맞도록 */
.inner-header .title-logo .link_logo{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}
 
/* 시계(최종) — 중복 통합 */
.inner-header .title-logo .nowtime{
  margin-left:12px;
  font-size:14px;
  letter-spacing:0.1px;
  color:#6c8381;
  opacity:.9;
  font-weight:400;
  font-variant-numeric:tabular-nums; /* 숫자폭 일정 */
}
 
/* 파이프 구분자 */
.inner-header .title-logo .nowtime::before{
  content:" | ";
  opacity:.45;
  margin-right:8px;
}

 

 

3. 적용후 확인!

완성후 블로그 타이틀 옆에 시간이 출력된다.

 

 

 

 

 

 

 

 

 

 

 

코드 자유 사용, 출처 표기해주심 감사합니다.