미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동

티스토리 측에서 블로그 상단 또는 하단에 랜덤으로 광고를 추가해서 상단 광고가 연속으로 배치되는 것이 싫어서 상단광고 2개를 블로그 포스팅 제목 위로 이동 시켰습니다.

 

광고 수익을 발생시켜야 되는 블로거나 블로그을 방문하시는 방문자 입장에서 상단에 광고가 연속으로 배치되어 있으면 보기 싫은 것은 사실입니다.

 

그래서 티스토리 측에서 추가하는 광고와 조금이라도 거리를 둘 수 있도록 배치 할 수 있는 방법을 고민하다가 제목 위로 상단광고를 이동시켰습니다.

 

미넴스킨을 사용하시는 분중에서 저와 같은 생각을 하시는 분이 있을지 몰라서 상단광고 2개를 블로그 포스팅 제목 위로 이동시키는 방법을 포스팅합니다.

 

참고로 현재 제가 사용하고 미넴스킨은 무료로 사용이 가능하며 다운로드 및 여러 가지 기능을 사용하는 방법은 미넴스킨 제작자 블로그를 참고하시면 됩니다.

 

 

 

 

미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동

 

아래의 이미지는 미넴스킨 상단광고 2개를 블로그 포스팅 제목 위로 이동시키기 전후의 이미지입니다. 상단광고 2개의 위치를 변경하고 점검해 보면 티스토리 광고가 상단에 붙더라도 블로그 포스팅 제목과 목차로 인해서 떨어져 보이는 효과가 있습니다.

 

미넴스킨 상단광고 2개 블로그 포스팅 제목위로 이동 전<좌측>과 이동 후<우측>

 

아래에서 설명하는 내용이 복잡하고 어렵게 보일 수 있지만 HTML 편집에서 상단광고에 해당하는 코드만 찾아서 제목을 출력하는 코드 위로 이동시키는 매우 간단한 작업입니다.

 

 

 

미넴스킨 상단광고 2개 이동하기 전 코드 찾기

 

티스토리 관리 페이지 좌측 메뉴에서 [꾸미기] - [스킨 편집]을 선택하면 새로운 창이 열리게 되고, 우측 상단을 보시면 [HTML 편집]이라는 버튼이 있습니다.

 

• 이 버튼을 눌러주시면 현재 티스토리 블로그에 적용되어 있는 스킨을 편집할 수 있는 모드로 진입할 수 있으며, 

티스토리 관리페이지 - 꾸미기 - 스킨편집 - HTML 편집

 

• HTML 코드가 적혀 있는 창을 한번 클릭한 다음 [컨트롤+F]을 눌러주면 아래의 화면처럼 HTML 코드를 검색할 수 있습니다.

티스토리 관리페이지 - 꾸미기 - 스킨편집 - HTML 편집 - HTML 코드 검색

 

• 검색창에 "상단", "상단 광고", "<s_if_var_content-google-ads>" 중에서 아무거나 입력하시면
• <div class="content-article"> ~ <div itemprop="articleBody"> 사이에 상단광고 2개를 출력하는 HTML 코드가 있습니다.

미넴스킨 상단광고 2개를 출력하는 코드

 

 

미넴스킨 상단광고 2개 이동하기 위한 블로그 포스팅 제목 코드 찾기

 

미넴스킨 상단광고 2개를 출력하는 코드를 찾았으니 이제는 이 광고 코드를 카테고리, 제목 등을 출력하는 HTML 코드를 찾아서 이동시키면 됩니다.

 

• 미넴스킨에서 방문자에게 보이는 카테고리, 제목 등이 있는 HTML 코드는 방금 찾은 광고코드 바로 위에 보시면
• <div class="content-title"> 코드 아래에 있는 HTML 코드가 카테고리, 제목, 수정, 삭제 등을 출력하는 코드입니다.

미넴스킨 블로그 포스팅 페이지 카테고리, 제목 등을 출력하는 HTML 코드

 

 

미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동시키기

 

방문자에게 보이는 페이지에서 카테고리, 제목 등이 있는 코드 중에서 현재 상단광고 2개를 출력하는 코드를 <div class="inner"> ~ <span class="category">[ ##_article_rep_category_## ]</span> 사이에 넣어주시면 됩니다.

 

<2023년 8월 31일 광고 이동 위치 수정 내용 수정>

포스팅 제목이 나오는 박스안에 넣었을때 PC화면에서 볼 때는 문제가 없으나, 모바일 화면으로 볼 때 왼쪽에 여백이 생기면서 광고가 오른쪽으로 살짝 빠지는 현상이 발생해서 <div class="content-title"> 위로 이동시켰습니다.

 

미넴스킨 상단광고 2개를 포스팅 제목 위로 이동 완료하였으나 모바일 화면에서 광고가 밀리는 현상이 발생해서 수정 위치

 

 

미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동 후 확인

 

미넴스킨 상단광고 2개를 출력하는 HTML 코드를 이동시킨 후 아래의 그림처럼 제대로 출력이 되는지, 티스토리에서 추가한 광고와 충분하게 거리를 두고 있는지 확인해 보세요.

미넴스킨 상단광고 PC화면 2개, 모바일 화면 1개 위치 재 수정

 

맺음말

 

지금까지 현재 사용하고 있는 미넴스킨 상단광고 2개를 티스토리 광고가 상단 노출 시 연속적으로 출력되지 않도록 블로그 포스팅 제목 위로 이동시키는 방법에 대해서 알아보았습니다.

 

본문에 적용 중인 링크 스타일 변경 및 CSS 버튼을 적용하고 싶으면 아래에 링크되어 있는 포스팅을 참고해 주세요.

 

 

 

출처 및 저작권 표시

 

자료 출처 : 

 

저작권 표시

썸네일 디자인 : 미리캔버스에서 제작되었습니다.

본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)