728x90 반응형 티스토리 구글애드센스 멀티플렉스 광고 (일치하는 콘텐츠) 본 글은 구글애드센스의 멀티플렉스 광고를 티스토리에 적용하는 방법에 대해 다룬다. 광고를 본문 하단과 사이드바에 적용하고, 스타일을 변경하는 내용도 함께 다룬다. 참고로 아래 내용과 같이 멀티플렉스 광고는 사이트 내 콘텐츠와 애드센스 광고를 함께 보여주던 일치하는 콘텐츠 광고에서 변경된 광고로, 지금은 광고만 보여주고, 자격요건 제한이 삭제되었다. HTML 삽입 미리보기할 수 없는 소스 1] 광고 코드 생성 먼저 광고 코드를 생성한다. 구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 멀티플렉스 광고를 클릭한다. 멀티플렉스 광고는 수평형과 수직형이 있다. 그리고 반응형 또는 고정으로 크기를 설정할 수 있다. 만들기를 누르면 아래와 같이 코드 생성이 완료된다. 아래 코드는 수평형 & 반응형으로 생성한.. 2022. 3. 2. 티스토리 구글애드센스 본문 상단 2개 반응형 광고 본 글은 티스토리 본문 상단에 구글 애드센스의 디스플레이 광고를 반응형으로 삽입하는 방법에 대한 글이다. 반응형 디스플레이 광고에 대한 자세한 내용이 구글 애드센스 고객센터에서 나와 있으니 한번쯤 확인해 보기 바란다. 반응형 광고의 태그 매개변수 사용 방법 반응형 광고 코드 수정 방법 북클럽 스킨을 기준으로 설명했으며, 디스플레이 광고 코드를 생성하고 적용하는 등의 기본적인 내용을 다룬 아래 내용도 보기 바란다. 티스토리 구글애드센스 디스플레이 광고 HTML 삽입 미리보기할 수 없는 소스 1] 본문 상단 좌측 1개 먼저 아래와 같이 광고가 글과 어우러져서 본문 상단 좌측에 나오되, Mobile에서는 정상적으로 중앙에 위치한다. 아래 코드를 HTML의 위에 삽입하면 적용된다. [ 2, 9 ] 반응형 및 스.. 2022. 3. 1. 티스토리 구글애드센스 디스플레이 광고 본 글은 티스토리에 구글 애드센스의 디스플레이 광고를 적용하는 방법에 대한 내용이다. 북클럽 스킨 기준으로 화면 상단과 하단, 목록 상단, 본문 상단과 중간 및 하단 그리고 사이드바에 적용하는 방법을 설명한다. HTML 삽입 미리보기할 수 없는 소스 1] 디스플레이 광고 코드 생성 구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 디스플레이 광고를 클릭한다. 디스플레이 광고는 아래와 같이 사각형 & 반응형, 수평형 & 반응형, 수직형 & 반응형이 있다. 적용할 위치의 레이아웃 따라 맞는 형태를 선택하면 된다. 반응형을 선택하면 페이지 레이아웃과 사용자 기기에 맞게 광고 크기가 자동적으로 조정된다. 그리고 아래와 같이 원하는 크기를 직접 정할 수도 있다. 크기를 고정하면 게재 가능한 광고 수가 제한될.. 2022. 3. 1. 티스토리 애드센스 자동광고 적용방법 직전 글에서 티스토리에 구글 애드센스 광고 적용 방법은 크게 3가지가 있다고 했다. (기본 광고, 자동 광고, 신규 광고) 티스토리 애드센스 기본광고 적용방법 직전 글에서는 기본 광고 적용 방법을 다뤘고, 본 글에서는 자동 광고 적용 방법을 다룬다. HTML 삽입 미리보기할 수 없는 소스 1] 티스토리 설정 먼저 아래와 같이 티스토리 ▶ 관리 ▶ 수익 ▶ 애드센스 관리 ▶ 광고 설정에서 전체 자동광고를 체크한다. 다음은 구글 애드센스 자동 광고 코드를 티스토리 HTML에 삽입해야 한다. 구글 애드센스 ▶ 광고 ▶ 개요 ▶ 사이트 기준에서 코드 가져오기를 클릭한다. 자동 광고 코드를 티스토리 HTML의 사이에 삽입한다. 2] 애드센스 설정 구글 애드센스 ▶ 광고 ▶ 개요 ▶ 사이트 기준에서 우측 하단에 있.. 2022. 2. 28. 티스토리 애드센스 기본광고 적용방법 티스토리에 구글 애드센스 광고를 적용하는 방법은 크게 3가지가 있다. ① 티스토리 ▶ 관리 ▶ 수익 ▶ 애드센스 관리 ▶ 광고 설정에서 적용하는 '기본 광고' ② 애드센스 ▶ 광고 ▶ 개요 ▶ 사이트 기준에서 적용하는 '자동 광고' ③ 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 적용하는 '신규 광고' 본 글은 티스토리에 구글 애드센스의 기본 광고를 적용하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 기본 광고 적용 방법 1-1] 광고 선택 아래의 광고 설정에서 체크 또는 해제로 적용할 광고를 선택할 수 있다. 또한 아래와 같이 광고 크기를 선택할 수 있는데, 반응형으로 설정하면 페이지 로딩 속도가 느려진다고 하니 참고 바란다. 나는 광고가 화면을 너무 많이 차지하지는 않는.. 2022. 2. 28. 티스토리 구글애드센스 검색엔진 광고 구글 애드센스의 검색엔진 광고는 아래와 같이 자신의 웹사이트에 구글 검색창을 적용하고, 웹사이트 방문자가 이 구글 검색창을 통해 검색할 경우 검색 결과 페이지(SERP) 상단에 광고도 함께 송출되게 하여 수익을 창출할 수 있는 광고다. HTML 삽입 미리보기할 수 없는 소스 검색엔진 광고는 웹사이트 방문자가 웹사이트를 방문한 후 검색창으로 직접 검색하기까지 많은 허들이 존재하기 때문에 효용성이 있을까 싶어 등한시되는 것이 사실이다. 그럼에도 불구하고 없는 것보다는 좋지 않겠냐라는 생각에 적용할지 말지 고민하고 있다면 본 콘텐츠가 하나의 방향성을 제시해 줄 것이라 생각한다. 1] 광고 코드 생성 먼저 광고 코드를 생성해 보겠다. 구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 '검색엔진'을 클릭한다.. 2022. 2. 25. 티스토리 헤딩(heading) 상단 고정 및 슬라이딩(sliding) 아래와 같이 글의 헤딩(heading)으로 만든 목차는 글의 구조를 파악하는 데에 도움을 주고, 프로그레스는 글의 전개를 이해하는 데에 도움을 준다. 나아가 스크롤의 위치에 따라 헤딩을 하이라이팅 한다면, 보다 몰입할 수 있는 웹사이트 이용 환경을 구축할 수 있을 것이다. 본 글은 스크롤을 내릴 때 헤딩이 슬라이딩으로 나타나고 헤딩을 화면 상단에 고정하는 방법에 대한 내용이다. 추가로 글 제목 및 메뉴를 화면 상단에 고정하는 것을 고려해서 적용할 것을 추천한다. 티스토리 글 제목 (article title) 화면 상단 고정 티스토리 북클럽 뉴북, 메뉴 고정 및 스크롤 버튼 HTML 삽입 미리보기할 수 없는 소스 1] 헤딩 스타일 적용 먼저 헤딩의 스타일을 적용해 보겠다. 1-1] CSS 작업 아래 코드를.. 2022. 2. 21. 티스토리 글제목(article title) 상단 고정 스크롤(scroll) 조작에 따라 반응하는 헤더(header)는 보다 매력적인 사용자 경험을 이끌어 낼 수 있으며, 헤더에는 웹사이트명(site title), 글 제목(article title), 메뉴(menu) 등의 유용한 정보를 반영할 수 있다. 본 글은 아래 예시(구글)와 같이 스크롤을 내릴 때 글 제목을 화면 상단(헤더)에 고정하는 5가지 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 ① 상단 고정 - 본문 영역 글을 발행하면 아래와 같이 글 제목이 본문 상단에 자동으로 생성되며, 스크롤을 내릴 때 글 제목을 화면 상단에 고정하는 방법이다. HTML 작업 아래 글 제목 치환자 코드를 HTML의 와 ##_article_rep_desc_## 사이에 삽입한다. CSS 작업 아래 코드를 .. 2022. 2. 19. 티스토리 프로그레스(progress) 바(bar) & 서클(circle) 프로그레스(progress)는 진전, 진척, 진행을 의미하며, 웹사이트 환경에서는 웹사이트 방문자가 콘텐츠의 진행 상황을 시각적으로 알 수 있도록 바(bar) 등의 형태로 구현할 수 있다. 프로그레스(progress)는 콘텐츠의 진행 상황을 단순 시각화하는 것에서 그치지 않고, 웹사이트 방문자가 서론부터 결론까지 이어지는 콘텐츠의 전체적인 구조를 보다 잘 이해할 수 있게 도와준다. 본 글은 바(bar), 서클(circle), 퍼센트(percentage), 탑 버튼(top button) 형태로 프로그레스(progress)를 적용하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 바(bar) - 기본형 내가 설명할 '기본형'은 프로그레스 바를 화면 상단, 화면 하단, 화면 우측, 화면 .. 2022. 2. 14. 이전 1 2 3 4 5 다음 728x90 반응형
