티스토리 설정

1. 메뉴 설정

1) 콘텐츠

  • 콘텐츠 - 설정
  • 기본 저장 공개
  • 저작물 사용 허가 표시합니다 / 상업적 이용 비허용 / 콘텐츠 변경 비허용

2) 댓글.방명록

  • 댓글.방명록 - 설정
  • 방명록 작성 비허용

3) 수익

  • 구글 애드센스 계정 연동

4) 꾸미기

  • 꾸미기 - 스킨 변경
  • Book Club(북클럽) 적용

  • 꾸미기 - 사이드바
  • 전부 삭제  - 사이드바2에 카테고리 메뉴 남김

  • 꾸미기 - 메뉴
  • 홈만 남기고 저장

  • 꾸미기 - 모바일웹 설정
  • 티스토리 모바일웹 자동 연결 사용하지 않습니다.


  • 관리 - 주소 설정
  • 포스트 주소를 문자로 설정

2. 스킨 편집 

  • 꾸미기 - 스킨 변경 - html 편집 (북클럽 스킨 확인)
  • 변경 후 우측 상단 적용 버튼 클릭

1) 블로그명 글씨체 변경





  • html 편집 - CSS
  • 상단 코드 - Web Font Load 하단에 코드 추가
  • 하단 코드 - header h1 코드 내용 변경


2) 리스트 글씨 크기 변경

  • html 편집 - CSS
  • entry-content ul li / entry-conten ol li 검색
  • font-size: 1.125em; 추가

3) 작성자 삭제

  • html 편집 - HTML
  • article_rep_author 검색
  • 2번째 검색 결과 줄 통채로 삭제

4) 최상단 광고 넣기 (하면 안됨 티스토리 접속 제한 걸림)

  • html 편집 - HTML
  • </head> 섹션 바로 아래 애드센스 광고 코드 추가
  • 블로그 이름 위에 광고 삽입

3. 목차 만들기

1) 파일 업로드


2) HTML 코드 추가

  • html 편집 - HTML
  • <head>와 </head> 섹션 사이에 하단 코드 추가

---------------------------------------------------------------------------------------------------

<!-- auto toc start -->
<script src="./images/jquery.toc.min.js"></script>
<script>
  $(document).ready(function () {
    var $toc = $("#toc");
    $toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2" });
  });
</script>
<!-- auto toc end -->

---------------------------------------------------------------------------------------------------


3) CSS 코드 추가

  • html 편집 - CSS
  • 제일 하단에 아래 코드 추가

---------------------------------------------------------------------------------------------------

/* 목차 스타일 따뜻한 & 자연스러운 스타일 */
.adsensfarm_toc {
    position: relative;
    width: 100%;
    border: 1px solid #795548;
    padding: 10px 20px 0px 20px;
    background-color: #efebe9;
    z-index: 1;
}
.adsensfarm_toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #795548;
    border-bottom: 2px solid #795548;
}

#toc * {
    font-size: 18px;
    color: #795548 !important;
}
#toc a:hover {
    color: #5d4037;
}


.adsensfarm_toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}


#toc {
    padding: 0px 20px 0px 25px;
}


#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    padding: 0px 20px 0px 0px;
  margin-bottom: 10px;
    margin-top: 7px;
} 
#toc > li > a {
    text-decoration:none;
    font-weight: bold
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 5px;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0px;
    margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}
/* 목차 스타일 따뜻한 & 자연스러운 스타일 끝 */

---------------------------------------------------------------------------------------------------


4) 목차 서식 만들기

  • 콘텐치 - 서식 관리 - 서식쓰기
  • HTML 모드에서 하단 코드 입력

---------------------------------------------------------------------------------------------------

<div class="adsensfarm_toc" style="margin-top: 20px; margin-bottom: 30px;">
  <p data-ke-size="size18">목차</p>
  <ul id="toc"></ul>
</div>

---------------------------------------------------------------------------------------------------


4. 중간광고 서식 만들기

  • 콘텐츠 - 서식 관리 - 서식쓰기
  • HTML 모드에서 애드센스 광고 코드 입력
  • 애드센스 광고 코드 상하단에 <div>, </div> 입력

5. 주소 변경

  • 크롬 새탭 열기 - 북마크 저장 - 해당 북마크 수정
  • 링크 url 변경
  • 변경할 티스토리 주소 입력 (2곳), 연결된 도메인 주소 입력 (1곳)

---------------------------------------------------------------------------------------------------

javascript:(function(){document.querySelectorAll('a').forEach(link=>{if(link.href.includes("aaaa.tistory.com")){link.href=link.href.replace("aaaa.tistory.com","bbbb.com");}});alert("모든 링크가 도메인 주소로 변경되었습니다!");})();

---------------------------------------------------------------------------------------------------



6. 네이버 서치어드바이저, 구글 애널리틱스 연결

  • 도메인과 티스토리 연결 완료 된 후에 작업
  • 네이버 서치어드바이저, 구글 애널리틱스 연결 코드 받기
  • 꾸미기 - 스킨 편집 - html 편집 - HTML
  • <head>와 </head> 섹션 사이에 코드 추가

댓글

댓글 쓰기

이 블로그의 인기 게시물

정보 블로그 플랫폼별 프롬프트

블로그스팟 당신은 SEO에 능숙한 콘텐츠 마케터입니다. 블로그스팟(구글 검색)에 최적화된 객관적인 정보 글로 작성해 주세요. 1. 문체: 감정적인 표현을 최소화하고 객관적이고 전문적인 어조를 유지해 주세요. 2. 구조 및 논리: 정보의 논리적 흐름을 가장 중요하게 생각하여, 설명의 순서가 명확하게 이어지도록 정리해 주세요. 각 단락은 핵심 정보를 먼저 제시하는 두괄식 구조를 유지하고, 불필요한 군더더기 없이 핵심 정보 전달에 집중해 주세요. 3. 내용: 핵심 키워드를 서론과 본문에 걸쳐 자연스럽게 재배치하여 SEO 효과를 높여주세요. (키워드 반복에만 집중하지 않도록 주의해 주세요.) 공식 홈페이지가 있다면 1~2개 정도 자연스럽게 링크를 걸어주세요. 실제 정보를 검색해서 바탕으로 작성해주세요. 4. 분량: 전체 글 분량은 2,500자 이상으로 작성해 주세요 5. 제목 추천: 원본 내용과 핵심 키워드를 활용하여 구글 SEO에 가장 유리한 제목을 추천해 주세요. 제목에는 [메인 키워드]를 가장 앞부분에 명확하게 포함하고, 글의 내용을 포괄하는 [종합 가이드] 또는 [완벽 분석]과 같은 전문성을 강조하는 표현을 함께 사용해 주세요. 6. 결론: 결론 부분에 본문 내용을 간결하게 요약하고, 관련 정보에 대한 추가적인 검색을 유도하는 전문적인 마무리 문구를 추가해 주세요. 7. 키워드 해시태그: 글의 가장 마지막에 핵심 키워드 3~5개를 #을 사용하여 해시태그 형태로 넣어주세요. 네이버 당신은 네이버에서 인기 있는 전문 블로거입니다. 먼저 생성된 블로그스팟 마스터 콘텐츠를 가져와서, 다음 지침에 따라 네이버 검색에만 최적화된, 공감과 가독성이 높은 콘텐츠로 완전히 새롭게 재가공해 주세요. 대신 재가공 과정에서 단 하나의 내용도 누락되지 않아야 하며 핵심 의미가 변질되지 않도록 해주세요. 1. 유사 문서 방지 및 내용 재구성 (최우선): 정보의 정확한 전달을 위해 마스터 콘텐츠의 소제목 순서와 논리적 흐름은 변경하지 않고 그대로 유지해 주...
자세한 내용 보기