본문 바로가기

Adsense

구글 애드센스 검색 폼 자유롭게 꾸미기




구글 애드센스 검색 폼 자유롭게 꾸미기


구글 애드센스 검색 폼 자유롭게 꾸미기



구글 애드센스 검색 폼 자유롭게 꾸미기


기존 구글 애드센스 검색 폼을 자유로운 방법으로 수정해서 사이트와 좀 더 잘 어울리게 꾸미는 방법을 알려드리고자 합니다.


기존 검색 폼 코드는 아래와 같이 텍스트박스 가로 크기만 쉽기 수정할 수 있는데 CSS 코드에 적용해서 텍스트박스 크기를 좀 더 자유롭게 수정할 수 있습니다.


<form action="http://www.google.co.kr" id="cse-search-box" target="_blank">
  <div>
    <input type="hidden" name="cx" value="partner-pub-?" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="?" />
  </div>
</form>


먼저 위에 있는 div는 아무것도 없이 비어있는데 여기에 일단 이름을 지어주는 겁니다.


<div class="adsence">


길지 않는 단어를 지정해 주고 CSS 수정란에서 새로운 코드를 삽입해 주면 되는 거죠.


.adsence 를 적으면 검색 폼 전체에 해당되는 부분을 수정 할 수 있고

.adsence .text 를 적으면 텍스트박스만 수정 할 수 있습니다.


아래와 같이 CSS 수정란에 입력해 주면 가로 사이즈를 좀 더 세밀하게 px 단위로 조절할 수 있습니다. 그리고 기존에 있던 size="55"는 지워 줍니다.

이 방법 외에도 CSS에서 사용되는 여러 가지 코드로 수정할 수 있지만 적용되지 않는 부분이 많아 보이는데 외부적으로 더 꾸미려면 테이블 소스를 이용하면 좋을 거 같습니다. (단, 너무 과도하게 변형해서 구글 애드센스 정책에 위반되는 수준까지는 만들지 않는 것이 좋겠죠.?)


.adsence {margin:0px 0px 0px 0px;}

.adsence .text {width:100px;}


구글 애드센스 검색 폼으로 많은 수익을 얻을 수 있는 부분은 아니겠지만 사이트에 좀 더 잘 어울리게 적용해서 방문자들이 적극 활용할 수 있도록 도와주는 것도 나쁘지 않은 방법이라고 생각합니다.


구글 애드센스 검색 폼 자유롭게 꾸미기