[Tistory] 티스토리 사이드바 꾸미기 🎨 (커스텀 배너/위젯 추가하기 + 코드 공유)

최근에 블로그 사이드바가 너무 밋밋하다는 생각이 들었다. 방문자수 카운터랑 카테고리 메뉴만 덩그러니 있으니까... 뭔가 감성 있는 위젯 하나쯤은 만들고 싶었다.
그래서 이번엔 티스토리 HTML 배너출력 플러그인을 활용해서 미니멀 시계 위젯, 명언 위젯, 레트로 시계 위젯을 사이드바에 추가하는 방법을 정리해 봤다. 코딩 없어도 복붙으로 충분히 가능하니까 레츠꼬 🎨

 

---

 

1. 티스토리 사이드바 커스텀 기능

티스토리는 사이드바 모듈을 드래그 앤 드롭으로 자유롭게 배치할 수 있는 기능을 제공한다. 기본 모듈(최근댓글, 태그, 방문자수 등) 외에도 플러그인 기반 모듈을 추가해서 원하는 HTML을 자유롭게 삽입할 수 있다.

그 핵심이 바로 [플러그인] HTML 배너출력이다. 이 플러그인을 활성화하면 사이드바에 임의의 HTML/CSS/JavaScript 코드를 넣을 수 있어서 커스텀 위젯을 자유롭게 만들어 넣을 수 있다.

 

짜잔. 레트로 느낌의 시계 위젯을 추가한 모습.

 

 

2. HTML 배너출력 플러그인 활성화하기

위젯을 사이드바에 넣으려면 먼저 배너 출력 플러그인을 활성화해야 한다. 이 플러그인이 있어야 사이드바에 HTML 모듈을 추가할 수 있기 때문이다.

 

① 플러그인 메뉴 진입

티스토리 관리자 페이지 좌측 메뉴에서 플러그인을 클릭한다.

티스토리 관리자 플러그인 목록 화면

 

 

② 배너 출력 플러그인 클릭 후 적용

플러그인 목록에서 배너 출력을 찾아 클릭하면 미리보기 팝업이 뜬다. 하단의 적용 버튼을 눌러주면 플러그인 활성화가 완료된다.

배너 출력 플러그인 추가

 

 

3. 사이드바에 HTML 배너 모듈 추가하기

플러그인을 활성화했으면 이제 사이드바에 모듈을 배치할 차례다. 

 

① 사이드바 설정으로 이동

관리자 → 꾸미기 → 사이드바 메뉴로 진입한다. 화면 왼쪽에 추가 가능한 기본 모듈 목록이 있고, 오른쪽에 현재 사이드바에 배치된 모듈들이 보인다.

사이드바 설정 화면

 

 

② HTML 배너출력 모듈을 사이드바로 드래그

기본 모듈 영역에 생긴 [플러그인] HTML 배너출력 항목을 오른쪽 사이드바2 영역으로 추가해 준다. 사이드바로 옮기고 나면 해당 모듈 오른쪽에 편집 버튼이 생긴다. 이 버튼을 눌러서 추가하고 싶은 위젯 이름과 HTML 코드를 입력하면 된다. 

HTML 배너출력 모듈 추가

 

 

4. (예시 1) 미니멀 시계 위젯 추가하기 + 코드 공유

첫 번째 위젯은 미니멀 시계 위젯이다. 날짜, 요일, 시간, 그리고 초가 진행되는 얇은 바까지 표시되는 깔끔한 화이트 계열 시계다. 

 

편집 버튼을 눌러 팝업을 열고 아래처럼 입력한다.

이름: 시계 위젯

HTML 소스: 아래 첨부파일(시계_위젯.txt)을 열어서 전체 복사(Ctrl+A → Ctrl+C) 후 붙여넣기

시계 위젯 추가 화면

 

 

📎 시계_위젯.txt 첨부파일 다운로드

시계 위젯.txt

0.00MB

 

 

코드를 붙여넣고 확인을 누르면 모듈이 등록된다. 미리보기에서 확인하면 아래처럼 날짜와 시간이 실시간으로 표시되는 위젯을 볼 수 있다.

사이드바에 미니멀 시계 위젯이 추가된 모습

 

 

시간 아래에 얇은 진행바가 초 단위로 채워지는 게 포인트다. 블로그 전체 톤이 밝고 미니멀한 스타일이라면 이런 스타일이 잘 어울린다 ㅎㅎ

 

 

5. (예시 2) 명언 위젯 추가하기 + 코드 공유

두 번째 위젯은 명언 위젯이다. 사이드바에 "오늘의 한 마디"라는 라벨과 함께 명언이 하나씩 표시되고, 9초마다 자동으로 다음 명언으로 넘어간다. 오른쪽 화살표(›) 버튼을 눌러 수동으로 넘길 수도 있고, 하단 점(dot) 내비게이터로 특정 명언으로 바로 이동도 가능하다.

 

기본으로 제공되는 명언은 5개인데, 코드 안의 quotes 배열에서 원하는 문장으로 자유롭게 수정할 수 있다. 본인이 좋아하는 명언, 좋아하는 책 구절 같은 걸로 교체해도 된다.

 

편집 버튼을 눌러 팝업을 열고 아래처럼 입력한다.

이름: 명언 위젯

HTML 소스: 아래 첨부파일(명언_위젯.txt)을 열어서 전체 복사 후 붙여넣기

명언 위젯 추가 화면

 

 

📎 명언_위젯.txt 첨부파일 다운로드

명언 위젯.txt

0.00MB

 

 

확인을 누르고 미리보기를 확인하면 아래처럼 명언이 깔끔하게 표시되는 걸 볼 수 있다.

사이드바에 명언 위젯이 추가된 모습

 

 

미니멀 시계 위젯과 명언 위젯을 둘 다 넣으면 사이드바가 아래처럼 구성된다. 시계 + 명언 조합이 꽤 깔끔하게 어울린다.

시계 위젯과 명언 위젯이 추가된 모습

 

 

6. (예시 3) 레트로 시계 위젯 추가하기 + 코드 공유

세 번째 위젯은 레트로 시계 위젯이다. 빈티지 전광판 스타일의 케이스에 시:분:초가 모두 표시되고, 콜론(:)이 1초마다 깜빡이는 애니메이션도 들어가 있다. 날짜와 요일도 하단에 함께 표시된다. 이 위젯도 동일하게 html 코드만 입력하면 된다.

 

📎 레트로_시계_위젯.txt 첨부파일

레트로 시계 위젯.txt

0.00MB

 

레트로 시계 위젯

 

이런식으로 내가 넣고싶은 배너나 위젯이 있다면 html로 만들어서 코드만 붙여넣으면 된다. 넘 간단해서 별거 없지만.. 개인적으로 블로그 꾸미는 거 좋아하는 사람들은 꽤나 유용하게 활용할 수 있을 것 같다. 이상으로 사이드바 꾸미기 끝 🎨