구글 애드센스 광고에 테두리 삽입

Posted by Blozk
2015.07.10 17:41 INFORMATION




애드센스 광고 배치 후 광고에 테두리를 삽입하는 방법


깔끔한 블로그를 유지하고 싶지만 광고를 삽입하면 어느정도 난잡(?) 해지기 마련이다.

호/불호가 갈리기는 하지만 많은 애드센스 사용자들이 테두리를 사용하는것으로 보인다.

테두리를 적용한다고 해서 크게 깔끔해지거나 하지는 않지만 어느정도 광고영역을 분리시켜 놓는다는 점은 만족할만한 점인듯하다.

애드센스를 예로들었지만 모든 광고에 적용 가능하다.




아래코드는 현재 YYBOX의 적용된 코드

(테두리 색상변경시 참고 Site: http://www.color-hex.com/)




# skin.html 의 광고코드 상 하단에 테두리 시작, 끝 코드를 붙여넣는다.


 <!-- 테두리 시작 -->

 <fieldset style="border:2px solid #aaaaaa;text-align:center;width:720px;

 height:320px;padding:0;margin:0 auto;position:relative;">

 <br>

 애드센스 광고코드 삽입

 <br>

 <!-- 테두리 끝-->

 </fieldset>


* 애드센스 광고코드 바로 위아래의<br>태그는 광고 위 아래로 한줄씩 여백을 주기위해 삽입함 




# 각 항목에 대한 설명

 1. width (너비) : 테두리의 가로, 너비를 설정 (기본단위는 px 추가로 px, pt, cm, %도 입력가능)


 2. height (높이) : 테두리의 세로, 높이를 설정 (기본단위는 px 추가로 px, pt, cm, %도 입력가능)

 

 3. margin (외부여백) : 테두리 밖의 여백을 설정 (Option: top, bottom, left, right)

    ex) margin-top:10px; margin-right:10px; 테두리 외부 상단/우측 10px의 여백설정


 4. padding (내부여백) : 테두리 안의 여백을 설정 (Option: top, bottom, left, right)

    ex) padding-bottom:10px; padding-left:10px; 테두리 내부 하단/좌측 10px의 여백설정


 5. text-align (위치) : 테두리안의 광고 위치 (Option: left, center, right)

    ex) text-aligb:center 테두리안의 광고 중앙


 6. border-width (테두리 두께) : 테두리 두께 설정

    ex) border-width:2px; 테두리 두께 2px


 7. background-color (배경 색상) : 테두리 안의 배경색상 설정

    ex) background-color:#ffffff;


 8. border-color (테두리 색상) : 테두리 색상 설정

    ex) border-color:#aaaaaa; 


 9. border-style (테두리 형태) : 테두리 형태를 설정 (Option: dotted, dashed, solid, double, groove)

    ex) border-style:solid; 테두리형태를 직선으로 설정




#위 내용을 토대로 적용된 YYBOX 코드의 설명은 다음과 같다


 <fieldset style="border:2px solid #aaaaaa;text-align:center;width:720px

 ;height:320px;padding:0;margin:0 auto;position:relative;">

 

 1. 테두리 두께 2px border:2px 

 2 .테두리 형태 직선 solid 

 3 .테두리 색상 회색 #aaaaaa

 4. 테두리안의 광고위치 중앙 text-align:center

 5. 테두리가로 720px width:720px

 6. 테두리세로 320px height:320px

 7. 테두리 내부 여백없음 padding:0

 8. 테두리 외부 여백없음 margin:0 









YYBOX의 테두리 삽입 전/후


<테두리 적용 전>



<테두리 적용 후>








이 댓글을 비밀 댓글로
  1. 현재 초보라 공부 하고 있는데..글 감사합니다. 도움이 되었습니다. 감사합니다.

티스토리 툴바