728x90
반응형
개요
- 티스토리 블로그 글쓰기를 할 때 사용자 마음대로 원하는 기능을 만들 수 있는 방법은 html 편집과 자바스크립트를 직접 컨트롤한다면 가능합니다.
- 해당 글은 직접 자바스크립트 파일을 만들고 티스토리에 파일을 업로드하고 업로드한 파일을 호출해서 기능 호출이 되는지 테스트할 수 있도록 버튼을 만들어 보겠습니다.
- 블로그를 관리하시는 분들에게 강력하게 추천드립니다.
버튼을 클릭하면 입력 박스에 문구가 입력되는 간단한 기능을 만들어 보겠습니다.
1) js 파일 만들기
- 하단에 javascript 소스로 'genie_test.js' 파일을 만들었습니다.
- 단순하게 소스를 메모장에 붙여 넣고 저장할 때 확장자명을. js로 만들었습니다.
- 파일을 다운로드 받아서 사용하셔도 상관없습니다.
document.addEventListener('DOMContentLoaded', function() {
const genieButton = document.getElementById("genie_text_input_button");
genieButton.addEventListener('click', function() {
const targetEl = document.getElementById("genie_target");
targetEl.value = "티스토리 자바스크립트 호출 테스트";
});
});
2) js 파일 업로드
- [티스토리 관리자] - [스킨 편집] - [html편집] - 상단 [파일업로드] 탭 선택
- 하단에 [추가] 버튼을 눌러서 위에서 만든 ' genie_test.js' 파일을 추가합니다.
3) html 편집하기
- <head> ~ </head> 태그 사이에 <script src="./images/genie_test.js"></script>를 입력합니다. (업로드한 파일명 입력)
4) 티스토리 글쓰기
- 티스토리 글쓰기 들어가셔서 HTML 작성 모드로 변경해 주세요.
- '테스트 클릭 해보기'를 클릭할 수 있도록 만들고 하단에 빈 입력 박스를 만들었습니다.
<h2 id="genie_text_input_button" style="color: red; font-weight: bold; border: 2px solid red; text-align: center; cursor: pointer;">테스트 클릭해보기</h2>
<input id="genie_target" style="border: 1px solid #000; width: 100%; font-size: x-large;" type="text" />
4) 테스트 해보기
- '테스트 클릭해보기'를 클릭해 보세요.
- 하단 입력 박스에 문구가 자동으로 입력됩니다.
- 티스토리 앱에서는 동작하지 않습니다. 크롬이나 다른 브라우저로 확인하세요~
테스트 클릭해보기
티스토리 이미지 alt 태그 넣기 (SEO 최적화)
빙 웹마스터도구에서 티스토리 글을 검색 등록할 때 흔히 볼 수 있는 문제인 이미지 alt 태그 넣는 방법에 대해 알려드리겠습니다. alt 태그 누락 경고를 해결하면 티스토리 SEO 최적화 (Search Engine
spirit0833.tistory.com
티스토리 빙 검색 등록하기 (빙 웹마스터도구)
티스토리 글을 빙 검색엔진에 노출시키기 위해서는 빙 웹마스터도구에 검색 등록을 해야 합니다.티스토리 사이트를 빙 웹마스터도구에 등록하는 방법에 대해 순서대로 알려 드리겠습니다.빙
spirit0833.tistory.com
티스토리 구글 애널리틱스 데이터 안보일 때 해결 방법
티스토리와 구글 애널리틱스 연결 완료 했는데 데이터가 나오지 않는 경우?아직 웹사이트에서 받은 데이터가 없습니다.웹사이트에서 데이터 수집이 활성화되어 있지 않습니다. 태그를 설치한
spirit0833.tistory.com
728x90
반응형
728x90
반응형
'잡동사니 > 블로그 관리 TIP' 카테고리의 다른 글
| [티스토리 블로그] 네이버 Indexnow 키 생성하기 (114) | 2024.09.29 |
|---|---|
| 티스토리 스킨 스크롤 헤더 고정, 사이드바 메뉴 고정 (148) | 2024.09.28 |
| 티스토리 이미지 alt 태그 넣기 (SEO 최적화) (124) | 2024.09.27 |
| 티스토리 빙 검색 등록하기 (빙 웹마스터도구) (213) | 2024.09.23 |
| 티스토리 글쓰기 TIP - 이전 발행 글 넣기 + 썸네일 나오는 방법 (113) | 2024.09.19 |