컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 블로거(www.blogger.com)에서 자바스크립트(JavaScript) 지원하나요? [...[QnA] 구글어스(Google Earth)를 더 선명하게 보는 방법이 있나요?울트라에디트(UltraEdit)에서 일본어 입력/편집하는 법del.icio.us(delicious) 로, 블로거(구글블로그)에 카테고리(Categor...온라인 북마크(즐겨찾기) 사이트, 딜리셔스(del.icio.us/delicious) 사용기...[마이크로소프트 무료 전자사전] 스페인어/이태리어/독일어/불어 <―> 영어좋은/특이한 한글 폰트(글꼴)들 소개[Perl/펄] 세상에서 가장 간단한 RSS리더기를 만들어 보자블로그 피드(Feed) 상단에, 그림 로고(Logo) 넣기[QnA] 왜 TIF/TIFF 화일은 업로드할 수 없나요. 스캐너로 뽑은 사진인데-_-;

블로그 게시물에 '딜리셔스del.icio.us(delicious) 추가 링크' 만들기

Friday, May 05, 2006

방문객이, 자신의 브라우저에 있는 딜리셔스(del.icio.us /delicious) 아이콘으로 현재의 포스트(게시물)를 딜리셔스에 추가할 수도 있지만 좀 번거롭다. 게시물 끝에, 직접 추가하는 링크를 넣는 것이 나을 것 같았다.

딜리셔스 도움말 중에
http://del.icio.us/help/savebuttons
라는 곳을 보면, 이런 작업을 하는 코드가 있다.

이것이 그것이다.
<a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;"> Save This Page</a>




팝업창이 아닌 현재 창으로 열기



그런데 이 코드에 좀 문제가 있었다. 우선 팝업창으로 열렸다. 팝업창이 편리할 수도 있지만, 필자의 경우 팝업창을 쓰지 않는다는 원칙을 가지고 있으므로 곤란했다. 물론 팝업이 아닌 그냥 현재 창으로 열리게 할 수 있지만, 그러면 몇 가지 난처한 문제들이 생겼다:

* jump=close 라는 옵션 때문에, 팝업창 없이 열면 북마크 후, 브라우저 창이 없어져 버린다. jump=close 라는 옵션을 지워도 다음과 같은 문제가 생겼다.

* 딜리셔스는 북마크를 저장한 후, 원래의 페이지로 돌아오게 되어 있다. 팝업창이 아닌 현재창으로 열 때, 원래 페이지로 돌아오면 페이지 인코딩이 깨져 버리는 경우가 많았다. 필자의 블로그는 유니코드(UTF-8)인데, '서유럽어' 인코딩이 되어 버려 글자가 깨져 버렸다.

* 그리고, 아이템 페이지는 괜찮지만, 메인 페이지와 아카이브 페이지는 많은 포스트들이 한 장으로 붙어 있기에, 팝업 없이 원래의 창으로 열면, 현재 보고 있는 메인페이지/아카이브페이지가 아닌, 아이템 페이지로 돌아가 버렸다. (딜리셔스는 현재 페이지의 종류를 모르기 때문에, 무조건 북마크 하는 주소로 돌아가 버리는 것이다.) 설명하기 복잡하지만, 위의 코드를 팝업창 없이 열면 그런 문제가 생겼다.


jump=no 라는 옵션으로 바꾸어 주자, 이런 문제가 말끔히 없어졌다. 다만 북마크 후, 보고 있던 페이지로 자동으로 돌아오지 않지만 그 편이 더 편리하고 안정적이었다. (마우스 특수 버튼에 '뒤로' 기능을 추가하면 편리합니다. 참고: [ 파워유저(?) 팁 ] 구형 휠 마우스 (Wheel Mouse) 로 '뒤로 가기' 버튼 구현)





주소와 제목의 인코딩 문제



자바스크립트의 encodeURIComponent() 함수로, 북마크할 게시물의 주소와 제목을 인코딩하지 않으면, 딜리셔스가 한글을 받아들이지 못했다.

가령 소설 이라는 한글 단어를 위의 함수로 인코딩하면 %EC%86%8C%EC%84%A4 이렇게 된다.

이 코드는 encodeURIComponent()의 간단한 사용법 예제:
<html>
<head>
</head>

<body>

<script type="text/javascript">
  document.writeln(encodeURIComponent('소설'));
</script>

</body>
</html>


위의 코드를 html 파일로 저장하여 브라우저로 보면
%EC%86%8C%EC%84%A4
라는 문자열이 출력된다.



따옴표 문제



자바스크립트는 물론이고 어떤 언어에서든, 함수에 문자열을 집어 넣을 때에는 따옴표를 붙여야 한다. 이 경우에는 쌍따옴표인데, <a href="... 태그가 이미 쌍따옴표를 사용하고 있기 때문에 곤란했다. 쌍따옴표를 &quot; 으로 이렇게 변환해 주니 간신히 해결이 되었다.

encodeURIComponent(&quot;<$BlogItemTitle$>&quot;);

[HTML/CSS] 포스트 제목 툴팁(tooltip)의 쌍따옴표/홑따옴표 문제 해결 <- 이 포스트에서 거론한 적이 있지만, 포스트 제목에 쌍따옴표가 있으면 곤란한 문제가 생기므로, 홑따옴표만 사용하거나, '전각문자 쌍따옴표'를 사용해야 할 것이다.




완성된 템플릿 코드



아이템 페이지, 즉 게시물 낱장 페이지의 말미에 추가하는 코드
<ItemPage>&nbsp;<a href="http://del.icio.us/post" onclick="location.href='http://del.icio.us/post?v=4&amp;jump=no&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(&quot;<$BlogItemTitle$>&quot;); return false;" class="wasabi-no-uline" title="온라인 즐겨찾기에 추가"><span style="color:#B6B6D5;">del.icio.us</span></a></ItemPage>




메인 페이지와 아카이브 페이지의 각 포스트 말미에 추가하는 코드
<MainOrArchivePage>&nbsp;&nbsp;<a href="http://del.icio.us/post" onclick="location.href='http://del.icio.us/post?v=4&amp;jump=no&amp;url='+encodeURIComponent(&quot;<$BlogItemPermalinkUrl$>&quot;)+'&amp;title='+encodeURIComponent(&quot;<$BlogItemTitle$>&quot;); return false;" class="wasabi-no-uline" title="Bookmark on del.icio.us"><span style="color:#B6B6D5; font-size:8pt; font-weight:normal;">BMK</span></a></MainOrArchivePage>





다음의 태그들은 모두 블로거(blogger.com) 전용 태그이다. 다른 블로그 서비스 사용자들은 자신의 블로그에 맞는 태그로 바꾸어 넣어야 한다.

<MainOrArchivePage>
이 태그로 둘러싸인 코드는, 메인 페이지와 아카이브 페이지에만 적용

<ItemPage>
이 태그로 둘러싸인 코드는, 아이템 페이지(게재 페이지)에만 적용

<$BlogItemTitle$>
게시물 제목. (타이틀바 제목인 document.title 로 사용해도 되지만, 그러면 블로그 이름까지 붙어서 보기에 어수선했다.)

<$BlogItemPermalinkUrl$>
게시물 주소



링크에 색을 힙혔기에, 언더라인의 색과 조화가 되지 않는다. 그래서 아예 마우스 호버 때의 언더라인을 없애 버렸다.
class="wasabi-no-uline"
이 클래스가 그것이다.

<html>
<head>
<style type="text/css">
... 중략 ...
a.wasabi-no-uline:hover { text-decoration:none }
... 중략 ...
</style>

... 이하 생략 ...


HTML 헤더의 스타일 정의 부분에 이렇게 클래스를 정의하면 된다.





결론



딜리셔스 북마크 링크를 게시물 자체에 추가하니 여러모로 편리했다.






▶▶ 온라인 북마크(즐겨찾기) 사이트, 딜리셔스(del.icio.us/delicious) 사용기

▶▶ del.icio.us(delicious) 로, 블로거에 카테고리(Category) 기능 구현!

☞ HTML/CSS/JavaScript

☞ Web

☞ 블로거 (Blogger.com)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top