'위젯'에 해당되는 글 28건

  1. 2009/07/05 시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!
  2. 2008/10/13 위자드팩토리 위젯으로 블로그를 토핑해볼까? (1)
  3. 2008/10/11 위젯 공유 서비스 위자드 팩토리 런칭 파티 후기 (2)
  4. 2008/09/22 나만의 아날로그 플래시 시계를 직접 만들어 보자. (6)
  5. 2008/09/19 RSS 피드와 위자드닷컴 마이젯을 이용한 위젯
  6. 2008/06/08 심플한 플래시 투표 위젯, TOP10 (8)
  7. 2008/04/13 웹브라우져 시작페이지를 가볍고 깔끔하게... (1)
  8. 2008/01/28 세로형 플래시 이미지 슬라이더. (1)
  9. 2007/12/26 계산식을 입력하는 간변한 플래시 계산기 (5)
  10. 2007/12/02 플래시 밖으로 뛰쳐나온 테트리스 (3)
  11. 2007/11/30 알림이 스타일 위젯과 미니 테트리스 (3)
  12. 2007/11/22 플래시 북마크 버튼 꾸러미 디자인 변경 (5)
  13. 2007/11/19 보아, 문근영, 윤하 플래시 시계 (13)
  14. 2007/11/02 홈페이지정보 블로그, 구글 페이지랭크 순위 상승^^ (1)
  15. 2007/11/01 내 사진으로 만드는 재미있는 플래시 시계 (8)
  16. 2007/10/29 사진첩(갤러리)를 위한 플래시 악세사리 (6)
  17. 2007/10/16 플래시 전광판,슬라이더 위젯 추가사항 (1)
  18. 2007/10/14 블로그 최신글 플래시 위젯입니다.
  19. 2007/10/11 플래시 블로그 위젯 적용 사례 (머드포유) (1)
  20. 2007/09/11 플래시 게임 뉴스 위젯 (1)
  21. 2007/08/23 개선 사항 및 작업 성과 vs 앞으로 하고 싶은 작업
  22. 2007/07/28 다음 웹인사이드 미니 통계툴, 방문자수 그래프 위젯 (6)
  23. 2007/07/26 스타크래프트2 유닛 보기 플래시 위젯 (17)
  24. 2007/07/23 플래시위젯으로만 구성된 재미있는 홈페이지 (4)
  25. 2007/07/19 플래시 이미지 슬라이더 위젯 (1)
  26. 2007/07/17 워크래프트3 유닛 보기 플래시 위젯 (5)
  27. 2007/07/06 웹프로그래머가 만든 블로그 악세사리 14종 (위젯,가젯,소품) (5)
  28. 2007/06/22 RSS 정보를 활용해본 취업 정보 페이지
간단한 시계 가젯을 만들어 보겠습니다. 우선 구글에 로그인하고 구글 가젯 에디터(Google Gadget Editor) 정보 페이지에서 "바로 추가" 버튼을 클릭하면 아이구글(iGoogle)에 가젯을 편집할 수 있는 위젯이 추가 됩니다. 에디터에 아래 보이는 시계 가젯 소스를 입력한 후 적당한 파일명(simpleclock.xml)으로 저장(Save) 하고 발행(Publish) 버튼을 누릅니다.

사용자 삽입 이미지

그리고 "Add to my iGoogle page" 링크를 클릭하면 발행한 가젯을 내 아이구글 페이지에 붙일 수 있습니다. "Publish to iGoogle Directory" 링크를 클릭하면 아이구글 가젯 디렉토리에 발행할 수 있습니다. "Add to a webpage" 링크를 클릭하면 네 홈페이지나 블로그로 가져와서 붙일 수 있는 코드를 생성해 주는 페이지로 이동합니다. 바로 아래 보이는 시계는 완성된 가젯의 코드를 가져와 본 게시물에 코드를 추가해서 보여지는 것입니다. 구글 가젯 개발에 관심이 있는 분은 구글 가젯 API 개발 페이지에서 관련 정보를 확인해보세요.

[시계 가젯 코드 가져와서 띄운 화면]

[시계 가젯을 만들기 위한 소스 코드]
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="HOMPY CLOCK" directory_title="HOMPY CLOCK" description="HOMPY CLOCK" category="tools" screenshot="http://www.hompydesign.com/images/gadget/simpleclock.jpg" thumbnail="http://www.hompydesign.com/images/gadget/simpleclock.jpg" title_url="hompy.info/584" author="hompy" author_email="hompy.info@gmail.com" author_link="http://hompy.info/584" author_location="Korea, Seoul" author_affiliation="hompydesign.com" width="180" height="48" scrolling="false" author_aboutme="web programmer" />
<UserPref name="bgcolor" display_name="배경색" default_value="#99aa99"/>
<UserPref name="datecolor" display_name="날짜색" default_value="#ffffff"/>
<UserPref name="timecolor" display_name="시간색" default_value="darkgreen"/>
<Content type="html">
<![CDATA[
<div id="my_content">
<div id="my_date"></div>
<div id="my_clock"></div>
</div>
<style>
#my_content { font-size : 12px; padding : 5px; background-color:#99aa99;}
#my_date {font-family:verdana,돋음; font-size : 11px; color : #ffffff; padding : 2px; text-align : left; }
#my_clock {font-family:verdana,돋음; font-size : 14px; color : darkgreen; padding : 2px; text-align : center; font-weight : bold; background-color:#ffffff; }
</style>

<script type="text/javascript">
var prefs = new gadgets.Prefs();
function init_clock() {
      var params = {};
      var bgcolor, datecolor, timecolor;
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
      params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 10 * 60;
      bgcolor = prefs.getString("bgcolor");
      datecolor = prefs.getString("datecolor");
      timecolor = prefs.getString("timecolor");
      document.getElementById('my_content').style.backgroundColor = bgcolor;
      document.getElementById('my_date').style.color = datecolor;
      document.getElementById('my_clock').style.color = timecolor;
      print_hour();
      window.setInterval("print_hour()", 100);
}

function print_hour(){
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth()+1;
      var date = today.getDate();
      var hour = today.getHours();
      var min = today.getMinutes();
      var sec = today.getSeconds();
      document.getElementById('my_date').innerHTML = year + '-' + get_number_str(month) + '-' + get_number_str(date);
      document.getElementById('my_clock').innerHTML = get_number_str(hour) + ':' + get_number_str(min) + ' ' + get_number_str(sec);
}

function get_number_str(num){
      if (num<10) num = '0' + num;
      return num;
}

gadgets.util.registerOnLoadHandler(init_clock);
</script>
]]>
</Content>
</Module>

[구글 가젯 에디터]

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/584
2009/07/05 17:03 2009/07/05 17:03

댓글을 달아 주세요