본문 바로가기

#NoWarInUkraine
티스토리

[티스토리 팁]티스토리에 왼쪽 또는 오른쪽에 고정된 광고 달기+브라우저(페이지) 크기에 따른 노출 유무 적용

반응형


또~!!! 간만에 티스토리 팁을 올립니다.
아주 예전 티스토리에 귀여운 캐릭터를 달아 볼까요 포스팅을 응용한 팁으로써
아주 간단하게 적용 하실수 있습니다.

우선 적용할 광고 또는 이미지링크 등을 만들어 둬야 겠죠?
저는 구글 애드센스를 이용하기 때문에 애드센스를 달아 보도록 하겠습니다.

코드는 아래와 같습니다.

1, 광고가 보여질 레이어

<div id='flotante' name="flotante">
광고 또는 이미지 링크 들어가는곳
</div>
2, 광고를 고정 시켜주는  스타일시트

/*-- (고정광고 css) --*/
#flotante {
position: fixed;
right: 0;
bottom: 0;
height: 250px;
width: 250px;
text-decoration: none;
}


3, 브라우저크기에 따라 노출 유무 스크립트

<script language="JavaScript">
<!--
var Wide = document.body.clientWidth;
if (Wide <= 1500){
document.getElementById('flotante').style.display = "none";
}
else if (Wide > 1500){
document.getElementById('flotante').style.display = "block";
}
//-->
</script>
<!---고정되어 있는 광고 코드 끝--->


이제 코드 확인이 끝났다면 적용을 해보도록 하겠습니다.

1번코드를 skin.html 안의 맨 하단부분에 보시면   </s_t3> 바로 위에 순서대로 넣습니다.
그리고 2번 코드를 style.css 안에 적당한 위치에 넣습니다.

적용이 났습니다.

그럼 옵션인 3번 브라우저 크기(페이지 크기)에 따라 광고 노출 유무를 지정할수 있는
스크립트에 대해 알아 보겠습니다.

간단합니다. 해당 3번 코드를 skin.html 에 넣은 광고 레이어 바로 밑에 넣어주고
본인의 스킨에 맞는 브라우저 또는 페이지의 크기를 찾아 빨간색으로 보이는 숫자를
수정해 줍니다
. 저는 기본적으로 와이드 화면에서만 광고가 보이도록 1500으로 설정했습니다.
브라우저 크기가 1500이하로 내려가거나 그 이하의 해상도를 가진 방문자가 접속을
하면 광고는 보여지지 않습니다.
반응형
  • Favicon of http://world.ev7.net BlogIcon 박오초 2011.01.30 13:28

    완전 잘보고 갑니다!!!

  • 2011.08.23 19:35

    엌..밑에 추천은 안움직이고 어떻게 저렇게 따라다녀요?옆에 follow me 도 그렇고..신기..

    • Favicon of https://suldo.com BlogIcon 술도 2011.08.24 15:49 신고

      팔로미는 해당 스크립을 제공하는 사이트가 있구요..
      추천스크립트는 제 티스토리에.....이미보셧죠?ㅎㅎ
      참고허시면 됩니다..

  • Favicon of http://JDFree.kr BlogIcon JFree 2012.08.30 15:28

    엇?!

    본문의 내용
    ' 1번과 코드를 skin.html 안의 맨 하단부분에 보시면 </s_t3> 바로 위에 순서대로 넣습니다.
    그리고 3번 코드를 style.css 안에 적당한 위치에 넣습니다. '
    에서 ' 3번코드를 style.css안에 적당한 위치에 넣습니다..' 부분이 아니라

    '2번코드를 style.css안에 적당한 위치에 넣습니다'

    가 아닌가요?

    포스팅 잘보고갑니당~^^