티스토리 사이드바 사용자 모듈 설정 방법

티스토리 사이드바 설정에서 "사용자 모듈"은 사용자가 직접 HTML, CSS, JavaScript 코드를 삽입하여 원하는 기능을 구현할 수 있는 기능입니다. 주로 광고 배너, 특정 링크 목록, SNS 연동 위젯 등 다양한 커스텀 요소를 추가할 때 활용됩니다.

 

 

티스토리 사아드바 사용자 모듈 설정 방법

다음은 티스토리 사이드바 사용자 모듈 설정 방법입니다.

 

가. 사이드바 설정 페이지 접속

☞ 티스토리 블로그 관리 페이지에 접속합니다.

☞ 왼쪽 메뉴에서 '꾸미기' 항목을 클릭합니다.

☞ 하위 메뉴 중 '사이드바'를 클릭합니다.

 

나. 사용자 모듈 추가

사이드바 설정 페이지에 접속하면 왼쪽에는 '사용 가능한 모듈' 목록이 있고, 오른쪽에는 '사이드바' 구성이 표시됩니다.

 

☞ '사용 가능한 모듈' 탭을 확인합니다.

 

☞ 목록에서 '[플러그인] HTML 배너출력' 또는 '[플러그인] 이미지 배너출력' 모듈을 찾아 해당 모듈 오른쪽의 '+' 버튼을 클릭합니다.

 

☞ HTML 배너출력

HTML, CSS, JavaScript 코드를 자유롭게 삽입하여 복잡한 위젯이나 광고를 만들 때 사용합니다.

 

☞ 이미지 배너출력

간단하게 이미지를 업로드하고 링크를 연결하여 배너를 만들 때 사용합니다.

 

☞ '+' 버튼을 클릭하면 해당 모듈이 오른쪽에 있는 '사이드바' 영역 (보통 '사이드바 1' 또는 '사이드바 2')으로 이동합니다. 드래그 앤 드롭으로도 이동 가능합니다.

 

다. 사용자 모듈 편집

사이드바에 추가된 사용자 모듈 (예: [플러그인] HTML 배너출력)의 '편집' 버튼을 클릭합니다.

 

1) HTML 배너출력 모듈 설정 방법

'HTML 배너출력' 편집 창에서는 아래와 같은 설정이 가능합니다.

 

☞ 모듈명

사이드바에 표시될 모듈의 이름을 입력합니다. (예: '나의 추천 링크', '블로그 공지사항', '광고')

 

☞ HTML 소스

이 부분이 핵심입니다. 여기에 원하는 HTML, CSS, JavaScript 코드를 입력합니다.

 

ⓐ HTML 예시 (간단한 텍스트 링크)

<p>환영합니다!</p>

<a href="https://example.com" target="_blank"> 나의 웹사이트 방문하기 </a>

 

ⓑ 이미지 배너 및 링크 예시

<a href="https://yourblog.tistory.com/category/Notice" target="_blank"> <img src="https://i.imgur.com/your_image.png" alt="공지사항 이미지" style="width:100%; height:auto;"> </a>

 

(여기서 src 속성에 이미지 URL을 입력해야 합니다. 티스토리 '스킨 편집' -> 'HTML/CSS 편집' -> '파일 업로드'를 통해 이미지를 업로드하고 해당 URL을 얻을 수 있습니다.)

 

ⓒ JavaScript 사용 시

<div id="myCustomWidget"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {const widget = document.getElementById('myCustomWidget'); widget.innerHTML = '<p> 안녕하세요! </p><button onclick="alert(\'버튼 클릭!\')"> 클릭해 보세요 </button>'; }); </script>

 

JavaScript 코드는 <script> 태그 안에 작성하며, DOMContentLoaded 이벤트 리스너를 사용하여 문서 로드 후 실행되도록 하는 것이 좋습니다.

 

☞ '확인' 버튼을 클릭하여 설정을 저장합니다.

 

2) 이미지 배너출력 모듈 설정 방법

'이미지 배너출력' 편집 창에서는 아래와 같은 설정이 가능합니다.

 

☞ 모듈명

사이드바에 표시될 모듈의 이름을 입력합니다.

 

☞ 이미지

'이미지 등록' 버튼을 클릭하여 블로그에 업로드된 이미지 또는 외부 이미지 URL을 선택/입력합니다.

 

☞ 링크

이미지를 클릭했을 때 이동할 URL을 입력합니다. (예: 블로그 카테고리, 외부 웹사이트 등)

 

☞ 대체 텍스트

이미지를 표시할 수 없을 때 대신 나타날 텍스트를 입력합니다. (웹 접근성 향상)

 

☞ 새 창으로 열기

체크하면 클릭 시 새 창에서 링크가 열립니다.

 

☞ '확인' 버튼을 클릭하여 설정을 저장합니다.

 

3) 사이드바 최종 저장

모든 사용자 모듈 설정을 마쳤다면, 사이드바 설정 페이지 하단의 '변경사항 저장' 버튼을 클릭해야 블로그에 실제 적용됩니다.

 

 

팁 및 유의사항

1) 미리 보기 활용

설정을 저장하기 전에 '미리 보기' 버튼을 클릭하여 블로그에 어떻게 표시되는지 확인하는 것이 좋습니다.

 

2) HTML/CSS/JS 지식

HTML 배너출력 모듈을 효과적으로 사용하려면 HTML, CSS, JavaScript에 대한 기본적인 이해가 필요합니다.

 

3) 플러그인 활성화

'HTML 배너출력'이나 '이미지 배너출력' 모듈이 보이지 않는다면, 티스토리 관리 페이지의 '플러그인' 메뉴에서 해당 플러그인을 활성화해야 합니다. (보통 '배너 출력' 또는 'HTML 배너' 등으로 표시됩니다.)

 

4) 코드 오류 확인

HTML/CSS/JavaScript 코드에 오류가 있으면 사이드바가 제대로 표시되지 않거나 블로그 레이아웃에 문제가 생길 수 있습니다. 간단한 코드부터 시작하여 점진적으로 추가하는 것을 권장합니다.

 

5) 반응형 디자인 고려

모바일 환경에서도 사이드바 모듈이 잘 보이도록 반응형 디자인을 고려하여 HTML/CSS를 작성하는 것이 좋습니다.

 

사용자 모듈을 통해 블로그를 더욱 개성 있고 유용하게 꾸밀 수 있으니, 다양한 시도를 해보시기 바랍니다.