2014년 8월 1일 금요일

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

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

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

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

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

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

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

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

일단 코드먼저 보겠습니다.
view plainprint?
  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 부분을  아래 코드로 바꿔서 사용해 주시면 됩니다.
view plainprint?
  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. },  
작성자: 시간: 댓글 1개:
라벨:

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


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

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
작성자: 시간: 댓글 없음:
라벨: ,
피드 구독하기: 글 (Atom)