본문 바로가기
SNS관리/티스토리

티스토리 스킨 변경 시 html 코드

by daying 2023. 7. 2.
반응형

티스토리에는 티스토리에서 자체적으로 제공하는 무료 스킨들이 있습니다.

네이버 블로그와 다르게 html기반이지만 html을 잘 모르는 사람도 무료 스킨을 이용하여 블로그를 꾸밀 수 있습니다.

하지만 현재 사용 중인 스킨을 다른 스킨으로 변경을 할 때는 기존에 직접 추가한 html코드가 사라지기 때문에 티스토리 스킨 변경 시 주의가 필요합니다.

 

티스토리 스킨을 변경할때는 기존에 사용 중인 스킨에 있는 직접 추가한 html코드를 어딘가에 복사해 놓은 후 변경을 하는 게 좋습니다.

이 작업을 하지 않고 스킨을 변경하면 머리가 아플 수 있기 때문에 필히 하는 게 좋습니다.

 

티스토리 스킨 변경 방법

 

1. 티스토리 로그인 후 꾸미기 → 스킨 편집을 눌러주세요.

스킨 편집

2. 스킨 편집 화면에 있는 [html편집]을 눌러주세요.

html편집

3. HTML편집 화면에서 head와 head사이에 있는 본인이 직접 추가한 코드를 메모장에 붙여 넣기 합니다.

기존에 사용하던 스킨에서 새로운 스킨으로 변경을 하게 되면 직접 적용한 코드가 사라집니다.

그렇기 때문에 스킨 변경 전 혹시 모를 상황을 대비하여 메모장에 직접넣은 코드는 복사를 해놓는 게 좋습니다.

직접 넣은 코드가 다 사라졌을때 각 사이트에 가서 다시 코드를 복사하여 넣으면 번거롭기 때문에 이 작업을 해주는 게 좋습니다.

반응형

아마 보통 저처럼 head 바로 밑에 애드센스나 네이버 웹마스터도구 코드를 넣었을 것입니다.

직접 넣은 코드는 어렵지 않게 찾으실 수 있을거에요.

html코드 메모장 복사

4. 메모장에 직접 추가한 html코드를 붙여 넣기 한 후 이번에는 스킨 변경을 눌러주세요.

스킨 변경

5. #1과 #2중 고민을 하다가 저는 #1으로 변경을 했습니다.

스킨 위에 마우스를 가져다 대면 미리 보기 및 적용을 할 수 있습니다.

변경 스킨 선택

적용을 누르면 아래와 같은 팝업이 뜹니다.

확인을 눌러주세요.

스킨 변경 팝업

사용 중인 스킨이 #1으로 정상적으로 변경이 됐습니다.

스킨 변경 완료

6. 다시 [스킨 편집 → html편집]으로 갑니다.

스킨을 변경했기 때문에 기존 스킨에 있던 직접 넣은 html 코드가 전부 사라졌습니다.

이제 메모장에 붙여 넣은 직접 넣은 html코드를 head 바로 아래에 붙여 넣은 후 '적용'을 누릅니다.

html코드 복사 완료

애드센스 목록 상단 광고 & 목록 하단 광고 치환자 추가 방법

 

적용 완료 후 확인을 해보니 애드센스 목록 상단 광고와 목록 하단 광고가 안나와서 치환자를 추가했습니다.

애드센스 광고

애드센스 목록 상단 광고와 목록 하단 광고가 뜨지 않는다면 치환자를 직접 스킨 html 편집 화면에서 추가해야 합니다.

애드센스 목록 상단 하단 치환자

스킨 편집 → html 편집 화면으로 가 편집창 아무곳이나 마우스로 한번 클릭한 후 찾기(ctrl+F)를 눌러주세요.

검색창에 s_list를 검색하여 찾아주세요.

html 검색창

s_list 바로 아래에 애드센스 목록상단광고 치환자를 복사한 후 붙여넣어주세요.

애드센스 목록상단광고 치환자

다음은 애드센스 목록하단광고 치환자 넣는 방법입니다.

찾기(ctrl+F) 검색창에 </s_paging를 검색한 후 바로 아래에 애드센스 목록하단광고 치환자를 넣어준 후 [적용]을 누릅니다.

애드센스 목록하단광고 치환자

html적용이 완료되었다면 이제 애드센스 광고 설정 화면으로 간 후 목록 상단, 목록 하단 광고에 체크를 합니다.

애드센스 광고 설정

이제 #1 스킨에서 애드센스 목록 상단과 목록 하단 광고가 노출됩니다.

* #1 스킨 애드센스 목록 상단 광고 노출

애드센스 목록 상단 광고 노출

* #1 스킨 애드센스 목록 하단 광고 노출

애드센스 목록 하단 광고 노출

참고로 티스토리에서 제공하는 스킨 중 목록 광고를 지원하는 스킨은  총 7개입니다.

목록광고를 지원하는 스킨은 [꾸미기 → 스킨변경]에서 확인해볼 수 있습니다.

목록광고 지원 스킨

 

반응형

댓글