티스토리 사이드바 구글 검색창 달기

2009.05.01 17:15:34

티스토리 입성 1일째 입니다..^^

티스토리와 함께 놀다 보니 시간이 금방 가버리네요..

티스토리 사용 1일째 노하우 하나를 터득해서 공유 하고자 자료를 올립니다.

티스토리 사이드 바에 구글 검색창을 달기 입인데요 물론 아시는 분은 모두 아시겠죠.. 모르시는 분은 한번 해보세요…

1. 구글 애드센스에서 검색창 소스를 받아오세요.. 여기까지는 모두 아실거에요..^^
2. 티스토리 관리자 화면 에서 스킨->HTML/CSS 편집을 선택 합니다. 그럼 아래 처럼 코드를 입력 하는 창이 나오게 되는데요 겁내지 마세요 소스를 잘못 입력해서 화면이 이상하게 변하면 기존에서 스킨으로 다시
덮어 쉬우면 되니깐요…

3. 여기를 보면 skin.html 소스와 style.css 소스가 있는데요.. skin.html 소스는 화면을 표시되는 소스 이구요 style.css 화면에 출력되는 텍스트나 사이트바 기타 박스들의 크기를 색상등을 수정 하는 곳입니다..
두개의 소스를 에디터 또는 드림위버엥 복사해서 붙혀 넣기 하세요..

4. 그리고 skin.html 에서 아래의 소스를 찾습니다..
   <s_sidebar_element>
<!– 최근 포스트 모듈 –>
     <div id=”recentPost”>
      <h3>최근에 올라온 글 </h3>
      <ul>
       <s_rctps_rep>
        <li>
         <a href=”[##_rctps_rep_link_##]”> [##_rctps_rep_title_##].</a>
         <span class=”cnt”>[##_rctps_rep_rp_cnt_##]</span>
        </li>
       </s_rctps_rep>
      </ul>
     </div>
    </s_sidebar_element>

</div>
</form>

이렇게 넣어 줍니다. 위에 코드는 제가 만든 코드니깐요 여러분께서는 직접 자신의 구글 애드센스 계정의 구글 검색 소스를 넣으시면 되요

여기서 중요한게 몇가지 있는데요..
<div id=”google1″> // 이부분 같은 경우 저는 google1 로 했는데요 다른 문구를 넣어도 됩니다.

그리고 다음 소스는 반듯이 들어 가야 합니다
<s_sidebar_element> //소스 시작지점에 삽입
</s_sidebar_element> // 소스마지막에 삽입

반듯이 들어 가야 합니다..
이렇게 skin.html 수정을 합니다.

5. 다음은 style.css 을 소스를 복사해 에디터 또는 드림위버에 복사 해서 붙여넣기 하구요.
아래의 소스를 찾습니다.
#recentComment {width:190px; overflow:hidden;}
#recentComment .info_wrap { margin-bottom:3px; color:#999; display:block;}
이러한 소스가 있는 곳 바로 위에 아래의 소스를 입력 합니다.
#google1 {width:200px; overflow:hidden;}
#google1 .info_wrap { margin-bottom:3px; color:#999; display:block;}

여기서 skin.html 에서 사용된 문구가 보이시죠..google1 요녀석인데요 요녀석은 다른 문구를 넣어도 되지만
반듯이 skin.html 과 style.css 가 동일 하게 적용 되어야 합니다.

6. 이렇게 소스를 수정 해서 넣으셨다면 이제 저장을 해주시구요..
다음은 사이드바 설정에 가보시면 조금전에 만든 “구글검색” 이란 사이드바가 생성되어 있는 것을 보실수 있습니다.