본문 바로가기

블로그팁/티스토리

티스토리 카테고리 목록 상단에 애드센스 광고 넣기

반응형

블로그를 하면서 포스팅도 중요하지만, 디자인에도 신경을 많이 쓰는 편인데요. 저는 굉장히 심플하면서 깔끔한 스타일을 좋아합니다. 제 블로그를 보시면 아시겠죠? 지난 번에 광고 코드를 가져와서 블로그 본문 상단과 하단에 애드센스 광고를 넣는 방법에 대해 포스팅을 해드렸는데요. 어떻게 잘 되셨는지 모르겠네요! 


오늘은 다른 곳에 광고를 넣어 볼건데요. 거기가 어디냐! 바로 카테고리 목록 입니다. 사이드바에 있는 카테고리 메뉴를 누르면 그 메뉴에 해당되는 글 목록들이 나열 되는데요. 여기에도 광고를 달아 노출시켜 줄거에요. 본문에 삽입을때 처럼 어렵지 않으니 천천히 따라해주시면 됩니다. 스킨을 수정 하기전엔 항상 저장 먼저 해주세요! 그럼 시작해 보겠습니다. 사이드바에 광고 넣는 법과 본문에 광고 넣는 방법을 못 보신 분들은 아래 링크를 타고 가시면 되겠습니다.


[ 티스토리 사이드바에 애드센스 광고를 달아보자! ]

[ 티스토리 본문에 애드센스 광고를 달아보자! ]


사이드바에 보이는 카테고리 메뉴를 클릭해보면


글 목록들이 나오는데 아무것도 없으니 좀 썰렁하네요.우리는 바로 여기다 애드센스 광고를 넣어 줄 거에요.


1. 광고코드 개선하기



광고를 넣으려면 코드를 가져 와야겠죠!  저는 글 목록 위쪽에 직사각형 광고 두개를 넣어 줄 겁니다.그러기 위해선 가져온 광고를 개선을 해야합니다. 메모장 파일을 받으시면 아래와 같은 코드가 나오는데 저 두 곳에 가져온 광고 코드를 하나씩 넣어주세요! 나중에 전체 복사한 후 스킨에 넣어 줄 겁니다.


카테고리 목록에 광고달기.txt







2. 블로그 스킨에 적용하기



관리자 - 꾸미기 - HTML/CSS편집 을 눌러 편집창을 열어주세요.Ctrl + F 단축키를 눌러 list_conform 를 검색해주세요.


검색을 하시면 주황색으로 표시가 되는데요. <ul> 위쪽에 개선한 광고코드를 전체복사 하신 후 붙여넣기 해주시면 됩니다. 아래쪽에 넣고 싶으시다면 </ul> 아래쪽에 넣어주세요.



3. 스킨에 적용된 광고 확인하기



짜잔! 광고가 제대로 적용이 된 모습입니다. 그런데 광고 하단에 보시면 선이 보이실 겁니다.

그냥 광고만 넣으면 뭔가 정리가 안된 느낌이라 선을 넣어 주었습니다. 




4. 광고 밑에 선을 넣어보자.



광고 밑에 선 긋기.txt


선을 넣는 방법은 아주 간단하니 이미지는 생략할게요! 일단 위에 코드를 받아주세요. 받으신 코드를 전체 복사 하신 후 다시 관리자 - 꾸미기 - HTML/CSS편집 으로 가셔서 아까 삽입한 광고코드 바로 밑에 넣어주시면 됩니다. 참 쉽죠?

반응형