구글 애드센스를 상단에 2개 넣고 싶다면?

블로그 수입원 생각하면 바로 떠오르는게 구글 애드센스 일텐데요.  

저도 이번에 블로그를 처음시작하면서 바로 애드센스를 달기위해서 상단에 달기 위해서 적용해봤는데 여러분께도 소개해드리고자 블로그에 글까지 올리게되었습니다. 일반적인 방법도 있지만 CSS를 이용해서 올리는 방법을 알려드리겠습니다. CSS를 수정하면 두려워하시는 분들이있는데 밤바를 따라만 오시면 되겠습니다.











 

애드센스를 블로그상단에 위치 시켜보자 




대부분의 경우 해당구간에 애드센스코드를 그냥넣거나  테이블소스를 이용해서 넣는경우가많았습니다. 예를들면 (광고를 그대로 삽입) skin.html 파일에서 해당구간에사이에


 <div class="article">

<!-- 구글애드센스 1번 -->

<!-- 구글애드센스 2번 -->

[##_article_rep_desc_##]


위와같이 2개의 애드센스광고를 연달아 적어주기만하면 나오게됩니다. 페이지상단에 노출시키는 방법이죠. 물론 이방법이 제대로 적용은되지만 위치라던가 정렬을하는데 있어서 표현을 해주어야하는데
이때 많은분들이 쓰시는방법이 table태그를 이용해서 많이들 달아 놓으셨을겁니다.
하지만 좀더 정확한 방법을 위해서 아래와 같이 해두는것을 추천해드립니다.





 
애드센스 위치를 좀더 정확하게 잡을 수 있는 방법 




skin.html

먼저 스킨파일에서 위에 방법과같이 해당 구간 사이에 소스를 집어넣어줍니다.

 

<div class="article">


<div id="ADTop">

     <div class="ADTop1">

       <!-- 구글애드센스 1번 -->

     </div>

     <div class="ADTop2">

   <!-- 구글애드센스 2번 -->
  
    </div>


</div>

[##_article_rep_desc_##]



style.css
에서 아래와같이 적정한곳에 넣어줍니다. (애매할경우 최하단)

 
 /* ***** adtop ***** */
#ADTop {height:250px; width:700px; overflow:hidden; margin-bottom: 20px; }
#ADTop .ADTop1
{
    float:left;
    width:330px;
}
#ADTop .ADTop2
{
    float:right;
    width:330px;
}


적용된 모습은 아래와같습니다. 글본문 상단에 애드센스를 집어넣을 수 있습니다.


 



 
2개말고 1개만 집어 넣고 싶을땐?

skin.html 에서   

   <div class="ADTop2">

   <!-- 구글애드센스 2번 -->
  
    </div>

style.css 에서

#ADTop .ADTop2
{
    float:right;
    width:330px;
}


이부분을지워주시면 됩니다.

길게쓰시려면 width:330px; 이부분을 값을 크게해줘야겠지요.





 
Table 값 대신 위의방법으로 지정할시 장점

많은 분들이 하고계시는 테이블 소스로 하는것보다 소스가 간편해져서 다른 소스 수정시에 용이하며,

미세하지만 속도가 좀 더 빨라집니다. (거의체감상 느낄순없지만)

가장 큰 장점은... 복잡한걸 단순화 시킨다는거겠지요..





http://bamba.kr/trackback/2

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 등록하기
  1. 2010/04/07 09:29
    적용을 해보려고 해봤는데 전 250x250이라..
    가로 폭을 조정하다보니 이상하게 오류가 나더라고요
    사이드바가 본문의 하단으로 밀려나가는;;;
1 ... 19 20 21 22 23