관리 메뉴

맛집 여행 캠핑 일상 생활

반응형스킨 #2 - REVISTION (사이드바에 반응형광고 공간확보) 본문

티스토리

반응형스킨 #2 - REVISTION (사이드바에 반응형광고 공간확보)

♥ 영은파더♥ 2016. 3. 18. 17:19

반응형스킨 #2 기본 스킨을 좌측 사이드바에 애드센스 반응형광고를 달수 있도록 공간을 확보하였다.


다운로드 받아서 HTML/CSS 편집메뉴에서 업로드 및 수정해서 사용이 가능하다.


Tistory_itrooms_v1.1.zip




위와 같이 나오며 좌측 사이드바에 보면 애드센스 광고 160 x 600 사이즈가 들어갈 만한 공간을 확보하였다.

그리고 좌측하단에 보면 방문자 카운트를 표시하였다.

반응형스킨이라서 브라우저 가로폭이 1260 이하로 줄어들면 사이드바가 사라지고 상단바가 생기는데 이때는 레이어를 안보이게 처리하였다.


광고코드를 넣는 곳은 id가 "adSideBar" 인 div 태그를 찾아서 그 안에 광고스크립트코드를 넣어주면 된다.

<div id="adSideBar" class="sidebar_skin">

&nbsp;

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 반응형광고 -->

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234"

data-ad-slot="1234"

data-ad-format="auto"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

HTML/CSS 편집화면에서 HTML 부분에서 수정하면 된다.


ps : IE 9 미만에서 정상적으로 작동하지 않을 수 있음.


Trackback : 0 | Comments : 0
댓글쓰기 폼