게임 개발 소식 위젯 공개합니다.

메인 페이지에 나올 내용을 추가&보관하는 곳입니다...

Moderator: 류광

Post Reply
류광
Posts: 3805
Joined: 2001-07-25 09:00
Location: GPGstudy
Contact:

게임 개발 소식 위젯 공개합니다.

Post by 류광 »

GpgStudy 게임 개발 소식의 최근 항목들을 PHP 등 서버쪽 스크립트를 손댈 필요 없이 블로그 스킨 HTML 코드나 사이트 대문 페이지 HTML 코드만 수정해서 블로그나 사이트에 표시할 수 있는 '위젯'을 공개합니다.

가장 간단하고 기본적인 설치 방법은, 원하는 HTML 페이지에서 소식 항목들을 표시할 위치에 다음 코드를 삽입하는 것입니다.

Code: Select all

<link rel="stylesheet" type="text/css" href="http://gpgstudy.com/news/skin/widget.css" />
<div id="gpgstudy-news" class="gdnw gdnw-250px"></div>
<script type="text/javascript" src="http://gpgstudy.com/news/widget"></script>
참고 사항:
1. 만일 이 위젯 때문에 페이지가 뜨는 속도가 느려 지는 것이 싫다면, <script ... ></script>를 페이지 제일 아래의 </body> 바로 앞으로 옮기세요.
2. 깔끔한 HTML 코드를 원한다면 <link rel=" .. />는 <head> ... </head>로 옮기세요.

커스텀화:
1. <div> 에서 id="gpgstudy-news" 는 변경하면 안 됩니다. 이 위젯은 id가 gpgstudy-news인 요소에 소식 항목들을 채워 넣습니다.
2. class 설정을 변경함으로써 위젯의 모습을 바꿀 수 있습니다. class 에 설정할 수 있는 이름은 다음과 같습니다.

Code: Select all

gdnw        : 위젯 테두리와 전체적인 스타일 설정
gdnw-250px  : 너비가 250픽셀
gdnw-400px  : 너비가 400픽셀
gdnw-600px  : 너비가 600픽셀
gdnw-nowrap : 긴 소식 제목이 줄이 바뀌지 않고 오른쪽에서 잘림
이들의 조합 예 몇 가지가 http://gpgstudy.com/widget_test.php 에 있으니 참고하세요.

3. 위젯 주소(script 태그의 src 특성)에서 소식 항목 개수를 지정할 수 있습니다. 기본적으로 소식 항목이 7개가 나타나는데, 예를 들어 src="http://gpgstudy.com/news/widget?c=10" 으로 하면 열 개가 나옵니다. 역시 http://gpgstudy.com/widget_test.php 에 예가 있습니다.


이와는 전혀 다른 모양을 원한다면 http://gpgstudy.com/news/skin/widget.css 대신 다른 CSS 스타일 시트를 만들어서 적용하면 되겠고요. 참고로 위젯은 div 안에 h3 하나와 ul - li 들로만 구성되어 있습니다.

이상입니다. 아직은 베타 상태이고, 시간이 날 때마다 좀더 다듬을 생각입니다. 혹시 이상한 부분이 있거나 개선할 점(특히 시각적인 디자인;;;)이 있으면 알려 주세요~
Post Reply