2009년 10월 12일 월요일

사이드바 이미지 배너 올리는 방법

제 블로그 오른쪽 사이드바 상단에 아름드리 매달려 있는 홍보 이미지 배너들이 있읍니다.이 배너들을 클릭하면 각기 링크된 주소창으로 열리는데,이웃,구독자분,즐겨찾기를 포함하여 1일 평균 100명~150명 내외로만 방문하지 않는 제 블로그에선 그다지 큰 홍보 효과는 누리지 못합니다.그러나 혹시 압니까? 적은 방문자수라도 그 누군가에게 도움을 줄지요..^^


그래서 사이드바에 달려있는 배너 올리는 방법에 대해서 간략하게 설명하고자 합니다.설치형 블로그를 하는 사람들에겐 도움이 될지 안될지는 모르겠지만 일단 제 블로그 이웃중의 한 분에게 방법을 알려드리고자 이 글을 올립니다.배너 올리는 방법은 두 가지 경우가 있읍니다.

첫번째는 위젯을 이용하여 올리는 방법(텍큐에서 둥지를 틀고 있는 제 블로그를 예를 들자면)

내 블로그 관리하기→꾸미기→위젯→위젯추가 클릭→ HTML 코드 위젯과 이미지 배너 위젯 중 이미지 배너 위젯 선택→이미지 배너 경로 주소 기입→사이드바 원하시는 위치 이동→위젯 배치→ 저장하기 버튼→ 누르면 적용

두번째는 skin.htm에서 소스를 만져서 직접 입력하여 올리는 방법.(역시 제 블로그를 예를 들자면)

파일업로드:올리고자 하는 이미지를 포토샵이나 포토스케이프(다운로드)를 이용해서 사이드바 가로폭(위의 배너 이미지들은 모두 190px)에 맞춰서 재단하고 원하는 색을 덧입힌 다음에 적당한 이름으로 설정해서 올립니다.

스킨 편집:skin.htm(스킨 전체적인 구조 혹은 뼈대)에서 사이드바 소스를 찾습니다.원하시는 위치에 이미지 주소와 링크된 주소창 주소의 소스를 입력하고 미리보기로 확인을 한 후 적용 버튼을 누르면 됩니다.여기서 주의 할 점은 아직은 텍큐 서비스가 안정적이지 못한바 간혹 위젯이 사라져서 적용된 이미지가 보이지 않을수도 있으므로 당황을 하지 마시고 적용 버튼을 누른 후 위젯을 확인하여 원래의 위치에 배치를 시키고 저장하기 버튼을 누르시기 바랍니다.

참고로 제 블로그 사이드바에 올린 배너 이미지의 소스를 아래에 올리니 참조하시어 적용을 시키세요.^^

<div class="sidebar-1">
      <s_sidebar>
        <s_sidebar_element>
<a href="http://www.nowsay.co.kr/" onclick="window.open(this.href); return false;"><img src="./images/banner_nowsay1.png" style="border:0" alt="나우세이메타블로그" /></a>
<a href="http://chingusai.net/support.html" onclick="window.open(this.href); return false;"><img src="./images/banner_support2.gif" style="border:0" alt="친구가되어주세요" /></a>
<a href="http://chingusai.net/bbs/zboard.php?id=main_notic&no=426" onclick="window.open(this.href); return false;"><img src="./images/G-Voice1.gif" style="border:0" alt="게이코러스G-Voice정기공연" /></a>
<a href="http://chingusai.net/bbs/zboard.php?id=main_notic&no=425" onclick="window.open(this.href); return false;"><img src="./images/Guide.gif" style="border:0" alt="게이컬쳐가이드북팀모집" /></a>

        <!-- 검색 위젯 -->
          <div class="search widget">
            <s_search>
              <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" class="inputText"/><button type="submit" class="btnSearch" onclick="[##_search_onclick_submit_##]" ><span>검색</span></button>
            </s_search>
          </div>
        </s_sidebar_element>

        <s_sidebar_element>
        <!-- 공지사항 위젯 -->

혹 적용이 어려우시다는 분들은 댓글로 달아주시면 제가 아는데까지 설명을 드리겠읍니다.^^

댓글 5개:

  1. 으헹~~넘흐넘흐 고마워용~>ㅁ<///

    답글삭제
  2. 비밀 댓글 입니다.

    답글삭제
  3. @Anonymous - 2009/10/14 16:57
    음..이미지 경로 주소는 내 블로그에 있는 메타블로그 "나우세이" 이미지에 마우스 대고 우클릭하면..속성이 나올거야..그럼 위치에 (http://fs.textcube.com/blog/2/23211/attach/XIR6ITTvZd.png) 이라고 주소가 나오는데..이게 이미지 경로 주소거든..이 주소를 넣어주면 돼..



    위의 주소는 내블로그에 있는 주소니까..앞에 주소를 입력해도 되고 아니면 나우세이 메타 블로그에 가서 앞의 설명처럼 그 이미지에 마우스 우클릭해서 위치 주소를 그대로 복사해서 입력하기만 하면 돼...단지 내 사이드바 폭에 맞춰서 달려고 한거라 스킨 편집을 이용한거고..



    지금 네 블로그 확인하니까 사이드바가 내려왔던데..원래 네 스킨이 2단형이니? 아님 1단형이니? 2단형이면 사이드바 폭보다 이미지가 크면 오류가 날 수 있어..그거 감안하고 해야 할거야..

    답글삭제
  4. @nalrari.K - 2009/10/14 18:40
    우옹 친절한 댓글 너무 감사~~ 앗흥~~~////

    답글삭제
  5. @Anonymous - 2009/10/14 16:57
    글고 구글 애드센스는 티스토리 홈에 가서 (구글 애드센스 광고)검색하면 여러 글들이 쭉 나열되니까 그 중에서 네가 원하는 답을 틀림없이 얻을 수 잇을거야.^^ 사실 애드센스 광고 다는 정보도 포스팅 할려 했으나 캡쳐 이미지로 설명을 해야 이해가 빠른데..파이어폭스 웹 브라우저에선 캡쳐 프로그램을 어케 깔아서 사용하는지를 몰라서리 아무래도 시간 걸릴거 같아서..ㅎㅎ

    답글삭제