Contents
티스토리 북클럽 스킨 적용 및 사이드바 애드센스 광고 설정
티스토리에 북클럽 스킨 적용하기
오늘은 티스토리 블로그 사이드 바 설정 및 애드센스 광고 삽입에 대해서 포스팅할까 합니다. 블로그를 시작하신 지 얼마 되지 않으신 분들이나 스킨 편집에 관심이 많으신 분들이라면 참고해보시면 좋을 것 같습니다. 우선 티스토리 블로그는 다양한 스킨들을 선택하실 수 있습니다. 그중에서 '사이드바' 설정을 위해서 '북클럽(BookClub) 스킨'으로 변경을 해주면 됩니다. 스킨 설정은 아래와 같이 스킨 변경 - 북클럽스킨 적용을 하면 됩니다.
많은 티스토리 블로거 분들이 북클럽 스킨을 선정하는 이유는 몇 가지 있겠지만 가장 많은 비중을 차지하는 부분이 사이드바를 손쉽게 설정할 수 있고 이를 통해 애드센스 광고를 게재, 송출할 수 있기 때문입니다. 티스토리 블로그를 운영하는 많은 유저들이 북클럽 스킨에서 HTML, CSS 수정을 통해 자신만의 블로그를 꾸미는 경우가 많습니다.
사이드바 란?
'사이드바'는 아래 이미지와 같이 티스토리 블로그 - 북클럽 스킨 적용 후 블로그 홈 화면에서 오른쪽 또는 왼쪽의 기다란 공간입니다. 이 공간을 활용하여 블로그의 카테고리, 공지사항, 댓글, 검색창 등 다양하게 활용이 가능하고 오늘은 그 중 하나인 애드센스 사이드바 광고를 넣는 방법을 알아보겠습니다.
애드센스 광고 코드 가져오기
우선 애드센스 광고 승인이 되어 있어야 합니다.(애드센스 관련된 포스팅은 추후 자세하게 업로드 해보도록 하겠습니다.) 티스토리 - 애드센스 광고 게시 승인이 되어 있는 분들이라면 잘 아실 테고 쉽게 따라 하실 수 있습니다.
광고 카테고리에서 신규 광고 단위 만들기로 들어갑니다. 그리고 디스플레이 광고를 찍어주시면 아래와 같은 광고 이미지를 보실 수 있습니다.
광고 단위 이름 지정 / 수직형 / 광고크기 등 설정을 해주시고 만들기 버튼을 누르면 다음과 같은 페이지가 뜨실 겁니다. HTML 코드를 전체 복사해주시면 됩니다. 티스토리 스킨 편집의 HTML에 삽입할게 아니니 '<body></body> 태그 사이에 광고 단위 코드를 복사해서 붙여 넣으세요.' 문구는 무시해주시면 됩니다.
티스토리 사이드바 설정 및 적용
플러그인 - 배너 출력
먼저 티스토리 플러그인 설정으로 들어가셔서 배너 출력 플러그인을 적용해야 합니다. 이는 사이드바에 배너를 출력할 수 있도록 해줍니다. 블로그 관리에서 아래로 내려보시면 플러그인이라는 탭이 보이실 건데 들어가 보시면 아래와 같이 생긴 배너 출력 플러그인을 활성화해주시면 됩니다.
사이드바 - 배너 설정
배너 출력 플러그인을 활성화해주셨으면 다음 단계로 블로그 관리 - 사이드바를 클릭해주시면 됩니다. 아래와 같은 이미지를 보실 수 있고 HTML 배너 출력의 + 를 클릭해주시면 사이드바 1,2,3 이런 식으로 개수를 설정하실 수 있습니다.
HTML 배너 출력 편집으로 들어가시면 아래와 같이 HTML배너출력 / 이름 / 소스 설정을 하실 수가 있습니다. 이름은 본인이 알아볼 수 있게 작성하면 되며 애드센스에서 복사해온 HTML 문구를 HTML 소스 란에 복사해줍니다. 그리고 확인 버튼을 눌러주시면 북클럽 스킨 사이드바의 애드센스 광고 설정이 끝났습니다. 이제 블로그 메인 홈으로 들어가 보시면 사이드바에 게시된 애드센스 광고를 확인하실 수 있습니다.
사이드바 활용과 마무리
오늘은 사이드바를 활용하여 애드센스 광고 게시 방법에 대해서 알아봤습니다. 사이드바를 활용하여 애드센스 광고만 게시할 수 있는 것이 아니라 프로필 이미지 등록을 비롯하여 글 관리 카테고리 등 다양하게 편집 및 수정이 가능합니다. 다만 이전 포스팅에서 언급했던 HTML과 CSS를 활용해야 합니다.
티스토리 블로그는 HTML / CSS처럼 웹 언어 시스템을 통해 조금 더 자유롭게 블로그 편집이 가능하기 때문입니다. 이전 포스팅 링크드리면서 다음 포스팅도 다양하게 블로그에 도움 되는 글로 찾아오겠습니다.
티스토리 블로그 글씨체 바꾸기 - 웹폰트 사이트 활용
Contents 티스토리 블로그 글씨체 웹폰트로 바꿔보기 티스토리 블로그를 처음 시작했거나 블로그를 막 꾸미기 시작한 분들이라면 블로그 초기 세팅에 관심이 많을 겁니다. 저도 블로그 꾸미기에
www.hibabinews.com
티스토리(스킨편집) 프로그레스 바, 진행 바 설정하기
Contents 티스토리(스킨편집) 프로그레스 바, 진행 바 란? PC에서 또는 모바일에서 글들을 볼 때 한 번씩은 위 이미지처럼 상단에 진행 바 같은 것을 보셨을 겁니다. PC 버전에서 스크롤을 내릴 때
www.hibabinews.com
