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

 
Previous Post Archives를 이용한, 가입형 블로그 백업 방법월별Archive에 연월(2006.03) 붙이기, 블로거(blogger.com)의 경우블로거(Blogger.com) 전용 '올블로그'인 '한글 Blogger 업데이트 정보' 출...블로그 이름을 포스트 제목 뒤로 이동하여, 검색에 유리하게 ㅎㅎ신문연재 일본어회화/인코딩/후리가나(Furigana)루비 태그주황색과 잘 어울리는 색, 오렌지색이랑 조화를 이루는 색상, 배색 문제; QnA구글어스 다운로드하는 곳? 구글 어스는 무료입니까? [QnA][독서] 이문열 소설 '호모 엑세쿠탄스' 프리뷰 / 여담'구글 애드센스 공식 블로그'와 '애드센스 도움말 그룹' 출범[QnA] 혹시 '네이버 블로그'가 구글에서 검색됩니까?

Archives를 드롭다운리스트에 넣고, 해당 월(月)이 나오게

Thursday, March 30, 2006

일러두기: 이것이 드롭다운리스트




시작:

2006.03
2006.02
2006.01
2005.12


많은 분들이 Archive 목록을 드롭다운리스트(Drop-down List)에 넣는데, 이것에 약간 불편한 점이 있었다. 가령, 현재 1월달 Archive를 보고 있는데도, 목록에 기본값으로 나타나 있는 Archive는 항상 최신 Archive이거나, 그냥 ARCHIVES 라는 문자열이었다.

필자가 며칠 전에 어떤 외국인의 블로그에서 Archive 목록을 훑어보았는데, 다음달 Archive를 읽기 위해 이동할 때마다, 이 드롭다운리스트가 최신 Archive로 리셋되어 버려서, 다음에 읽어야 할 Archive가 몇월 달의 것인지 잘 알 수 없었다.


2006.03
2006.02
2006.01 <- 만약 현재 이것을 읽고 있다면
2005.12

드롭다운리스트에 2006.01 이라고 표시되어야만, 다음에 읽어야할 Archive인 2005.12 의 것을 쉽게 선택할 수 있다. 그런데 항상 2006.03을 가리키고 있었다.


쉽게 말해서
이렇게
바꾸고 싶었다.


드롭다운목록은 <select> 와 <option> 태그로 만드는데, <option> 에 selected 라는 것을 넣어주면, 특정 항목을 기본값으로 만들 수 있다. 이번 달의 연월(예: 2006.02)을 기본값으로 지정해 주면 되는 것이다. 이것은 자바스크립트를 필요로 한다. (블로거(blogger.com)는 오래된 Archive 를 가장 위에 배치하기에, 자바스크립트로 순서도 뒤집어 주었다.)



템플릿에 넣어야 할 코드:

코드는 두 부분은 나누었다.

<head>

...중략...

<script type="text/javascript">
<ArchivePage>
 function GetArchiveDate() {
   var ArchiveTitle = new String("<$BlogPageTitle$>");
   var DelStr = "<$BlogTitle$>" + ": ";
   var ArchiveDate = ArchiveTitle.replace(DelStr, "");
   return ArchiveDate;
 }
</ArchivePage>
</script>

...중략...

</head>


위와 같은 코드를 <head> 안의 적당한 곳에 넣어 둔다. 가장 아래가 적당할 것이다. GetArchiveDate() 라는 함수는, 현재 읽고 있는 Archive페이지의 월(月)을 리턴한다.

2006-04-08 업데이트: <ArchivePage></ArchivePage> 로 자바스크립트 함수를 감싸주었음. 다른 종류의 페이지에서 이 함수가 로딩되면, 브라우저 하단의 상태 바에 노란 삼각형 아이콘이 생기며 자바스크립트 경고가 나왔기 때문. 가령 아이템 페이지에서 로딩되면, 아이템 페이지의 포스트 제목이 이 함수 안에 들어가며, 이때 포스트 제목에 따옴표나 괄호가 있으면 자바스크립트와 충돌했음.






<div style="text-align:right; margin-bottom:30px;">
<script type="text/javascript">
 var archives = new Array();
 <BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
 document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
 for (var i = archives.length - 1; i >= 0; i--) {
   document.write('<option value=\"' + archives[i][0] + '\"');
   if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
   document.write('>' + archives[i][1] + ' 월호' + '</option>');
 }
 document.write('</select>');
</script>
</div>


<ArchivePage></ArchivePage> 태그를 만들어, 위의 코드를 안에 넣어주면 된다. (단, ' 월호' 라는 문자열은 붙여주지 않아도 된다.)

2006-04-03 업데이트: 코드를 약간 최적화. 그 외에는 달라진 것 없음. 버전 1.05




참고 사항:
위의 드롭다운메뉴는 자바스크립트로 만들어져 있기에, 구글 같은 검색엔진이 읽을 수 없을 가능성이 높다. 따라서, 원래 Archive목록을 지우고, 이 드롭다운메뉴만을 사용하면, 검색엔진의 검색결과에 블로그가 나오지 않을 위험이 있다. 원래 Archive목록은 놔두고, 위의 드롭다운메뉴을 화면에 추가하는 방식을 택하는 것이 무난하다. ("블로그가 구글에 잘 인덱스 안되던 이유를 좀 알게 됨" 참조)





현재, 필자의 Archive 페이지 상단의 코드를 모두 공개하자면 다음과 같다.

<ArchivePage>
<div style="font-family:'Arial Black'; font-weight:normal; font-size:24pt; text-align:center; color:#A9E2C5; margin-top:15px;" title="월별 게시물 목록">Monthly Archive</div>

<script type="text/javascript">
 document.write('<div style=\"text-align:center; margin-top:10px; margin-bottom:60px;\"><a href=\"javascript:window.location.reload(true);\" class=\"wasabi-no-uline\"><span style=\"font:italic bold 32pt \'Georgia\'; color:#C5C5E6;\">' + GetArchiveDate() + '</span></a></div>');
</script>
<noscript><div style="color:red; text-align:center; margin-top:20px; margin-bottom:60px;">JavaScript Disabled</div></noscript>

<div style="text-align:right; margin-bottom:30px;">
<script type="text/javascript">
 var archives = new Array();
 <BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
 document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
 for (var i = archives.length - 1; i >= 0; i--) {
   document.write('<option value=\"' + archives[i][0] + '\"');
   if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
   document.write('>' + archives[i][1] + ' 월호' + '</option>');
 }
 document.write('</select>');
</script>
</div>

<Blogger>
<BlogItemTitle>
<div style="font-family:'Arial'; font-size:10pt; font-weight:bold;" class="wasabi-fc-gray-cool"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div style="margin-bottom:3px;"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></div>
</BlogItemTitle>
</Blogger>
<p style="margin-bottom:50px;"></p>
</ArchivePage>


2006-04-03 업데이트: 위의 핵심 코드 버전 1.05을 반영했음

2006-04-03 4:49오후 업데이트: Back 버튼을 눌러 아카이브 페이지들을 살펴보는 경우, 드롭다운 리스트가 갱신되지 않고, 직전에 보던 달의 아카이브를 가리키고 있는 버그가 있었다. 그러나 도저히 고칠 수가 없었다. 코드의 문제가 아니라 브라우저 차원의 문제인 듯했다. 심지어 F5키를 눌러도 갱신되지 않았다. Ctrl+F5를 누르면 겨우 갱신되었다. 날짜 문자열에 (예: 2003.01) Ctrl+F5키에 해당되는 링크(javascript:window.location.reload(true);)를 넣어주는 방법밖에는 없었다. 그래서 바로 위의 코드박스가 약간 갱신되었다. 하루종일 이 문제로 고민하다가 시간을 다 보냈다.



노파심: 블로그 기본 페이지(Home)의 아카이브 목록은 이렇게 특정 월(月)을 표시해줄 필요도 없고, 해줄 수도 없다. 이것은 어디까지나 아카이브 페이지 안에서의 아카이브 목록의 경우다.





2006-04-03 6:46오후의 여담: 지금 생각해 보니 버그가 아니라 <select><option>... 태그에서는, 그런 것이 정상인 듯하다. 즉, "뒤로 가기 버튼" 등으로 네비게이션을 할 때는 원래, SELECTED 속성으로 지정해 준 항목으로 리셋되지 않는 것 같다. 괜히 버그로 착각하고 하루종일 고생했다.

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