본문 바로가기

Tistory

티스토리 뷰애드박스 가지고 놀기




티스토리 뷰애드박스 가지고 놀기

도움 주신 퍼피용님의 블로그 : http://iwashere.tistory.com/


티스토리 뷰애드박스 가지고 놀기

 


티스토리 뷰애드박스 가지고 놀기


개인적으로 위치 때문에 신경 쓰였지만 귀찮아서 내버려두었던 뷰애드박스를 깔끔하게 꾸미는 방법을 알게 되었습니다.


블로그 포스트 화면에서 소스 보기를 하여 ad250을 검색하면 아래와 같이 뷰애드박스의 소스를 볼 수 있습니다.


 

티스토리 뷰애드박스 가지고 놀기


총 3단계로 되어있는데 class="ad250_outter"는 뷰애드박스를 전체를 감싸고 있는 부분이고 class="ad250"는 뷰애드박스 상단에 쓰인 view애드박스를 표시하는 부분이고 마지막으로 iframe이 뷰애드박스 정보를 보여주는 부분입니다.


그래서 뷰애드박스를 자유롭게 이동하기 위해서는 class="ad250_outter" 부분을 수정해 주면 되는데 관리자 페이지 → HTML/CSS 편집 → style.css 하단에 아래와 같이 소스를 넣어주면 됩니다.


/* 뷰애드박스위치 */
.ad250_outter {float: left !important; margin: -286px 0px 100px 510px !important;}

float: left, right, center : 기본적인 위치를 3가지로 구분할 수 있습니다.
margin: -286px 0px 100px 510px : 순서대로 상, 좌, 하, 우 위치를 수정하여 포스트 내부에서 자유롭게 이동할 수 있습니다.


/* 뷰애드박스 감추기 */
.ad250 {width:0px !important;}

ad250은 상단에 view애드박스 표시 부분인데 가로 사이즈를 0으로 만들어 깔끔하게 만들 수 있습니다.


iframe 부분은 <iframe.... 부터 </iframe> 까지 소스를 복사해서 skin.html 부분에 넣어 다른 광고들과 같이 자유로운 부분에 출력할 수 있습니다.(iframe 사이즈는 될 수 있으면 수정하지 않는 것이 좋습니다.) 그러면 뷰애드박스가 2개가 생기게 되는데 이때 뷰애드박스위치를 수정하여 iframe 소스를 넣어 보이는 뷰애드박스 위에 기본적으로 보이는 뷰애드박스를 똑같이 배치하거나 좌, 우 사이즈를 과감하게 수정하여 포스트 내부에서 안드로메다까지 추방해 버리는 방법을 쓸 수 있지만 저는 기본적으로 보이는 뷰애드박스가 본문에서 사라지게 되면 view 지원금에 영향이 있을 수 있을까 봐 iframe 소스를 넣어 보이는 뷰애드박스 위에 똑같이 배치하는 방법을 사용했습니다.


애드센스와 나란히 배치하는 방법은 투명 테이블 소스를 이용하여 깔끔하게 꾸밀 수 있습니다.


<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=100% align=center>
<TR>
<TD style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT: 0px">
<P style="TEXT-ALIGN: center">

광고/뷰애드박스

</P></TD>
<TD style="BORDER-BOTTOM: 0px; BORDER-TOP: 0px; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT: 0px">
<P style="TEXT-ALIGN: center">

광고/뷰애드박스

</P></TD>
<TD style="BORDER-BOTTOM: 0px; BORDER-TOP: 0px; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT: 0px">
<P style="TEXT-ALIGN: center">

광고/뷰애드박스

</P></TD></TR>
</TABLE>

 

티스토리 뷰애드박스 가지고 놀기


[파일 다운로드]

top_ad vad.txt