티스토리 사이드바에 플로팅 광고 게재하기

티스토리 뷰

티스토리 사이드바에 플로팅 광고 게재하기

블로그/티스토리 /

플로팅광고라고 하기엔 좀 그렇고...스크롤을 따라다니는 광고라고 표현하면 적당하겠군요. 즉, 다시말하면 마우스 스크롤로 페이지가 상하로 움직여도 광고는 그 자리에 그대로 고정되어 보여지는 그런 광고라는 거죠. 마우스 따라다니는 광고! 방법은 정말 간단합니다. 사진설명조차 필요가 없지만 그래도 몇 장은 첨부하겠습니다. 아래를 봅니다.

먼저 티스토리 관리센터 - HTML/CSS 편집기에서 CSS 편집부분을 봅니다.

스크롤을 최하단으로 내려 그곳에 아래 텍스트파일을 열어 전체를 그대로 복사합니다.

CSS 최하단에 삽입.txt

삽입하셨나요? 그럼 이제 사이드바 관리화면으로 들어갑니다. HTML 배너 출력을 맨위로 끌어오신 후 아래 첨부파일 내 HTML 소스를 그대로 복사합니다.

사이드바 HTML 소스.txt

저같은 경우에는 '리더스타임' 광고를 사이드바 플로팅 광고로 쓰고 있습니다.

자세한 광고소스 삽입방법은 아래와 같습니다.

빨간부분이 '광고코드' 죠. <ul> 과 </ul> 사이에 광고코드를 그대로 붙여넣기 하시면 됩니다.

자 이제 광고가 표시됩니다. 그런데 뭔가 어색하다구요? 광고의 위치를 조금 조정해봅시다.

다시 CSS 편집기로 들어갑니다.

/* 떠다니는 메뉴 (Floating Menu) */
#floatdiv {
    position:fixed; _position:absolute; _z-index:-1;
    width:170px;
    overflow:hidden;
    right:150px;  ← 스크롤바에서 몇 px 간격을 띄울지
    top:200px; ← 상단에서 몇 px 간격을 띄울지
    background-color: transparent;
    margin:0;
    padding:0;
}#floatdiv ul { list-style: none; }
#floatdiv li { margin-bottom: 2px; text-align: center; }
#floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; }
#floatdiv a:hover, #floatdiv .menu { background-color: #5D5D5D; color: #fff; }
#floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; }