← 메인으로 돌아가기
위젯 활용법 & 설치 가이드: 블로그용 D-day 위젯 완벽 가이드
D-day 위젯은 블로그나 웹사이트에 삽입하여 목표일까지 며칠 남았는지 실시간으로 표시할 수 있는
무료 위젯입니다. 이 가이드에서는 다양한 플랫폼에서 위젯을 설치하고 활용하는 방법을 상세히 안내합니다.
1. 위젯이란 무엇인가요?
D-day 위젯은 작은 HTML 코드 조각으로, 다른 웹사이트에 삽입하면 해당 페이지에
D-day 카운트다운이 표시됩니다. 위젯은 매일 자동으로 업데이트되어 정확한 남은 일수를 보여주며,
사용자가 직접 관리할 필요가 없습니다.
위젯의 장점
- 자동 업데이트: 매일 자동으로 남은 일수가 업데이트됩니다
- 반응형 디자인: 다양한 화면 크기에 자동으로 적응합니다
- 아름다운 디자인: 그라데이션 배경과 깔끔한 레이아웃
- 커스터마이징: 제목과 날짜를 자유롭게 설정 가능
- 완전 무료: 회원가입이나 결제 없이 무료로 사용 가능
2. 위젯 코드 생성하기
위젯을 사용하기 전에 먼저 위젯 코드를 생성해야 합니다.
메인 페이지의 "블로그용 위젯 코드 생성" 섹션에서 다음 단계를 따라하세요:
- 위젯에 표시할 날짜 선택: 목표일을 선택합니다 (예: 2025-12-25)
- 위젯 제목 입력: 위젯 상단에 표시될 제목을 입력합니다 (예: "시험일까지", "생일까지")
- 위젯 코드 생성 버튼 클릭: HTML 코드가 생성됩니다
- 코드 복사: 생성된 코드를 복사합니다
생성된 코드는 다음과 같은 형태입니다:
<iframe src="https://ashlight.store/widget.html?date=2025-12-25&title=시험일까지"
width="300"
height="150"
frameborder="0"
scrolling="no">
</iframe>
3. 플랫폼별 설치 방법
네이버 블로그
- 블로그 관리 → 꾸미기 → 사이드바 설정으로 이동합니다
- HTML/JavaScript 위젯을 추가합니다
- 생성한 위젯 코드를 붙여넣습니다
- 저장하고 확인합니다
네이버 블로그 팁
네이버 블로그에서는 사이드바뿐만 아니라 본문에도 위젯을 삽입할 수 있습니다.
글쓰기 모드에서 HTML 편집으로 전환한 후 위젯 코드를 삽입하세요.
티스토리
- 관리 → 꾸미기 → 사이드바로 이동합니다
- HTML/JavaScript 모듈을 추가합니다
- 생성한 위젯 코드를 붙여넣습니다
- 저장하고 확인합니다
워드프레스
- 관리자 페이지 → 위젯으로 이동합니다
- HTML 위젯을 추가합니다
- 생성한 위젯 코드를 붙여넣습니다
- 저장하고 확인합니다
워드프레스 고급 사용법
워드프레스에서는 단축코드(shortcode)를 만들어 사용할 수도 있습니다.
functions.php에 단축코드를 등록하면 더 편리하게 사용할 수 있습니다.
자체 웹사이트
- HTML 소스 코드를 엽니다
- 위젯을 표시하고 싶은 위치를 찾습니다
- 생성한 위젯 코드를 붙여넣습니다
- 저장하고 확인합니다
4. 위젯 크기 조정하기
위젯의 크기는 iframe의 width와 height 속성으로 조정할 수 있습니다.
다양한 크기 옵션을 제공합니다:
- 작은 위젯: width="250" height="120" - 사이드바에 적합
- 중간 위젯: width="300" height="150" - 기본 크기, 가장 많이 사용
- 큰 위젯: width="400" height="200" - 본문에 강조 표시
- 반응형 위젯: width="100%" - 컨테이너 너비에 맞춤
<!-- 작은 위젯 -->
<iframe src="https://ashlight.store/widget.html?date=2025-12-25&title=시험일까지"
width="250"
height="120"
frameborder="0"
scrolling="no">
</iframe>
<!-- 반응형 위젯 -->
<div style="max-width: 400px; margin: 0 auto;">
<iframe src="https://ashlight.store/widget.html?date=2025-12-25&title=시험일까지"
width="100%"
height="150"
frameborder="0"
scrolling="no">
</iframe>
</div>
5. 위젯 활용 사례
학생 블로그
수능일, 시험일까지의 D-day를 블로그에 표시하여 동기부여를 받고,
방문자들에게도 목표를 공유할 수 있습니다.
개인 블로그
생일, 기념일, 여행일까지의 카운트다운을 표시하여 특별한 날을 기다리는
설렘을 표현할 수 있습니다.
비즈니스 웹사이트
프로젝트 마감일, 이벤트 개최일, 제품 출시일 등을 표시하여
고객들에게 중요한 일정을 알릴 수 있습니다.
6. 문제 해결
위젯이 표시되지 않는 경우
- HTML 코드가 올바르게 복사되었는지 확인하세요
- 날짜 형식이 YYYY-MM-DD인지 확인하세요
- 웹사이트가 iframe 사용을 허용하는지 확인하세요
- 브라우저 콘솔에서 오류 메시지를 확인하세요
위젯 크기가 맞지 않는 경우
- width와 height 값을 조정하세요
- 반응형 디자인을 원하면 width="100%"를 사용하세요
- 컨테이너의 최대 너비를 CSS로 제한하세요
지금 바로 위젯을 만들어보세요
D-day 위젯을 생성하고 블로그에 설치해 보세요.
위젯 코드 생성하기