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

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

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

코드는 아래와 같습니다.

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이하로 내려가거나 그 이하의 해상도를 가진 방문자가 접속을
하면 광고는 보여지지 않습니다.