'나만의 배너'에 해당되는 글 3건

  1. 2009.04.15 배너위젯 제작법 (4)
  2. 2009.01.23 나만의 배너 설정방법 (60)
  3. 2009.01.06 나만의 배너 위젯뱅크 등록!! (4)

배너위젯 제작법

|
위젯뱅크에 등록된지 벌써 한분기가 지났는데 이놈의 귀차니즘때문에 이제야 제작기를 올리게 되네요.

일단 배너위젯에 필요한 설정은 3개이다.


이미지경로, 링크경로, 툴팁으로 띄울 링크이름
이 설정들을 UserPref로 추가한다.
   <UserPref name="img" display_name="이미지경로"
        default_value="http://pimg.daum-img.net/widgetbank/img_banner.gif"/>
  <UserPref name="link" display_name="링크경로"
        default_value="http://widgetbank.daum.net" />
  <UserPref name="tooltip" display_name="링크이름"
        default_value="배너 위젯"/>
셋 다 텍스트 형태라 datatype은 없어도 된다.

이제 컨텐츠 영역을 만든다.
   <script type="text/javascript">
  
   ...
  
   </script>
   <div id="bannerArea"></div>
데이터를 가져와서 html 코드를 만들 script영역과 실제로 배너를 띄울 div만 있으면 된다.

이제 스크립트 코드 차례

   function setBanner() {
     var prefs = new gadgets.Prefs();
     var img = prefs.getString("img");
     var link = prefs.getString("link");
     var tooltip = prefs.getString("tooltip");

     var html = "";
     html += '<a href="' + link + '" target="_blank">';
     html += '<img src="' + img + '" alt="' + tooltip +  '" title="' + tooltip + '" border="0" width="166px" height="64px" /></a>';

     _gel('bannerArea').innerHTML = html;
   } 

배너를 셋팅하는 setBanner 함수를 만든다.
prefs에 사용자 설정을 얻어오는 객체를 생성하고,
img, link, tooltip에 데이터들을 받아온다.
<a> 태그의 href 속성에 link를 셋팅하고,
<img> 태그의 src 속성에는 img를, alt와 title속성에는 tooltip을 셋팅한다.
좀 더 이쁘게 보이도록 border는 0으로 했다.
그리고 위에서 만든 'bannerArea' div에 생성한 html을 집어넣으면 된다.

실제 기능을 하는 녀석들은 끝났고, 이제 위젯이 돌아갈때 이녀석을 부르기만 하면된다.

    gadgets.util.registerOnLoadHandler(setBanner);

setBanner를 실행하라는 구문이다.

이로써 기본적인 기능은 끝이다.
참 쉽죠~ 근데 이게 끝이 아니다.
몇가지 예외상황을 처리해줘야 한다.

이글루스에서는 몇몇 레퍼를 차단하고 있었다.
그래서 혹시나 이글루스에 포스팅된 이미지를 이미지 경로에 집어넣으면 이미지가 로딩이 되지 않고 엑박이 떠버린다.

그래서 이런 경우는 걸러줘야 하겠다.
이글루스의 이미지 파일 경로는 http://pds{서버번호}.egloos.com/pds ... 이런식으로 시작하니 이런 경우는 다른 이미지를 띄워주면 되겠다.

  if (img.search('http://pds.*egloos.com/pds.*')  == 0) {
     img = "http://pimg.daum-img.net/widgetbank/img_error.gif";
  }

img 내용중 'http://pds.*egloos.com/pds.* 이런 녀석이 있으면 이미지 로딩 배너로 주소를 재설정해준다.

이글루스의 포스팅 이미지로 이미지 경로를 세팅한경우 이미지 로딩 에러 배너가 나타나고 있다.

문제가 하나 더 생겼다. 일부 사용자들의 경우 http://를 입력하지 않는 경우가 있다.
그래서 그냥 주소만 입력한 경우에는 어휴~
이렇게 링크도 깨지고 이미지도 엑박이 뜬다.

http://로 시작하지 않는 경우는 앞에 http://를 붙여줘야 한다.

   if (link.substr(0, 7) != 'http://') {
      link = "http://" + link;
   }
   if (img.substr(0, 7) != 'http://') {
      img = "http://" + img;
   }

link와 img의 값의 처음 7자리가 http://가 아니면 앞에 http://를 붙여주는 부분이다.
완벽한 수행은 못하겠지만 대부분의 사용자 설정 오류를 잡아줄 것이다.

아래는 완성된 위젯코드

츠암~ 쉽죠잉~
저작자 표시 동일 조건 변경 허락
신고

'일상 > 일터' 카테고리의 다른 글

태극기 휘날리며!!  (2) 2009.07.14
배너위젯 제작법  (4) 2009.04.15
나만의 배너 설정방법  (60) 2009.01.23
톡틴게임 모음 위젯 제작기 Ver. 0.1  (0) 2009.01.06
Trackback 0 And Comment 4

나만의 배너 설정방법

|
나만의 배너 위젯을 설정법을 많이들 모르는거 같아서 포스팅합니다.
간혹 돌아다니다가 나만의 배너 위젯에 기본 이미지가 걸려있는 걸 보면 마음이 아파서 ㅡㅜ




기본 설정화면입니다.
보시다시피 기본이미지와 경로가 셋팅되어 있습니다.

일단 자신의 배너를 적용하려면 배너먼저 제작해야겠죠? 가로 166px, 세로 64px 사이즈로 제작을 합니다. 그리고 주소를 따기위해 어딘가에 올립니다.



저는 제 블로그에 비공개로 포스팅을 했습니다. 뭐 공개로 해도 상관없구요.




글 내용이 보이는 곳에가서 배너 이미지의 주소를 복사합니다.



이제 다시 위젯뱅크 색션에 가서 이미지경로에는 아까 복사한 주소를 붙여넣고, 눌렀을때 이동할 링크경로와 마우스를 가져갔을때 뜨게할 링크이름을 입력합니다.

그리고 퍼가기를 누르면 됩니다.



나만의 위젯이 적용됨 모습입니다.

참 쉽죠?
신고

'일상 > 일터' 카테고리의 다른 글

배너위젯 제작법  (4) 2009.04.15
나만의 배너 설정방법  (60) 2009.01.23
톡틴게임 모음 위젯 제작기 Ver. 0.1  (0) 2009.01.06
나만의 배너 위젯뱅크 등록!!  (4) 2009.01.06
Trackback 0 And Comment 60

나만의 배너 위젯뱅크 등록!!

|
사용자 삽입 이미지

톡틴게임 모음에 이어 나만의 배너도 위젯뱅크에 등록됐다.
만들기도 쉬웠지만 유용한 위젯!!
사이드바에 내 배너나 만들어서 달아야겠다 ㅋㅋ

사용자 삽입 이미지


퍼가기 페이지는 여기에요~
신고
Trackback 0 And Comment 4
prev | 1 | next