2014년 8월 1일 금요일

구글 블로그(블로거) 라벨을 이용한 카테고리.

2011 년 8 월 16 일
구글 블로그(블로거)는 아시다 시피 카테고리가 없는데요. 이를 극복하기위해 많은 시도를 하던 중 라벨을 이용해 카테고리를 만들고... 또 얼마전에는 라벨을 선택했을 때 각 라벨에 맞게 글목록이 나오는 방법에 대해서 썼었는데요.
2012 년 3 월 01 일
var tip = new Category() 처럼 Category라는 클레스를 변수에 할당해 주는데... feed 파싱을 위한 callback 함수에서 이 할당된 변수 이름을 알아야 원하는 변수 내의 함수를 호출하게 되어있습니다. 간단하게 예제의 색별로 넣어주시면 ...
2012 년 2 월 11 일
그니까 저의 것은 지금 글제목 앞을 장식하는 흑점이 가운데 놓엿다가 이번 수정으로 젤앞에 놓이는데, 그다음 글제목 아닌 역시 시간이 잇고 그 다음 글제목이 뜨고 제목아래가 아닌 직접 이이서 레벌/카테고리가 이어져 있네요,,,,, ...

=======================================================================

http://creatorhong.blogspot.kr/2012/02/blogger-label-posts-list.html

[Blogspot] Label을 이용한 글목록(Posts List) 구현.

Blogspot에서 글 목록을 보여주는 기능을 제대로 제공해 주지 않아 고민을 하다 없으면 차라리 만들어보자는 생각아래 여러 시도끝에 드디어 Blogspot의 글목록을 제가 원하는데로 만든 것 같네요.

카테고리는 구글의 Label를 통해 어느정도 분류가 가능하지만 이것을 제대로 보여주기 위해서는 해당 카테고리의 글 목록을 보여주는 기능이 필요했었지요.

아래 내용은 제가 직접 구현한 이 포스트 위에 보이시는 Post List를 구현하는 방법입니다.

일단 코드먼저 보겠습니다.
  1. <div>  
  2. <div id="posts" style="padding: 10px;">  
  3. </div>  
  4. <div align="center" id="posts-pgno" style="cursor: pointer;">  
  5. </div>  
  6. </div>  
  7. <script language="Javascript" type="text/javascript">  
  8.  /** url의 Parameter를 얻는 Class. **/  
  9.     var request = {   
  10.   parameter: function(name) {  
  11.    return this.parameters()[name];  
  12.   },  
  13.     
  14.   parameters: function() {  
  15.    var result = {};  
  16.    var url = window.location.href;  
  17.    var parameters = url.slice(url.indexOf('?') + 1).split('&');  
  18.       
  19.    for(var i = 0;  i < parameters.length; i++) {  
  20.     var parameter = parameters[i].split('=');  
  21.     result[parameter[0]] = parameter[1];  
  22.    }  
  23.    return result;  
  24.   }  
  25.  }  
  26.    
  27.  /** Page의 정보를 저장. **/  
  28.  var page = {  
  29.   //초기화.  
  30.   init: function(home,max){  
  31.    page.home = home;  
  32.    page.max = max;  
  33.    page.label = '';  
  34.    page.no = 1;  
  35.   },     
  36.      
  37.   //url의 parameter에서 pgno 값을 읽어 옮.  
  38.   setPage: function(){  
  39.    var url = window.location.href;  
  40.    
  41.    var pl = url.lastIndexOf("/label/");  
  42.    var pq = url.lastIndexOf("?");  
  43.      
  44.    if(pl != -1)  
  45.     page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));  
  46.      
  47.    if(url.indexOf("pgno") != -1)  
  48.     page.no = request.parameter("pgno");  
  49.       
  50.   }  
  51.     
  52.  }  
  53.  /** feed를 parsing 하여 결과 뿌려 줌. **/  
  54.  var obj = {  
  55.   init: function () {  
  56.    obj.obj = document.getElementById('posts');  
  57.    obj.pgno = document.getElementById('posts-pgno');  
  58.   },  
  59.     
  60.   // 검색을 요청하는 함수   
  61.   pingSearch: function () {  
  62.    //변수 선언.  
  63.    obj.s = document.createElement('script');  
  64.    obj.s.type = 'text/javascript';  
  65.    obj.s.charset = 'utf-8';  
  66.      
  67.    //feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.   
  68.    if(page.label == '')  
  69.     obj.s.src = '' + page.home +   
  70.      '/feeds/posts/summary/?max-results='+(page.no*page.max)  
  71.      +'&alt=json-in-script&callback=obj.pongSearch';  
  72.    else  
  73.     obj.s.src = '' + page.home + '/feeds/posts/summary/-/'  
  74.      +page.label+'?max-results='+(page.no*page.max)  
  75.      +'&alt=json-in-script&callback=obj.pongSearch';  
  76.       
  77.    //append.  
  78.    document.getElementsByTagName('head')[0].appendChild(obj.s);  
  79.   },  
  80.      
  81.   // 검색 결과를 뿌리는 함수   
  82.   pongSearch: function (z) {  
  83.    obj.obj.innerHTML = '';  
  84.      
  85.    /* 글 목록을 뿌려 줌. */  
  86.    for (var i = (page.no-1)*page.max; i < page.no*page.max; i++) {  
  87.     //예외처리.  
  88.     if(i >= z.feed.openSearch$totalResults.$t)  
  89.      break;  
  90.       
  91.     //변수선언.  
  92.     var li = document.createElement("li");  
  93.     var a = document.createElement('a');  
  94.       
  95.     //link로 사용할 base url.  
  96.     var url = page.home + '/search';  
  97.     if(page.label != '')  
  98.      url += '/label/' + page.label;  
  99.       
  100.     //최종 link를 url 입력.  
  101.     if (i == 0)   
  102.      a.href = url + '?max-results=1';  
  103.     else {  
  104.      var pub=obj.changeTime(z.feed.entry[i-1].published.$t);  
  105.      a.href = url + '?updated-max=' + pub   
  106.      + '&max-results=1&pgno='+page.no;  
  107.     }  
  108.     a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);  
  109.        
  110.     //append  
  111.     li.appendChild(a);  
  112.     obj.obj.appendChild(li);  
  113.    }  
  114.       
  115.    /* page 뿌려줌. */  
  116.    obj.pongPgno(z);  
  117.   },  
  118.     
  119.   // page를 뿌려주는 함수.  
  120.   pongPgno: function(z){  
  121.    obj.pgno.innerHTML = '';  
  122.    var before = document.createElement('a');  
  123.    var next = document.createElement('a');  
  124.      
  125.    var ten = parseInt((page.no-1)/10);  
  126.    var total = z.feed.openSearch$totalResults.$t;  
  127.   
  128.    /* before page */  
  129.    before.innerHTML = ' << ';     
  130.    if(ten>0)  
  131.     obj.onMouseDown(before, ten*10);  
  132.    obj.pgno.appendChild(before);  
  133.      
  134.    /* page number */  
  135.    for(var i=ten*10; i< (ten+1)*10; i++){  
  136.     if(i >= total/page.max)  
  137.      break;  
  138.     var a = document.createElement('a');  
  139.     obj.onMouseDown(a,i+1);  
  140.       
  141.     a.innerHTML = ' ' + (i+1) + ' ';  
  142.       
  143.     if(i+1 == page.no)  
  144.      a.style.color = 'yellow';       
  145.     obj.pgno.appendChild(a);  
  146.    }  
  147.       
  148.    /* next page */  
  149.    next.innerHTML = ' >> ';  
  150.    if(ten< parseInt(total/page.max/10))  
  151.     obj.onMouseDown(next, (ten+1)*10+1);  
  152.    obj.pgno.appendChild(next);  
  153.   },  
  154.      
  155.   //mouse click event.  
  156.   onMouseDown: function(a, i){  
  157.    a.onmousedown = function(){  
  158.     page.no = i;  
  159.     obj.pingSearch();  
  160.    }  
  161.   },  
  162.   
  163.   //Time 에러 수정.  
  164.   changeTime: function(str){  
  165.    var s = str.lastIndexOf('.')-1;  
  166.    var e = str.lastIndexOf('+')+1;  
  167.      
  168.    var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
  169.      
  170.    return str2;  
  171.   },  
  172.     
  173.   // HTML태그 안 먹게 하는 함수  
  174.   escapeHtml: function (str) {  
  175.    str = str.replace(/&/g, "&");  
  176.    str = str.replace(/</g, "<");  
  177.    str = str.replace(/>/g, ">");  
  178.    return str;  
  179.   }  
  180.  };  
  181.   
  182.  page.init('http://creatorhong.blogspot.com', 5);  
  183.  page.setPage();  
  184.  obj.init();   
  185.  obj.pingSearch();  
  186. </script>  
길군요...

그래도 그냥 복사 붙여넣기만 하면 되니...

바꾸실 곳은 아래쪽에 page.init('http://creatorhong.blogspot.com', 5);! 각각 블로그의 url 주소와 한 list안에 보여지는 최대 post 수를 입력하면 됩니다. 이때 url 주소 끝에 '/' 가 들어가면 안되구요.

최대 post수를 넘어가는 것은 번호를 넘겨가며 볼 수 있으니 적당한 수를 입력하시면 됩니다. 저 같은경우 5개로 지정하였습니다.

그리고... 앞쪽에 있는 <div> 태그내부에 style를 추가하시거나 css로 꾸미시는 것은 자유!.

이제 끝. 수정할 부분을 수정 하신 후 Blogger에서 제공하는 HTML/javascript 가젯에 코드를 붙여 넣기만 하면 됩니다.

HTML/javascript 가젯 추가하는 것을 모르시는 분이나 저처럼 Post 위쪽에 Posts List를 위치시키는 것이 궁금하신 분들은 링크 의 Post를 참고하시기 바랍니다.

아래는 구현 내용 설명....

전에 구현했던 코드 에서는 url의 label 부분을 읽어서 전체 feed에서 동일한 label를 찾아 순서대로 출력하는 방식이었는데요.
이때 url 인코딩을 제대로 처리 안하고 한 덕분에 여러가지 문제가 있었죠.

그래서 이번에는 url의 Label 를 읽는 것은 같으나 읽은 Label를 가지고 Label 마다 고유의 feed를 불러서 출력해주게 수정하였습니다. 그리고 각 List의 post link 를 post 고유 link가 아닌 Label에서의 순서를 통한 link로 입력하여 post를 눌러도 url 에 Label 이 남도록 수정 하였습니다.

더해서 접었다 펼 수 있게 했던 이전 코드와는 달리 정해진 수 만큼의 List을 항상 띄우고 아래 List Page Number 를 이용해 다음 List로 넘길 수 있도록 수정 하였습니다.

현재 Post Title만을 출력 되도록 하였는데... 혹시라도 label 이나 post 등록 날짜 등을 출력 하고 싶으시면 obj.pongSearch 부분을 수정하시면 됩니다.

이제보니 시간 설정을 표준시간대비 '-'인 곳의 대한 처리를 하지 않았군요. 알려주신 Samuel 님께 감사드립니다.
코드는 댓글에도 있지만.... 표준 시간대비 '-'이신 분들은 위에 코드 중 change:Time 부분을  아래 코드로 바꿔서 사용해 주시면 됩니다.
  1. changeTime: function(str){  
  2.     var s = str.lastIndexOf('.')-1;  
  3.     var e = str.lastIndexOf('+')+1;  
  4.   
  5.     if(e<1){  
  6.         e = str.lastIndexOf('-')+1;  
  7.         var str2 = str.substr(0,s) + '-' + str.substr(e,100);  
  8.     }  
  9.     else{  
  10.         var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
  11.     }  
  12.     return str2;  
  13. },  

페이지에 글제목만 나오게 하는 방법


블로거에 라벨별 목록 페이지 만들기

http://www.kalkin.tk/2012/11/blogger-toc-page-maker.html



구글 블로거의 라벨 페이지와 글목록 페이지에 글제목만 나오게 하는 방법


한국식 블로그들은 카테고리 목록에 제목만 뜨게 되어 있는 경우가 많다.
하지만 구글 블로거에서 라벨이나 글목록 링크를 눌러서 라벨 페이지, 혹은 글목록 페이지에 들어가면, 글의 제목만 뜨는 것이 아니라, 원래 블로그의 디자인대로 뜨게 된다. 만약에 블로그의 디자인이 글의 내용이 모두 뜨도록 되어 있다면, 라벨 페이지에서도 글이 모두 뜨고, 만약에 블로그 디자인이 글의 내용을 일부만 보여주도록 되어 있다면, 라벨 페이지에서도 글의 내용이 일부만 보여지게 된다.

물론 블로거의 이런 방식이 마음에 드는 사람들도 있겠지만, 라벨 페이지에서 글 내용이 모두 뜨게 되면, 방문자들이 글들을 훑어보는 것이 매우 힘들 수 있다. 많은 글이 있는 블로그일수록 더욱 더 불편해질 수 밖에 없다. 또한, 라벨 페이지나 글목록 페이지의 로딩 시간을 길게 만들기 때문에 불편함이 가중될 수 있다.

그래서 이 블로그에는 라벨 페이지와 글목록 페이지에 글의 제목만 뜨도록 해놓았다. 지금부터 그 방법을 설명해보려 한다.

1. 블로거에 로그인한다.

2. 대시보드 ⇒ 템플릿 ⇒ HTML 편집 으로 들어간다.

3. HTML 편집을 통해 템플릿을 수정할 때, 잘못 수정해서 오류가 나는 경우, 블로그가 정상적으로 작동하지 않을 수 있으므로, 수정전에 백업을 미리 해놓는 것이 좋다. 백업을 우상단에 있는 「백업/복원」버튼을 눌러서 할 수 있다.

4. 키보드의 「Ctrl+F」 키를 눌러서 아래의 코드를 검색한다.
<b:include data='post' name='post'/>
5. 그 코드를 다음의 코드로 대체한다. (즉, 검색으로 찾은 코드를 지우고, 그 자리에 다음의 코드를 붙여 넣으면 된다.)
<!--Label and archive page title only hack Start-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Label and archive page title only hack End-->
6. 「템플릿 저장」 버튼을 눌러서 템플릿을 저장한다.

7. 정상적으로 템플릿이 수정되었다면 다음과 같이 라벨 페이지와 글목록 페이지에 제목만 나오게 될 것이다.














8. 만약에 글목록의 스타일을 바꾸고 싶다면 두가지 방법이 있다.
  • 아래의 예처럼, 위의 코드 중 <h3>태그 안에 style 속성을 이용해서 스타일을 바꾼다.
  • <h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
  • 아래의 예처럼 CSS에 글목록에 대한 스타일을 넣어준다. (CSS 스타일은 ]]></b:skin> 앞에 넣어주면 된다.)
    .title-only {
    /* 여기에 알맞은 CSS 코드를 넣어주면 된다. */
    }
Print Friendly and PDF

2014년 7월 11일 금요일

구글(Google)을 제대로 검색하는 10가지 방법


모든 검색 엔진이 그렇지만 검색 창에 단순히 찾고자 하는 단어 하나나 무의미하게 단어를 나열해서는 원하는 정보를 제대로 찾기가 쉬운 일이 아니다. 초창기에는 검색 결과가 너무 적어서 문제였지만 요즘에는 너무 많아서 문제다. 아무튼 자신이 주로 사용하는 검색 엔진이 있다면 사용 방법을 꼭 숙지하는 것이 우선이다.

여기에 설명하는 구글(Google)  검색 팁은 매일 수시로 사용하는 기본적인 것이다. 그동안 그냥 아무 생각없이 검색 창에 단어를 입력하고 결과 목록을 뒤졌다면 챙겨두면 유용할 것이다.

1. 큰따옴표 사용으로 특정 단어 또는 어구만 검색하기


아래 그림은 검색 창에 [전자 상거래]라고 입력한 결과이다. 약 9,970,000개의 결과가 나왔다.



아래 그림은 ["전자 상거래"]라고 입력한 결과로 약 9,950,000개의 결과물이 나왔다. "전자"나 "상거래"가 정확히 한 어구로 붙어 있지 않은 경우는 제외가 된 것이다. 확실히 결과 목록이 다르게 나타난다.



아래 그림은 각각 [South Korea]와 ["South Korea"]일 때의 결과이다.





사실 영문의 경우 단수(korea)와 복수(koreas)의 결과도 다르게 나타난다.

참고 글: [Google] 구글은 복수와 단수를 구별한다(2005. 8. 21.) 

2. 필요없는 단어 빼기


특정 단어를 포함한 결과물은 제외하고 싶다면 해당 단어 앞에 "-"(하이픈. 따옴표 제외)을 넣으면 된다. 아래 그림은 [박철우]라는 검색어를 넣은 것이다.



지금도 활동하는지는 모르겠지만 REF라는 음악 그룹에도 같은 이름이 있다. 그래서 다음은 이를 제외한 것이다.



유명한 배구 선수도 있다. 그래서 또 뺐다.



3. 특정 사이트에서만 검색하기


검색 범위를 특정 사이트로만 한정하려면 아래 그림과 같이 "site:"라는 예약어를 사용한다. 아래 그림은 "전자 상거래"라는 검색어를 "서울대학교(snu.ac.kr)"에서만 찾는 것이다.



다음은 검색 범위를 학교 기관까지 넓혀 "site:ac.kr"이라고 넣은 것이다.



다음은 해당 검색어를 우리나라 정부 기관 사이트(site:go.kr)에서만 찾은 결과이다.



다음은 해당 검색어를 우리나라 연구 기관 사이트(site:re.kr)에서만 찾은 결과이다. 이런 용도로는 사용할 일이 많을 것이다.



4. 동의어 등 비슷한 단어들도 한 번에 다 검색하기


한글로 [음식]을 입력하고 검색을 하면 아래 그림과 같이 "요리"라는 단어도 함께 찾아준다. 이런 식으로 한글(Korean)을 입력한 경우에는 비슷한말, 기본형, 철자가 틀린 말 등도 같이 찾아준다. 예를 들어, "프레젠테이션"을 검색하면 "프리젠테이션"도 같이 찾는다.



검색어가 영어인 경우에는 아래 그림과 같이 입력한 그 단어만 찾게된다.



이를 유사한 단어까지 확장하려면 단어 앞에 "~"(물결표)를 해주면 된다. 검색어 "food"인 경우에는 "recipe", "cooking", "nutrition" 등의 단어도 같이 찾는다.



5. 특정 형식의 파일만 찾기


Word(워드)나 Excel(엑셀) 등 특정 형식의 파일만 찾을 때에는 "filetype:"라는 예약어를 사용한다. 다음 그림은 PowerPoint(파워포인트) 파일만 찾기 위래 "filetype:ppt"를 사용한 것이다. 결과물 링크 앞에 [PPT]라고 표시되어 나온다.



아래 그림은 PDF 파일만 찾는 것이다.



아래 그림은 한/글(아래아한글)만 찾는 것이다. 확장자인 HWP가 정식으로 인식되지 않기 때문에 링크 앞에 [HWP]라는 표식은 없지만 해당 형식의 파일만 찾아주기는 한다.



6. 두 개 이상의 검색어 중 하나만이라도 있으면 다 찾아오기


기본적으로 검색 창에 두 개 이상의 단어를 입력하면 이 단어가 모두 들어 있는 페이지를 찾아오게 된다. 하지만, "OR" 연산자를 사용하게 되면 이 중 하나만 들어 있어도 해당 페이지를 불러온다. "OR"(따옴표 제외)는 항상 대문자로 써야 한다.






7. 숫자 범위로 검색하기


2000~2007년 사이의 모든 숫자(2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007)를 모두 검색어로 넣어야 하는 경우 ".."(마침표 두 개)를 사용하면 된다.



8. 검색 창을 계산기로 사용하기


정말 유용하게 사용할 수 있다. 참고로 이런 용도로 검색 창을 사용할 때에는 [검색] 단추를 누르거나 [Enter] 키를 치기 전에 검색어 맨 뒤에 "="(등호)를 넣어주는 것이 좋다.






참고 글: [Excel/Google] Excel과 Google을 간단한 계산기로 활용하기(2007. 8. 1.) 

9. 단어의 정의 찾기


특정 단어의 정의(설명)를 찾고 싶다면 "define:"이라는 예약어를 사용한다. 한글 단어는 아직 결과물이 없지만 사전식으로 용어를 찾을 때 유용하다.



10. 웹 페이지 주소(URL)에 있는 단어로 검색하기


인터넷에 있는 모든 파일(객체)에는 고유한 주소가 있다. URL이 그것인데 우리가 흔히 인터넷 주소라고 하는 것이다. "http://www.cantips.com/abc"나 "http://www.cantips.com/sample.pdf"와 같이 생겼다. 이 주소에 있는 단어만 찾으려면 "inurl:"이라는 예약어를 쓰면 된다. 아래 그림은 URL에 "report"라는 단어가 들어간 곳만 찾는 것이다.



아래 그림과 같이 사용하면 우리나라 정부 기관의 웹 페이지 중 report라는 이름이 들어간 곳을 찾을 수 있다.



URL에는 파일 이름도 포함이 되므로 아래와 같이 사용하면 우리나라 연구 기관의 홈 페이지에서 "보고서"라는 글자가 들어가 있는 파일들만 불러오게 된다. 보통 파일 이름에는 한글을 쓰게 되지만 파일 이름이 아닌 폴더 이름에는 한글을 잘 쓰지 않는다.



http://cantips.com/686

2014년 7월 8일 화요일

블로그 카페


&  메일 / 블로그

생활문화  empal  / cyworld   http://www.cyworld.com/highjune5  기록의 힘, (상상)
정치사회  daum  / daum     http://blog.daum.net/highjune   생각의 힘, (상징)
경제경영  naver 책 /naver    http://blog.naver.com/highjune  현실의 힘, (실재)
공간환경   paran
정보기술   tistory/gmail 

블로그.  highjune.tistory.com.  daum id pw
           infomatics..tistory.com. @me.com pw+

= highjune.tistory.com. --  daum id  pw
생활과 기록  http://highjune.tistory.com/
사상과 역사. http://aview.tistory.com/
정치적인  http://apolitics.tistory.com/ 
경제 경영   http://economan.tistory.com/
문화적인 것 http://culturology.tistory.com/  

= infomatics.tistory.com -- id@me.com.  pw
정보문화학 http://iculturology.tistory.com/   story media 이야기와 매체

워드프레스 
# highjune.wordpress.com
highjune@me.com.  highjune.   pw+
# highjune1.wordpress.com
highjune@empal.com.  highjune1 pw+
#highjune2.wordpress.com 
highjune@naver.com highjune2 pw+


& 카페

네이버
       경영3.0 (관리)  http://cafe.naver.com/management30 
 포스트미디어   http://cafe.naver.com/postmedia
       개발자 포럼    http://cafe.naver.com/digitree  (개발팀))

다음   
       미래구상포럼 http://cafe.daum.net/acsfuture  
       미래공간개발 http://cafe.daum.net/spacedev
       미래기술포럼 http://cafe.daum.net/posttech
       시스파인     http://cafe.daum.net/sysfine
       다 슬 음     http://cafe.daum.net/dasoleum


0.생활기록
1.사상역사
2.정치사회
3.경제경영
4.문화매체
5 과학기술
6.정보학
7.정보기술
8 계획설계

1.생활기록 + 사상역사
2.정치사회
3.경제경영
4.문화매체
5 과학기술 + 정보기술
6.공간환경 + 계획설계

A 사상 역사 기록
S 공간환경 계획 설계
P 정치 사회 법
E 경제 경영 회사
C 문화 예술 생활
T 과학 기술 매체