Devil on the cream

티스토리 플래시 네비게이션 [spin tistory navigation] update

분홍뺨 — Fri, 07 Jan 2011 05:53:20 +0900

+ 업데이트
관리 안하는 블로그인데도 여전히 찾으시는 분들도 계시고 검색해서 오시는 분들도 많으셔서
(업데이트 안한지 횟수로 무려..2년된 블로그인데-_-;)
제가 테스트 해보고 안되는 부분 설정과 파일을 새로 업데이트 했습니다.

[Flash] http://acream.tistory.com/attachment/48e9d75a573016N.swf

[Flash] http://acream.tistory.com/attachment/48e9d75ae163a62.swf

적용 예제는 수정하지 않아서 이전 메뉴의 소스로 되어 있습니다.
이 포스팅에 업데이트한 내용은 설정시 주의할 점과 파일 첨부뿐입니다.
티스토리 플래시 네비게이션 [spin tistory navigation]으로 가시면
새관리와 새글쓰기 수정 설정이 있습니다.
(사이드 적용 방법도 원문에 보시면 모두 있습니다.)

a 네비게이션 파일 은 압축파일(zip)로 업데이트 하고 위의 적용 예제 를 텍스트 파일(txt)로 첨부 했습니다.

   압축 푸시면 .swf 파일와 ex.txt가 나옵니다. .swf 파일은 스킨 편집에서 파일업로드 하시고,
    ex.txt는 열어서 복사하셔서 skin.html 설정할 부분에 붙여넣어주시면 됩니다.

b 새메뉴에서 안될 경우, skin.html을 복사해서 이전메뉴 skin.html에 붙여넣으세요.

   이전메뉴 일때 만들어서 소스가 예전것인 부분이 있어 그런지,
   저는 새관리에서 수정하면 사이드메뉴가 깨지더군요.
   혹시 안되시면 한번 이전관리 메뉴 (http://사용자.tistory.com/owner/skin/edit) 에서 해보세요.

c 적용예는 cool with simple (spin_tnv_cs_by_cream_ahnma) 컬러로 되어 있는습니다.

   바꾸실 분은 한번 더 언급하지만, spin_tnv_컬러_by_cream_ahnma '컬러' 를
   'cs' 혹은 'pd'로 바꾸세요.

d 절대 .swf 확장자 붙이시면 안됩니다.

   다른 이름으로 저장하셨다면 적용 예에서 파일이름만 바꾸셔야 합니다.
   나비.swf로 저장하셨다면 아래처럼만 바꾸면 됩니다.

<div id="sidebar">
        <s_sidebar>
<s_sidebar_element>

<div class="navigation" id="navigation" align="center"><script type="text/javascript">
            AC_FL_RunContent(
                "classid","clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",
                "codebase","http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0",
                "width" , "220",
                "height" , "280",
                "id" , "uploader",
                "wmode", "transparent",
                "movie", "./images/나비",
                "allowScriptAccess", "always",
                "flashvars", "externalData=&externalData2=login&externalData3=&externalData4=&externalData5=&externalData6=media&externalData7=archive&externalData8=owner/entry/post&externalData9=owner&yesterday=&total=&today="
            );
</script></div>
</s_sidebar_element>

다운로드)

cool with simple
pastel with dark

로딩 이미지 만들기 [ Ajax loding gif generator ]

분홍뺨 — Thu, 30 Oct 2008 18:08:23 +0900

라이트박스를 자신의 입맛에 맞게 스타일을 바꾸려고 할 때나,
플래시 등 이미지를 만드려고 할 때, 이러한 로딩 이미지가 필요할 거라 생각됩니다.

gif 확장자로 레이어를 여러개 만들어 이미지 편집 프로그램으로 만들어도 어려운 일은 아닙니다만,
애니메이션 이미지의 경우, 하나하나 만들어 모두 적용해야 하니 좀 귀찮은 일이 아니지요.
일반적으로 쓰이는 로딩 이미지 경우에는, Ajax loding gif generator 를 이용하시는 게 더욱 편리합니다.
원하는 색상과 모양대로 바로바로 생성이됩니다.

사용 방법)

a. Ajax loding gif generator(http://www.ajaxload.info)로 가면 위와 같은 페이지가 보입니다.

b. 로딩 이미지를 만드는 데 필요한 부분은 좌측에 노란박스로 되어 있는 Generator와
붉은박스로 되어 있는 Preview입니다.

c. 먼저 노란박스의 Indicator type의 선택 항목을 열어보면 여러가지 로딩 이미지가 보입니다.
여기서 원하시는 이미지를 선택하시면 됩니다.

d. Background color와는 바탕색이고, Foreground color는 로딩이미지의 색상입니다.
여기서 원하시는 대로 배경과 이미지의 색상을 지정하실 수 있습니다.
컬러코드가 쓰여 있는 항목칸에 마우스의 커서를 놓으면, 자동으로 색상을 고를 수 있는 스크립트가 뜹니다.
마우스를 움직여 컬러피커의 십자 모양을 원하는 색상에 놓으시면 코드가 생성됩니다.

e. Transparent background는 배경을 투명하게 나타내는 것입니다.

투명 기능을 사용할 때는 배경 이미지 색상과 동일하게 바탕색을 지정하셔야 합니다.
로딩 이미지 자체에 투명하게 표현되는 부분이 있기 때문에 배경 색상이 있을 때,
동일한 색상을 사용하지 않으시면 경계가 보여 깨끗하게 표현되지 않습니다.

예)

1. 배경 색상과 동일한 색상을 바탕색으로 지정

2. 배경 색상과 다른 색상을 바탕색으로 지정

f. 원하는 대로 모두 지정하신 후, Generate it!을 클릭합니다.
그러면 Preview에 지정한 대로의 이미지가 뜹니다.
바로 아래, Download it!을 클릭하면 이미지가 저장됩니다.

Ajax loding gif generator로 만들어 본 기타 로딩 이미지입니다.

유료, 무료 프로그램 다운로드 [SoftPedia]

분홍뺨 — Fri, 17 Oct 2008 05:32:25 +0900

SoftPedia(http://www.softpedia.com)는 유료,무료,애드웨어, 트라이얼 데모 등의
여러가지 프로그램과 플러그인 기타 소스 등등을 사용자가 사용 후 별점을 주기도 하고,
어워즈를 하기도 하는 등 다양하게 프로그램을 소개해 주는 일종의 중개 사이트 같은 곳입니다.

카테고리 별로 들어가면 소프트의 크기, 라이센스, 운영 체제, 다운로드 횟수, 별점 등을 볼 수 있습니다.

프로그램 찾는 방법)

+ 순위를 둔 것은 주관적이고 내용도 쉬운 내용이니 그냥 지나치셔도 상관 없습니다.
찾는 방법이라기 보다는 추천쪽이 맞을 것 같네요. 그보다 자신의 주관대로 하는 편이 가장 좋습니다.

① License.
무엇보다 받으려는 소프트가 무료냐, 유료냐가 아마도 가장 중요할 것입니다.
장기적으로 쓸 프로그램이라면 유료라도 상관없겠지만,
급히 한번 쓸 정도의 프로그램이라면 무료인 것으로 찾아야 할 테니까요.
유료인 프로그램의 경우에 자신에게 맞지 않아 사용이 불편할 수도 있으니,
2주에서 한달 정도 사용할 수 있는 트라이얼 버전을 먼저 사용해 보셔야 합니다.

② Editor's pick
Editor's pick을 두번째로 꼽은 이유는 다운로드 횟수 대비 별점을 어느 정도 맞춰 추천하기 때문인데요.
다운로드 횟수가 낮아도 Editor's pick이라고 되어 있는 소프트의 경우엔 추천할만한 이유가 있었던 것 같아요.
항상 그렇다는 것은 아닙니다.
오히려 새로운 버전이 나왔는데도 이전 버전에 Editor's pick이 되어 있을 수도 있고,
Editor's pick도 있고 다운로드 횟수도 높지만, 자신과는 맞지 않는 경우도 있을 수 있습니다.

③ Rating
다운로드 횟수와 별점이 모두 높은 프로그램이 당연히 좋겠죠.
등록일을 기준으로 다운로드 횟수와 대비해서 판단하는 편이 나으실 겁니다.
신규 소프트의 경우, 다운로드 횟수 대비로 보면 그다지 별점이 도움되지 않을 수 있습니다.

④ Download
역시 별점과 마찬가지로 등록일을 기준으로 보셔야합니다.
같은 카테고리 안에서, 등록일 대비 다운로드 횟수가 더 높은 쪽이 좋겠죠.
그러나 버전 별로 볼 때, 업그레이드가 한동안 되지 않아서 예전 버전의 횟수가 더 높을 수도 있습니다.

⑤ Screenshot
스크린샷은 광고적인 의미도 있겠지만, 어떠한 식으로 사용하는 지를 미리 알아 볼 수 있습니다.
예를 들어, 노트 프로그램을 받으려고 할 때 쓰고 싶은 스타일의 서식이나 메뉴가 있을 것입니다.
복합적인 것인지 심플한 것인지, 그런 것과 더불어 쓰고 싶은 인터페이스인지도 미리 확인하실 수 있습니다.

⑥ Size
사실 모든 조건이 다 맞아도 파일의 크기가 너무 커서 프로그램 실행이 힘들다면 안되겠죠.
어떤 때는, 제가 가장 중요하게 생각하는 부분이기도 합니다.
버벅대는 정도는 아니라도, 실행하는 프로그램이 많다면 조금이라도 작은 편을 선호할 것입니다.
어느 정도의 기준치를 두고 그 크기 이하인 프로그램을 찾는 방법이 좋을 것 같습니다.

Editor's pick이나 User Rating에 너무 신경을 쓰다 보면, 알맞는 프로그램인데도 지나쳐버릴 수 있습니다.
괜찮다는 생각이 든다면 그냥 받아서 깔아보고 마음에 안 들면 지워도 상관은 없지만,
윈도우 설치를 자주 하지 않는 경우에는 상세 설명이나 스크린샷을 보는 게 더 도움이 됩니다.
프로그램 설치를 잘못 할 때, 최악의 상황은 윈도우를 재설치 해야 할 수도 있습니다.
데모 버전이나 베타 버전은 상황이 될 경우 버그리포트 같은 것을 미리 읽어주시는 편이 좋습니다.

다운로드 방법)

a. 원하는 프로그램을 클릭하면 상세 설명 페이지가 나옵니다.
좌측에 미리보기 이미지와 함께 저런 다운로드 이미지가 있습니다. 다운로드 이미지를 클릭하세요.

b. 페이지가 넘어와 광고들과 함께 우측에 하늘색 박스 안에 위와 같은 내용이 뜹니다.
보통 저런 식으로, 혹은 US와 RU 버전으로 링크가 되어 있습니다.
가끔 깨진 링크도 있을 수 있지만, 저 링크가 안 된다고 다른 것을 클릭하지 마세요.
다른 것들은 다 광고거나 다른 카테고리로 넘어가는 링크입니다.

+ 보통 install 방법으로 되지 않는 경우, 앞 페이지에 상세 설명을 읽어보세요.

소개라기 보다는 다운로드 받는 방법을 위한 포스팅이었습니다.
다운로드는 어려울 게 전혀 없지만 다른 포스팅에 Softpedia 링크를 걸려고 하다보니,
지인께서 자세히 읽지 않고 모르겠다고 헤메셨던 것이 기억나 다운로드 방법을 포스팅해보았습니다.

외국(영어로 된) 사이트는 익숙해지면 어느 사이트고 금새 적응이 되지만,
이용이 익숙하지 않을 때는 광고가 많다보니 어떤 링크를 클릭해야 하는 지 모를 수 있습니다.
여러 프로그램을 사용하는데 조금이나마 도움이 되었으면 좋겠습니다.

+ SoftPedia에서 영어버전으로 되어 있는 프로그램도 국내 자료실에는
한글 플러그인이나 언어팩이 있을 수도 있으니 함께 찾아 보시는 것이 좋습니다.

단축 검색 (키워드 검색) [ Opera / Internet Explorer / Firefox ]

분홍뺨 — Fri, 17 Oct 2008 05:29:31 +0900

스스로도 오페라 유저라고 할 만큼 십중팔구는 오페라를 쓰지만 종종 익스와 파폭을 필요로 합니다.
그런데 다른 브라우저를 쓰다 보면 오페라의 편한 기능 때문에 불편하게 느껴지기도 하는데요.
속도는 어떻게 안되더라도 검색 환경은 오페라와 비슷하게 만들 수 있습니다.(익스는 트윅을 해도 그다지 정이....

)
그래서 오페라, 익스플로러, 파이어폭스의 검색 기능을 좀 더 막강하게,
혹은 게으름에 찌들어서

더더욱 편하게 쓸 수 있는 방법들입니다.

+ 키워드 검색을 미리 알고 계셨던 분은 사용 방법도 당연히 알고 계시겠지만,

모르셨던 분은 사용 방법을 모르실 수도 있을 것 같아 추가합니다.

키워드 검색은 "단축키+검색내용"으로 주소 표시줄에서 검색할 수 있는 방법입니다.

예를 들어 구글이 g라는 단축키로 설정되어 있고, 'download'를 검색하려고 한다면,

주소 표시줄에 'g download'를 타이핑하고 엔터를 칩니다.

그러면, 곧바로 구글의 검색 페이지가 'download' 검색 결과 페이지로 넘어갑니다.

네이버는 n, 야후는 y라고 설정되어 있다면, 'n download' 또는 'y download' 등으로,

설정하신 숏컷키를 앞에 붙인 뒤 스페이스를 한칸 떼고 검색 내용을 주소표시줄에 치시면 됩니다.

단축 검색(키워드 검색)
A. Opera 9.6 or before version
B. Internet Explorer 7 or before version
C. FireFox 3.0.3 or before version

A. Opera 9.6 or before version

설정 방법)

a. 메뉴 > 도구 > 환경설정을 클릭하시면 환경설정 대화상자가 뜹니다.
검색 탭으로 가서 추가를 클릭하세요.

b. 이름, 키워드, 주소를 넣으시면 단축 검색키가 됩니다.

* 기본 & 스피드 연결 검색 엔진

a. 자세히를 클릭하시면, 하단에 '기본 검색엔진 사용'과 '스피드 연결 검색엔진' 항목이 보입니다.
b. 원하시는 검색 엔진에서 항목을 체크하세요.

+ 구글을 스피드 연결 검색 엔진으로 사용했을 경우 이와 같이 바뀝니다.

설정 내용)

검색 엔진 URL에 넣는 주소 중 기본 검색과 사전 몇 가지를 알려드리려고 합니다.

네이버

http://search.naver.com/search.naver?where=nexearch&query=%s&fr=opera2

http://search.daum.net/cgi-bin/nsp/search.cgi?q=%s

엠파스

http://search.empas.com/search/all.html?q=%s

네이버 영어사전

http://endic.naver.com/search.nhn?query=%s&fr=opera2

야후 통합사전

http://kr.dictionary.search.yahoo.com/search/dictionaryp?subtype=all&p=%s

주소대로 넣으시고 원하시는 단축 키를 사용하시면 됩니다.

구글 검색 결과 페이지 수

http://www.google.com/search?q=%s&sourceid=opera&num=페이지 수%i&ie=utf-8&oe=utf-8

적용 예:

이름 Google
키워드 g
주소 http://www.google.com/search?q=%s&sourceid=opera&num=50%i&ie=utf-8&oe=utf-8

구글로 검색할 때 결과 페이지 수를 설정하는 주소입니다.
페이지 수 부분을 원하시는 대로 바꿔서 넣어주세요.

한국 위키피디아

http://ko.wikipedia.org/w/wiki.phtml?search=%s

중국 위키피디아

http://zh.wikipedia.org/w/wiki.phtml?search=%s

일본 위키피디아

http://ja.wikipedia.org/w/wiki.phtml?search=%s

일본 사이트 번역

http://translate.ocn.ne.jp/LUCOCN/c3/hm_ex.cgi?SURL=%s&XTYPE=1&SEARCH=T&SLANG=ja&TLANG=ko

네이버 통합사전

http://dic.naver.com/search.nhn?query=%s&ie=utf8

위의 주소대로 설정 하신 뒤, C:\Documents and settings\사용자\Application Data\Opera\Opera\profile 폴더 안에 search.ini를 아래처럼 고쳐주셔야 합니다.
프로그램 폴더 안의 오페라 profile이 아니라 사용자의 오페라 profile 폴더 안의 search.ini여야 합니다.
(profile 경로는 오페라 주소창에 opera:about이라고 타이핑하시면 나오는 페이지에서 알아보실 수 있습니다.)

[Search Engine 15]
UNIQUEID=02EA2EBC96547E40828B682EA257C111
Name=Korean Wikipedia
Verbtext=0
URL=http://ko.wikipedia.org/w/wiki.phtml?search=%s
Query=
Key=k
Is post=0
Has endseparator=0
Encoding=utf-8
Search Type=0
Position=-1
Nameid=0
Deleted=0

[Search Engine 16]
UNIQUEID=0F9E81CFD576C14FB88EBC6B27C14062
Name=Translate JaToKo
Verbtext=0
URL=http://translate.ocn.ne.jp/LUCOCN/c3/hm_ex.cgi?SURL=%s&XTYPE=1&SEARCH=T&SLANG=ja&TLANG=ko
Query=
Key=jj
Is post=0
Has endseparator=0
Encoding=utf-8
Search Type=0
Position=-1
Nameid=0
Deleted=0

설정에 따라 다를 수도 있지만, 대부분 인코딩 기본값은 euc-kr로 저장됩니다.
그냥 쓰시면 영어 검색은 되지만 한글 검색이 안됩니다. 이것을 utf-8로 고쳐주시면 적용됩니다.
마찬가지로 일본과 중국 위키피디아와 네이버 통합사전도 인코딩만 고쳐주시면 사용하실 수 있습니다.

B. Internet Explorer 7 or before version

설정 방법)

a. 시작 > 실행(windows + R) > regedit라고 타이핑을 하신 후 확인을 클릭하시면 레지스트리 편집기가 뜹니다.

b. HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl을 찾습니다.

c. SearchUrl에서 우클릭 > 새로 만들기 > 키를 클릭합니다.

d. 새 키의 이름을 사용할 숏컷키로 바꿉니다.

e. 우측 탭에 생긴 키를 더블클릭 합니다.

f. 값 데이터에 검색 엔진 주소를 넣고 확인을 클릭합니다.

설정 내용)

값 데이터에 넣을 기본 국내 검색과 사전 주소입니다.

구글

http://www.google.com/search?ie=euc-kr&oe=euc-kr&q=%s&num=20

야후

http://kr.search.yahoo.com/search?fr=kr-front_sb&KEY=&p=%s

네이버

http://search.naver.com/search.naver?where=j&query=%s

엠파스

http://search.empas.com/search/all.html?z=A&q=%s&a=w&s=&f=

http://search.daum.net/search?t__nil_searchbox=btn&w=tot&sType=tot&q=%s

야후 통합사전

http://kr.dictionary.search.yahoo.com/search/dictionaryp?subtype=all&p=%s

네이버 영어사전

http://endic.naver.com/search.nhn?query=%s

레지스트리 파일로 백업해서 사용하시면 윈도우를 다시 설치하셔도 편리하게 쓰실 수 있습니다.
원하시는 숏컷키를 설정하시고 사용하시면 됩니다.

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\g]
@="http://www.google.com/search?ie=euc-kr&oe=euc-kr&q=%s&num=20"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\y]
@="http://kr.search.yahoo.com/search?fr=kr-front_sb&KEY=&p=%s"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\n]
@="http://kinsearch.naver.com/search.naver?where=kin&query=%s"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\e]
@="http://search.empas.com/search/all.html?z=A&q=%s&a=w&s=&f="

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\d]
@="http://search.daum.net/search?t__nil_searchbox=btn&w=tot&sType=tot&q=%s"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\yy]
@="http://kr.dictionary.search.yahoo.com/search/dictionaryp?subtype=all&p=%s"

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\nn]
@="http://endic.naver.com/search.nhn?query=%s"

삭제를 원할 때는 이런 식으로 삭제할 숏컷키만 쓰셔서 사용하시면 됩니다.

Windows Registry Editor Version 5.00

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\g]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\y]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\n]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\e]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\d]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\yy]

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchUrl\nn]

설정 방법)

a. notepad에 위 내용을 복사해서 붙여넣습니다.

b. 확장자를 .reg로 저장합니다.

c. 저장한 파일을 실행(더블클릭)합니다. 삭제시에도 마찬가지로 하시면 됩니다.

예제 다운로드)

search_off_by_cream_ahnma.reg

search_on_by_cream_ahnma.reg

+ 숏컷키를 바꾸시지 않고 예제대로 사용하시려면 search_on_by_cream_ahnma.reg을 그냥 실행하시면 됩니다.

C. FireFox 3.0.3 or before version

* 먼저 Download를 클릭 후 나오는 페이지에서 OpenSearchFox 0.1.5를 다운로드 받으세요.
다운받는 방법을 모르시는 분은 프로그램 다운로드 [SoftPedia]를 참고하세요.

설정 방법)

a. 파폭에서 OpenSearchFox 확장기능을 설치 후 재가동합니다.

b. 추가하시려는 검색 엔진 메인 페이지에서 검색 박스에 커서를 놓고 우클릭 하시면
'검색 도구에 추가하기' 항목이 보입니다. 클릭하세요.

c. 이름과 설명, 아이콘을 설정할 수 있는 대화 상자가 뜹니다. 설정 후 다음을 클릭하시면 완료됩니다.

d. 파폭 검색엔진 옵션 메뉴를 클릭하면 '검색 사이트 관리' 항목이 보입니다. 클릭하세요.

e. 검색 사이트 목록 관리 대화상자에서 '키워드 편집'을 클릭하시면 위와 같은 대화 상자가 뜹니다.
사용하실 숏컷키를 넣으시고 확인을 클릭하시면 됩니다.

+ 브라우저의 숏컷키를 통일시키면 어떤 브라우저를 써도 편하게 검색 할 수 있습니다.
저는 겹치는 이니셜의 경우, 야후는 y, 야후 사전은 yy 이런 식으로 하나씩 추가했지요
빨리 검색하기 위한 단축 키이니 꼭 다른키로 할 필요는 없을 것 같아요.

파폭은 확장 기능을 설치해야 하지만, 한글도 문제없이 잘 검색되고 설정이 가장 쉬운 편이었습니다.
오페라도 쉽지만, 어렵다고 하면 파폭보다는 어렵게 느껴질 수도 있을 것 같네요.
익스는 레지 편집이 익숙하신 분은 쉽겠지만, 모르시는 분께는 어려울 수 있을 것 같습니다.

오페라, 익스, 파폭에 운좋은 예감도 설정하시려면 Google 운좋은 예감 (주소표시줄 검색)에서 확인하세요.

Google 운좋은 예감 (주소표시줄 검색) [ Opera / Internet Explorer / Firefox ]

분홍뺨 — Fri, 17 Oct 2008 05:29:12 +0900

구글의 운좋은 예감 서비스를 주소 표시줄에서 바로 검색하는 방법입니다.
따로 편집해야 할 소스나 추가할 플러그인이 필요없고, 브라우저 자체에서 간단하게 설정하실 수 있습니다.

+ 운좋은 예감은 많이 방문하는 사이트나 국가 기관, 기업 등의 사이트를
com이나 www 을 타이핑 하지 않고, 단어 검색만으로 바로가는 서비스입니다.

구글-운좋은 예감 / Google-I'm Feeling Lucky™ (주소표시줄 검색)
A. Opera 9.6 or before version
B. Internet Explorer 7 or before version
C. FireFox 3.0.3 or before version

A. Opera 9.6 or before version

설정 방법)

a. 오페라 주소창에 아래처럼 타이핑하시고 엔터를 치세요.

Opera:config#network

b. 주소대로 가면 위와 같은 페이지가 나옵니다.
위에 표시해 둔 Enable HostName Web Lookup 항목을 체크하세요.

c. HostName Web Lookup Address에 아래 주소를 넣어 주세요.

http://www.google.com/search?hl=ko&q=%s&btnI=I'm+Feeling+Lucky

d. 하단에 저장을 클릭하시고 오페라 브라우저를 종료 한 뒤, 재가동 하시면 적용됩니다.

B. Internet Explorer 7 or before version

설정 방법)

a. 좌측 상단 검색 옵션 메뉴에서, 추가 검색 공급자 찾기를 클릭합니다.

b. Internet Explorer 에 검색 공급자 추가 페이지가 나오면,
노란색으로 된 박스 이미지 안에 URL과 Name을 채울 수 있는 칸이 보입니다.

c. URL에 아래의 주소를 넣어주시고 사용할 Name을 적당히 채워준 뒤, 설치를 클릭합니다.

http://www.google.com/search?hl=ko&q=TEST&btnI=I'm+Feeling+Lucky

d. 검색 공급자 추가 대화상자가 뜹니다.
대화상자에서 '이 공급자를 기본 검색 공급자로 지정' 항목을 체크 후 공급자 추가를 클릭합니다.

e. 주소 표시줄에서 www나 com없이 검색하여 주소로 넘어가는 지 확인하시면 됩니다.

C. FireFox 3.0.3 or before version

설정 방법)

a. 주소 표시줄에 아래 내용을 입력한 뒤 엔터를 칩니다.

about:config

b. 탭 아래 생긴 필터(I): 옆 빈 칸에 아래 내용을 입력합니다.

keyword.URL

c. 위와 같이 나온 내용을 더블 클릭합니다.

d. '문자열 값 입력' 대화 상자가 뜨면 주소를 쓸 수 있는 칸이 나옵니다.
그 칸 안에 아래의 주소를 입력합니다.

http://www.google.com/search?hl=ko&btnI=I'm+Feeling+Lucky&q=

e. 주소 표시줄에서 마찬가지로 www나 com없이 검색하여 주소로 넘어가는 지 확인하시면 됩니다.

단축 검색 기능을 먼저 설정하신 경우에는 굉장히 쉬운 설정이라 느끼실 겁니다.
오페라, 익스, 파폭에 단축 검색 기능도 설정하시려면 단축 검색 (키워드 검색)에서 확인하세요.

RSS Widget [Opera Widgetize - Feed Reader]

분홍뺨 — Sun, 12 Oct 2008 17:31:25 +0900

RSS Widget [Opera Widgetize - Feed Reader]

오페라 사용자를 위한 Feed Reader 위젯입니다.
저는 베너를 만들어서 오페라 9 다운로드와 함께 티스토리 블로그에 링크해 놓았는데요.

오페라 사용자가 이 피드 리더를 클릭하면 이러한 위젯이 추가됩니다.

말 그대로 피드를 읽어오는 리더기 같은 동작을 합니다.
오페라 유저들에게 좀 더 편하게 구독을 할 수 있는 환경을 구축해 줍니다.
그럼 먼저, 이 오페라 위젯을 어떻게 만들어야 하는가를 알려드리겠습니다.

A. 위젯 만들기.

1. Feed reader 위젯 사이트로 가기.

오페라 사용자라면 누구나 패널바를 사용하실 겁니다.
패널바에는 이런 식으로 북마크, 방문목록 등 여러 패널이 있는데,
그 중에 위젯 패널을 열어 보시면 위와 같은 메뉴가 보입니다.
(사용자가 추가한 버튼에 따라 다를 수도 있습니다.)

이미지와 같이 추가에서 새 위젯을 클릭하면 오페라 위젯 사이트가 열립니다.

+ 만약 아직 마이오페라에 가입 하지 않으셨다면 가입을 하셔야 위젯 사이트도 사용하실 수 있습니다.

친절히 영어를 싫어하시는 분을 위한 가입 방법.

2. Widgetize로 들어가기.

가입이 되었다면 로긴을 하시고 오페라 위젯으로 들어갑니다.
상단에 Widgets, Widgetize, FAQ 등의 네비가 보입니다.
Widgetize를 클릭해서 들어갑니다.

3. 위젯 만들기 시작.

widgetize의 메인 페이지가 나옵니다.
여기서 녹색의 create a widget 버튼을 클릭합니다.

4. 위젯 타입 고르기.

step 1으로 넘어와 위젯 타입을 고르고, I want this type!을 클릭하세요.
우측을 보시면 미리보기가 나옵니다. 원하시는 타입으로 고르시면 되지만,
classic은 이상하게 느리고 잘 작동이 안되서 advanced모드로 추천합니다.
피드리더 외에 갤러리 뷰어도 있는데 마이오페라,플리커,유튜브만 사용 가능합니다.

5. 위젯 꾸미기.

step 2 단계로 넘어와 위젯을 꾸미는 페이지가 나옵니다.

1번 타이틀을 원하시는 대로 채웁니다.
타이틀은 추가되는 위젯의 상단에 표시되고 위젯 목록의 이름으로 쓰입니다.

2번 피드주소를 넣습니다.
마이오페라 홈을 사용하신다면 유저네임을 쓰시면 되고,
저처럼 다른 피드를 사용하시면 아래칸에 feed url을 모두 넣어주세요.
저는 피드버너의 rss 서비스를 사용하므로 그 url을 넣었습니다.

3번 스킨을 고릅니다.
이번에는 블로그에 사용 중인 스킨과 달리 파란 하늘 스킨을 골라보았습니다.
마찬가지로 우측에 미리보기가 뜹니다. 애니메이션으로 최소화와 펼친화면이 모두 나옵니다.
마음에 드는 스킨을 고르셨다면 Make my widget!을 클릭합니다.

6. 테스트 및 완료.

step3이 나오면 설정이 모두 완료된 상태입니다.
아래 try this widget을 클릭하시면 위젯이 추가됩니다.

B. 티스토리에 삽입하기.

1. 소스 카피.

step3에서 만들어진 소스를 하나 골라 복사합니다.
베너가 있는 소스를 하나 골랐습니다.

2. 삽입하기.

사용자모드 > 스킨 편집 > skin.html에서 사이드에 넣거나 푸터에 넣어줍니다.
만들어진 소스를 가운데 삽입하시려면 center를 넣고 테두리 선이 나오지 않도록 border=0를 붙입니다.
베너를 직접 만들어 넣을 실 때는 이미지를 직접 업로드한 후 img src=이미지주소 를
업로드한 이미지 주소로 바꾸어 줍니다.

적용 예)

3. 테스트 및 완료.

만들어진 소스를 스킨에 한번 붙여 보았습니다.
이런 식으로 아래에 추가된 것이 보이실 겁니다.
추가까지 성공하셨다면 확실히 작동되는 지 클릭해 보세요.
처음 테스트 할 때 처럼 위젯 다운로드가 뜬다면 성공입니다.

오페라 위젯이기 때문에 파폭이나 익스에서 클릭하시면 이런 페이지가 나옵니다.

* 위젯 사용 방법

위젯 링크를 클릭하면 이러한 대화 상자가 뜹니다.
위젯 저장 대화상자에서 예를 클릭하세요.

위에서 고른대로 하늘 이미지 스킨의 위젯이 떴습니다.
넣은 타이틀이 표시되고 우측에 3개의 버튼이 보입니다.
발행 글 갯수와 위젯 링크, 닫기 버튼입니다.

이미지를 클릭해 보시면 상세 설명을 보실 수 있습니다.

* RSS 버튼

오페라 베너를 그대로 사용했지만, 원래 그대로 사용하길 거부하는
커스터마이징 세대(?)라서 RSS 버튼으로 바꾸고 싶은데 또 시간 들이기가 귀찮네요.
그러다가 rssbuttons라는 사이트를 발견했는데, 간단히 만들기에 좋은 것 같아요.

이미지를 클릭해 보시면 상세 설명을 보실 수 있습니다.

적용 예)

C. 위젯 구독 확인.

피드버너 가입자라는 전제하에 설명합니다.

피드버너 사이트로 갑니다.

마이 피드로 들어가시면 첫화면에 자신의 블로그 타이틀이 보입니다.

타이틀을 클릭하시면 analyze가 보입니다. 여기서 좌측의 subscribers를 클릭하세요.
우측에서 구독 상태를 일별, 주별, 전체 상태 별로 선택하여 보실 수 있습니다.

파이와 표 모양으로 구독자가 어떤 구독 서비스로 구독하는 지 상세히 설명하고 있습니다.

상태를 원데이로 놓고 어느 하루를 클릭했습니다.
세명의 구독자가 있는데, 오페라 위젯 구독자가 두명이라고 표시 된 것이 보입니다.
마찬가지로 리스트 표에도 오페라 구독자가 표시되어 있음을 알 수 있습니다.

드디어 끝났습니다
내용이 너무 길어서 접을까 따로 자를까 고민을 좀 했었지요.
그냥 보시라고 펼쳤지만 아마도 스크롤의 압박이....
아무튼 오페라 유저에게 도움이 되는 위젯이었길 바랍니다.
오페라 유저가 아니신 분도 오페라를 사용하셨으면 하는 맘도 있고요.
혹자는 다른 브라우저 유저보다 오페라 유저들이 애정이 좀 더 깊다고 하더군요.
저도 이런 것까지 하고 있으니 반박은 못하겠네요.
9.6으로 업글도 했으니 오페라 팁도 좀 올려야 겠습니다.

Lightbox 대용 이미지갤러리 [Lytebox v3.22] - ② 포스팅에 사용하기

분홍뺨 — Wed, 08 Oct 2008 14:17:55 +0900

Lightbox 대용 이미지갤러리 [Lytebox v3.22]
- ② 포스팅에 사용하기

포스팅에 Lytebox 적용하는 방법도 복잡하지는 않지만
wysiwyg에서는 되지 않으니 복잡하다고 느끼실 수 있습니다.
모드를 자주 변경해서 글을 쓰실 경우 마지막에 노트패드에 html 내용을
붙여서 한번에 수정하시는 게 가장 편하실 겁니다.
사실 Lytebox 자체가 티스토리에 그렇게 적합한 것 같지는 않습니다.
html 모드에서 적용하셔야 오류없이 작동됩니다.

A. 이미지를 하나만 넣을 때.

적용 방법)

1. 이미지 파일을 업로드 하시고 삽입하시면 보통 이러한 소스가 생성됩니다.

2. 이미지를 썸네일로 이용해서 띄우시려면 작게 조절하시고, 테두리 선을 0으로 설정합니다.

+ wysisyg모드에서 이미지 사이즈를 적당히 조절해 보시고 html모드로 넘어가세요.

3. 이미지 주소대로 링크를 만들어 주시고. rel과 title을 포함합니다. rel은 필수사항입니다.

4. 먼저 만든 이미지 소스와 링크 소스를 '<a href=띄울 이미지><img src=링크할이미지> <a/>' 로 넣어주세요.

- 링크를 띄울 이미지가 아닌 텍스트나 다른 이미지로 대체하시려면 다음처럼 넣어주세요.

텍스트 링크

다른 이미지 링크

html 모드에서 wysiwyg 모드로 변경하시면 소스가 변경되서 오류가 생길 수 있습니다.
html모드에서 바로 저장하 셔야 정상적으로 동작합니다.

썸네일 적용 예)

+ 저는 작은 사이즈의 이미지를 따로 업로드하여 썸네일 이미지로 사용했습니다.

B. 이미지를 여러개 넣을 때.

적용 방법)

1. 그룹화 시키는 것은 링크 소스 rel 뒤에 그룹 이름을 넣으면 됩니다.
하나 일 때 넣었던 링크 소스에 [그룹 이름]이라는 내용을 아래처럼 붙여줍니다.

2. 하나일 때 썼던 그대로, 여러개의 이미지에 하나의 그룹이름을 부여해 줍니다.
다른 이미지를 여러개 붙이면 하나의 창으로 여러개의 이미지를 볼 수 있습니다.
싱글 이미지 예제와 마찬가지로 섬네일로 넣을 수도 있고 텍스트로 넣을 수도 있습니다.

- 링크를 굳이 여러개 넣지 않아도 이런 식으로 하나만 띄워서 다른 이미지를 함께 볼 수 있습니다.

썸네일 적용 예)

+ 저는 하나의 썸네일만 업로드하고, 다른 이미지를 붙였습니다.

C. 여러개의 이미지를 슬라이드쇼로 넣을 때.

적용 방법)

1. 이미지를 여러개 넣을 때 방법과 거의 동일합니다.
그룹화 하는 방법대로 사용하시면 되지만, lytebox라고 되어 있던 rel을 lyteshow로 바꿔주셔야 합니다.

a href="이미지" rel="lyteshow[그룹 이름]" title="타이틀"

2. 그룹화와 마찬가지로 이미지 사이즈를 조절해서 넣거나 텍스트, 다른 이미지 등을 적용합니다.

<a href="[##_ATTACH_PATH_##]/이미지1" rel="lyteshow[slide] " title="slide image1">
<img src=" [##_ATTACH_PATH_##]/이미지1" width="50" height="50" border="0"></a>
<a href="[##_ATTACH_PATH_##]/이미지2" rel="lyteshow[slide] " title="slide image2">
<img src="[##_ATTACH_PATH_##]/이미지2" width="50" height="50" border="0"></a>
<a href="[##_ATTACH_PATH_##]/이미지3" rel="lyteshow[slide] " title="slide image3">
<img src="[##_ATTACH_PATH_##]/이미지3"width="50" height="50" border="0"> </a

적용 예)

+ 이 경우에는 애니메이션 기능을 꺼둔 상태로 딜레이를 3초로 줬지만,
스크립트 설정시 원하시는 설정으로 하시면 이보다 자연스럽게 보이실 겁니다.

+ 그룹을 여러개 넣을 때

그룹으로 묶는 이미지를 여러개 넣을 때는 그룹 이름을 꼭 구별해야 합니다.
각각 다른 그룹 이름을 부여해 주지 않으면 하나의 창으로 모여버립니다.
내용과 상관없는 이미지가 뜰 수도 있으니 이 부분을 주의해주셔야 합니다.

예를 들어 우리집 강아지 이미지 3개와 옆집 고양이 이미지 2개를 띄우려고 할 때,
하나의 그룹을 사용하면 상관없이 5개의 이미지가 같이 묶입니다.
텍스트 사이에 이미지를 중간 중간 넣어줄 때 관련 이미지를 이런 식으로 구별해서 넣어줍니다.

우리집 강아지.
<a href="[##_ATTACH_PATH_##]/이미지1" rel="lytebox[dog]" title="dog 1">
<img src="[##_ATTACH_PATH_##]/이미지1" width="50" height="50" border="0"> </a>
<a href="[##_ATTACH_PATH_##]/이미지2" rel="lytebox[dog]" title="dog 2"></a>
<a href="[##_ATTACH_PATH_##]/이미지3" rel="lytebox[dog]" title="dog 3"></a>

옆집 고양이.
<a href="[##_ATTACH_PATH_##]/이미지4" rel="lytebox[cat]" title="cat 1">
<img src=" [ ## _ ATTACH_PATH _ ## ] /이미지6" width="50" height="50" border="0"> </a>
<a href=" [ ## _ ATTACH_PATH _ ## ] /이미지5 " rel="lytebox [cat] " title=" cat 2 "> </a>

예쁜 동물들.
<a href=" [ ## _ ATTACH_PATH _##]/이미지1" rel="lyteshow[animal]" title="dog 1">
이미지보기</a>
<a href="[##_ATTACH_PATH_##]/이미지2" rel="lyteshow[animal]" title="dog 2"></a>
<a href="[##_ATTACH_PATH_##]/이미지3" rel="lyteshow[animal]" title="dog 3"></a>
<a href="[##_ATTACH_PATH_##]/이미지4" rel="lyteshow[animal]" title="cat 1"></a>
<a href="[##_ATTACH_PATH_##]/이미지5" rel="lyteshow[animal]" title="cat 2"></a>

우리집 강아지 이미지 3개를 그룹 이미지로 묶고 썸네일 이미지로 링크,
옆집 고양이 이미지 2개를 그룹 이미지로 묶고 띄울 이미지와 다른 이미지로 링크,
우리집 강아지, 옆집 고양이를 슬라이드쇼 그룹으로 묶고 텍스트로 링크한 예제입니다.

+ html 페이지 링크

추가적으로 Lytebox에서는 frame 링크가 됩니다.
lytebox 홈의 설명에는 '.html' 파일명으로도 링크가 되는 걸로 되어 있습니다.
티스토리에서는 html이나 php 사용은 안되지만, ftp로 업로드하는 경우에는 링크가 가능합니다.

이런 식으로 rel을 바꾸시고 rev를 넣어 사이즈와 스크롤을 설정합니다.

적용 예)

<a href="http://acream.tistory.com" rel="lyteframe" title="Lytebox frame e.g" rev="width: 740px; height: 420px; scrolling: auto;">Lytebox frame e.g</a>

Lytebox frame e.g

lytebox 적용 방법이었습니다.
사실 쉬운 내용인데 괜히 복잡하게 보이는 것 같네요.
wysiwyg 모드 변경시 링크부분은 모두 바뀌어버립니다.
이래저래 번거로우시면 나중에 하시는 게 나을 것 같아요.
문제라면 문제일 수 있는 부분은 소스가 다 읽히기 전에 링크를 클릭하면
그냥 일반 링크로 읽어버린다는 점입니다.
역시 여러모로 그다지 적합하다는 생각은 안드는데요.그래도 사용하시고 싶으신 분을 위해...
대부분은 홈에 있는 설명 그대로지만 도움이 되셨기 바랍니다.

적용법은 티스토리에 적용하기에서 보실 수 있습니다.

Lightbox 대용 이미지갤러리 [Lytebox v3.22] - ① 티스토리에 적용하기

분홍뺨 — Wed, 08 Oct 2008 14:16:36 +0900

Lightbox 대용 이미지갤러리 [Lytebox v3.22]
- ① 티스토리에 적용하기

티스토리에 lightbox 플러그인이 있는데요.
이미지를 클릭해 보시면 아실 수 있다시피 lightbox는 사실 이런 식으로 떠야하는데,
제가 뭘 잘못알고 있던 걸 수도 있겠지만 티스토리 플러그인은 원저자의 저작물처럼 뜨질 않네요.
lightbox 2.04를 적용해 보았는데 마찬가지로 작동이 되지 않더군요...
티스토리 플러그인과 같은 버전인 치리님의 테터용 플러그인을 소스를 열어 보니
역시 이런 식으로 적용되는 게 아니었는데 티스토리는 뭔가 설정이 다르게 되어 있나봅니다.
(사실 자세히 모르겠지만 달라보입니다)

그래서 lightbox 홈을 기웃대다가 프레임용 lytebox를 적용했는데
어찌어찌 겨우 lightbox와 비슷하게 적용이 됐네요.
Lytebox 으로 가보시면 적용 방법이 간단하게 설명되어 있습니다만,
티스토리 적용시에 주의할 점을 알려드리겠습니다

소스를 다운 받으시면 css,js 파일과 이미지 폴더가 보입니다.
사용자가 원하는대로 스크립트와 스타일을 수정할 수 있습니다.
티스토리에 직접 적용하기 전에 먼저 js파일 설정을 보겠습니다.

A. lytebox.js 편집

lytebox.js 우마우스 클릭 > 편집 > 노트패드로 엽니다.
상단에서 조금 스크롤 해보시면 이러한 내용이 있습니다.

//*************************/
// LyteBox constructor
//*************************/
function LyteBox() {

바로 아랫 줄의 /*** Start Global Configuration ***/가 보이실 겁니다.
이 Global Configuration에 기본으로 세팅된 내용이 들어 있습니다.
테마, 애니메이션 효과, 플래시 효과, 테두리 사용, 바탕 색상 투명도 등을 조절할 수 있습니다.
그냥 올리셨다면 다시 업로드 하셔야 합니다.

기본 세팅 편집)

1. theme는 테마 설정입니다.
css에서 테마 색상을 수정할 수 있으나 그냥 사용하시고 싶으신 분은 원하시는 컬러로 바꿔주시면 됩니다.
기본은 그레이고, 레드,그린,블루,골드의 색상이 추가적으로 있습니다.

this.theme = 'grey';

2. hideFlash 플래시 콘트롤입니다. 기본은 true로 설정되어 있습니다.
그냥 두시려면 true, 숨기시려면 false로 고쳐주세요.

this.hideFlash = true;

3. outerBorder는 테마 색상의 아웃라인(테두리선)입니다.
테두리를 보이시려면 true, 보이게 하지 않으시려면 flase로 설정해 주세요.

this.outerBorder =true;

4. resizeSpeed는 이미지의 사이즈가 바뀌는데 걸리는 시간 입니다.
1=가장 느리게 10=가장 빠르게라고 주석이 달려있지만,
10도 그다지 빠른 편이 아니니 그냥 10으로 설정하시길 권장합니다.

this.resizeSpeed = 8;

5. maxOpacity는 보이고 있는 이미지 밖 부분의 바탕색 투명도입니다.
숫자가 높으면 색상이 진하고 낮을수록 투명해집니다.
테두리선의 색상과 같은 색으로 할 때는 50 이하로 두셔야 좀 구분이 됩니다.

this.maxOpacity = 80;

6. navType은 이미지를 클릭하는 네비게이션 설정입니다.
1은 상위 왼쪽과 오른쪽에 Prev와 Next 이미지 버튼으로 되어 있고,
2는 하단에 << prev | next >>로 텍스트 링크가 생성됩니다. 기본 설정은 1로 되어있습니다.
링크에 생기는 점선을 보이지 않게 해도, css에 hover 효과를 넣어두실 경우 이미지창에 적용됩니다.

this.navType = 1;

7. autoResize는 이미지 자동 사이즈 조절입니다.
브라우저 창의 사이즈보다 클 경우 조절해주는 기능입니다.
그대로 사용하실 분은 true, 조절하시지 않으실 분은 false로 변경하세요.

this.autoResize = true;

8. doAnimations는 이미지가 뜰 때 사라지거나 나타나는 명도 조절효과입니다.
그대로 사용하실 분은 true, 조절하시지 않으실 분은 false로 변경하세요.

this.doAnimations = true;

9. borderSize는 테두리 선의 두께입니다.
원하시면 CSS에서 설정하실 수도 있지만 여기에도 남겨두어야 합니다. 기본은 12입니다.

this.borderSize = 12;

여기까지 설정하면 아랫 줄에 /*** Configure Slideshow Options ***/이 보이실 겁니다.
Configure Slideshow Options에는 슬라이드쇼의 추가 설정이 들어 있습니다.
이 부분은 사용하실 분만 설정하시면 됩니다.

옵션 세팅 편집)

1. slideInterval은 다음 이미지로 넘어 갈 때 이미지가 머 무는 시간을 초 단위로 설정한 것입니다.
기본은 10000으로 설정되어 있는데, 원하시는 대로 줄이거나 늘릴 수 있습니다. 10000은 10초입니다.

this.slideInterval = 10000;

2. showNavigation은 슬라이드쇼로 보여지는 동안의 이전,다 음 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.

this.showNavigation = true;

3. showClose는 슬라이드쇼로 보여지는 동안의 닫기 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.

this.showClose = true;

4. showDetails은 슬라이드쇼로 보여지는 동안의 표시되는 페이지 넘버와 캡션 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.

this.showDetails = true;

5. showPlayPause는 슬라이드쇼로 보여지는 플레이와 멈춤 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.

this.showPlayPause = true;

6. autoEnd는 마지막 이미지를 보인 뒤 자동으로 슬라이드쇼 창이 닫히는 설정입니다.
자동 닫기 설정을 사용하시려면 true, 열려있는 상태로 두시려면 false로 변경하세요.

this.autoEnd = true;

7. pauseOnNextClick는 슬라이드쇼가 멈춘 상태에서 다음 버튼 설정입니다.
다음 이미지 버튼을 클릭 할 수 있도록 설정하시려면 true, 사용하지 않으시려면 false로 설정하시면 됩니다.
기본은 false로 설정되어 있습니다.

this.pauseOnNextClick = false;

8. pauseOnPrevClick은 슬라이드쇼가 멈춘 상태에서 이전 버튼 설정입니다.
이전 이미지 버튼을 클릭할 수 있도록 설정하시려면 true, 사용하지 않으시려면 false로 설정하시면 됩니다.
기본은 true로 설정되어 있습니다.

this.pauseOnPrevClick = true;

잘못할 경우 모양이 바뀌기도 해서 기본 그대로 사용하는 게 나을 수도 있습니다.
저는 navType=2, 바탕투명도 20에, 너무 느리게 떠서 플래시만 두고 애니메이션은 false로 뒀습니다.
lightbox는 좀 더 빠르지 않을까 하는 생각도 들지만 아무래도 적용이 안되네요.
혹시 관심있으신 분은 lightbox 에서 확인해 보세요.
thicbox도 좋을 것 같은데, 티스토리에 적용이 될지는 모르겠네요.

B. 티스토리 스킨 편집

스킨 편집은 별로 복잡하지 않습니다.
위에 스크립트만 잘 편집하시면, 대부분 오류없이 잘 됩니다.

적용 방법)

1. 파일 업로드

다운받으신 lytebox.js와 이미지 폴더 안에 이미지를 스킨 > 직접 올리기로 올려주세요.
사용하실 테마의 이미지만 올리셔도 됩니다. 기본 테마는 grey입니다.
스크립트 파일에서 테마를 수정을 하신 경우,
적용 테마 이미지와 loading.gif, blank.gif를 업로드해주세요.

2. skin.html 편집

스킨 > html/css 편집으로 가서 skin.html을 보시면 head 메뉴 테그가 보입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<head>와 </head> 사이에 다음 소스를 삽입해주세요.

적용 예)

경로의 수정없이 삽입해야 합니다.

3. style.css 편집

style.css에 lytebox.css 내용을 추가해 주시면 됩니다.
lytebox.css을 우클릭 > 편집 > 노트패드로 열어서 모두 복사 > 붙여넣기 해주세요.
style.css의 내용이 길거나 복잡하시다면 사용하시는 테마만 추가하셔도 상관없습니다.

적용 예) grey 테마

/* 이미지 갤러리 시작*/

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
#lbOverlay.grey { background-color: #000000; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
#lbOuterContainer.grey { border: 3px solid #888888; }
   .
   .
   중략
   .
   .
#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPlay.grey { background: url(images/play_grey.png) no-repeat; }

#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPause.grey { background: url(images/pause_grey.png) no-repeat; }

/* 이미지 갤러리 끝*/

+ 이미지 파일을 임의대로 사용하실 경우, 스킨 이미지로 업로드하신 후
url(images/파일네임)을 업로드하신 파일명으로 수정해주세요.

일단 여기까지가 티스토리에 lytebox를 사용할 수 있게 적용해 놓는 설정입니다.
포스팅에 적용하는 방법을 따로 빼둔 것은 그쪽이 더 복잡하기 때문입니다.
내용대로 됐다면 스킨에서 고치실 부분은 없을 겁니다.

포스팅에 넣는 방법은 포스팅에 사용하기에서 보실 수 있습니다.

티스토리 플래시 네비게이션 [spin tistory navigation]

분홍뺨 — Wed, 08 Oct 2008 14:08:36 +0900

[Flash] http://acream.tistory.com/attachment/48e9d75a573016N.swf

[Flash] http://acream.tistory.com/attachment/48e9d75ae163a62.swf

사이드용 카운터 합체 티스토리 네비게이션 입니다.
잘 보이도록 바탕색을 넣었지만 바탕은 반투명 화이트와 블랙입니다.
이 플래시는 오브젝트로 넣어서 클릭이 안됩니다. 스킨 적용은 아래에 적용 방법을 보세요.
220*280 사이즈로 세로 길이가 길어 2단용 스킨 사이드에 적용하시는 게 가장 예쁩니다.

적용 방법)

1. 하단에 링크된 플래시 파일을 다운 받으신 후 스킨 > 직접 올리기로 업로드 시킵니다.

2. 다음의 소스를 넣고자하는 위치에 맞추어서 스킨 > html/css 편집에서 직접 skin.html에 넣어 줍니다.

3. 적용하실 파일 이름을 확인하신 후 아래 소스 spin_tnv_컬러_by_cream_ahnma에서 컬러를 수정해 줍니다.

부여해주는 값과 상관없이 정해진 사이드 폭에 따라 줄여지기도 합니다. (자세히 모르지만..)

따로 style.css 수정이 번거러운 경우 <div>와 </div> 사이에 적당히 넣어주셔도 됩니다.

적용 예)

<div id="sidebar">
<s_sidebar>
<s_sidebar_element>

<div class="navigation" id="navigation" align="center"><script type="text/javascript">
AC_FL_RunContent(
"classid","clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",
"codebase","http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0",
"width" , "220",
"height" , "280",
"id" , "uploader",
"wmode", "transparent",
"movie", "./images/spin_tnv_cs_by_cream_ahnma",
"allowScriptAccess", "always",
"flashvars", "externalData=[##_blog_link_##]&externalData2=[##_blog_link_##]login&externalData3=[##_guestbook_link_##]&externalData4=[##_taglog_link_##]&externalData5=[##_localog_link_##]&externalData6=[##_blog_link_##]media&externalData7=[##_blog_link_##]archive&externalData8=[##_blog_link_##]owner/entry/post&externalData9=[##_blog_link_##]owner&yesterday=[##_count_yesterday_##]&total=[##_count_total_##]&today=[##_count_today_##]"
);
</script></div>
</s_sidebar_element>

+ 각각의 스킨 배경에 어울리는 네비게이션을 넣으실 수 있도록,
cool with simple은 반투명 화이트에 밝은 배경에 잘 보이는 짙은 블루 톤 텍스트와 아이콘을 썼고,
pastel with dark는 반투명 블랙에 어두운 배경에 잘 보이는 파스텔 톤 텍스트와 아이콘을 썼습니다.
마우스 오버시에는 아이콘이 한바퀴 돌면서 각각 다른 원색으로 커집니다.

위 소스는 새 메뉴의 치환자로 되어있습니다만 제가 적용한 예는 이전 메뉴 소스입니다.
혹시 사용하시고 싶으신 경우, 다음 소스 내용을 바꿔주시면 됩니다.

새 글 쓰기 메뉴

externalData8=[##_owner_url_##]/entry/post

이전 글 쓰기 메뉴

externalData8=[##_blog_link_##]owner/entry/post

새 관리자 메뉴

externalData9=[##_owner_url_##]

이전 관리자 메뉴

externalData9=[##_blog_link_##]owner

Data 8,9번만 아래 내용으로 바꿔 주시면 이전 메뉴로 이용하실 수 있습니다.

2011년 1월 7일 (7. Jan. 2011)

+ 업데이트
관리 안하는 블로그인데도 여전히 찾으시는 분들도 계시고 검색해서 오시는 분들도 많으셔서
(업데이트 안한지 횟수로 무려..2년된 블로그인데-_-;)
제가 테스트 해보고 안되는 부분 설정과 파일을 새로 업데이트 했습니다.

a 네비게이션 파일 은 압축파일(zip)로 업데이트 하고 위의 적용 예제 를 텍스트 파일(txt)로 첨부 했습니다.

   압축 푸시면 .swf 파일와 ex.txt가 나옵니다. .swf 파일은 스킨 편집에서 파일업로드 하시고,
   ex.txt는 열어서 복사하셔서 skin.html 설정할 부분에 붙여넣어주시면 됩니다.

b 새메뉴에서 안될 경우, skin.html을 복사해서 이전메뉴 skin.html에 붙여넣으세요.

   이전메뉴 일때 만들어서 소스가 예전것인 부분이 있어 그런지,
   저는 새관리에서 수정하면 사이드메뉴가 깨지더군요.
   혹시 안되시면 한번 이전관리 메뉴 (http://사용자.tistory.com/owner/skin/edit) 에서 해보세요.

c 적용예는 cool with simple (spin_tnv_cs_by_cream_ahnma) 컬러로 되어 있는습니다.

   바꾸실 분은 한번 더 언급하지만, spin_tnv_컬러_by_cream_ahnma '컬러' 를
   'cs' 혹은 'pd'로 바꾸세요.

d 절대 .swf 확장자 붙이시면 안됩니다.

   다른 이름으로 저장하셨다면 적용 예에서 파일이름만 바꾸셔야 합니다.
   나비.swf로 저장하셨다면 아래처럼만 바꾸면 됩니다.

다운로드)

cool with simple
pastel with dark

티스토리 플래시 베너 [pika tistory banner]

분홍뺨 — Thu, 25 Sep 2008 05:34:18 +0900

[Flash] http://acream.tistory.com/attachment/ik340000000000.swf

[Flash] http://acream.tistory.com/attachment/jk080000000000.swf

Powered by tistory 베너입니다.
그냥 넣으면 별로 예쁘지가 않아서 살짝 움직임을 넣어봤습니다.
200*60으로 사이드바 크기가 맞으면 사이드바에 사용하셔도 되지만
200보다 작은 경우엔 푸터에 사용하시길 권장합니다.
* 사이즈를 줄이면 아이콘 이미지가 깨져 보이니 소스 그대로 사용하는 것이 가장 예쁩니다.

적용 방법)
1. 하단에 링크된 플래시 파일을 다운 받으신 후 스킨 ▶ 직접 올리기로 업로드 시킵니다.

2. 다음의 소스를 넣고자하는 위치에 (사이드바 혹은, 푸터) 맞추어서 스킨 ▶ html/css 수정에서
직접 skin.html에 넣어 줍니다.

3. 적용하실 파일 이름을 확인하신 후 아래 소스 2번째 줄의 './images/pika1or2_tbn_컬러_by_cream_ahnma.swf' 부분의 1or2와 컬러를 수정해 줍니다.

적용 소스)

적용 예)

<div id="footer">
<div class="copyright">
<a href="">크림＊앙마</a> ⓒ 2008
<br><script>
FIN("<embed src='./images/pika2_tbn_po_by_cream_ahnma.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='200' height='60' wmode='transparent' allowScriptAccess='always'></embed>");
</script>
</div>
</div>

오리지날과 비슷한 펌프킨 오렌지를 푸터에 간단히 적용해 보았습니다

버전)
- pika1

[Flash] http://acream.tistory.com/attachment/jk060000000000.swf

- pika2

[Flash] http://acream.tistory.com/attachment/ik350000000001.swf

pika1은 정신없는 게 싫으신 분들을 위한 버전입니다.
깜빡거리는 'tistory' 문자만 생략했고,
pika2와 같이 아이콘 반짝이와 마우스 오버시 튕기는 효과는 동일합니다.
* 위 플래시는 오브젝트로 넣어 링크가 되지 않습니다.
적용방법 소스로 스킨에 넣으시면 티스토리 링크가 자동으로 적용됩니다.

컬러 네임)

* 적용해 보시면 플래시 색상이 이보다 더 예쁘게 나온답니다.

다운로드)

pika1 download

aqua skychoco maroon
foggy grey
pumpkin orange
daphne lilac
raspberry violet cloudy grass

pika2 download

aqua skychoco maroon
foggy grey
pumpkin orange
daphne lilac
raspberry violet cloudy grass