태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
 

 
페이지 구독





과거 기사

Locations of visitors to this page

블로거뉴스 인기 뉴스를 위젯으로 만들기

IT네트워크/다음 | 2009.04.30 16:37 | Posted by Namu(南無)

티스토리의 업데이트 소식을 보다가 댓글 중에 이런 글이 있더라고요. 블로거뉴스 인기 리스트 같은 것을 블로그에 달 수 있으면 어떨까 하는 그런 이야기였습니다. 블로거뉴스 위젯으로 내 인기 뉴스, 내 최신 뉴스, 내가 추천한 뉴스 등을 뽑을 수 있지만 인기 뉴스만을 뽑아서 보는 등의 기능은 없으니까요.

그런데, 이게 가능합니다. 아주 간단하게.

2008/12/07 - 블로거뉴스, 인기글과 새글 한방에 보기

이전 블로거뉴스 인기글과 새글 한방에 보기에서 이야기했지만, 아주 간단하게 됩니다. 그것은 블로거뉴스가 구조상 iframe으로 호출하는 모듈로 구성되어 있기 때문입니다.

자, 그럼 순서대로 이야기를 해보도록 하죠. 구글 크롬과 인터넷 익스플로러를 기준으로 설명 드리겠습니다.

블로거뉴스 인기글 위젯을 만들어 보자

우선 블로거뉴스 페이지로 찾아갑니다. 그 다음, 적절한 분류를 고릅니다. 저는 전체보기에서 실시간 인기글을 선택했습니다.



구글 크롬의 예시

구글 크롬의 경우 제가 표시한 주황색 영역에서 우 클릭을 한 다음 “새 탭에서 프레임 열기”를 하면 새 탭에서 그 영역만 나오는 주소가 표시될 것입니다.



인터넷 익스플로러의 경우

인터넷 익스플로러의 경우 오른쪽 마우스를 클릭하여 메뉴에서 “속성” 메뉴를 선택하면 등록정보가 표시됩니다. 여기에서 주소 부분을 마우스로 드랙하여 선택한 것을 복사하여 붙여놓으면 됩니다.

http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=15&type=recommend_point

밑줄 친 부분이 키 포인트입니다. 앞에서 category_name 다음에 있는 all이 보고 있는 채널이며, page_size 다음숫자가 한 페이지에 표시될 목록의 개수, type 다음에 있는 것이 정렬되는 방식입니다.

이렇게 뽑아낸 주소를 iframe에 넣고 담으면 됩니다만, 15줄이나 되기 때문에 너무 깁니다. 그렇기에 이 숫자를 조절하면 높이가 조절됩니다.

http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point

블로그에 위젯으로 만들어 넣기

자 이렇게 확보한 주소를 갖고, 블로그에 담아 봐야겠죠? 넣을 때는 iframe을 사용해야 합니다.

<iframe src='[주소]' width='[넓이]' height='[높이]' scrolling='no' allowtransparency='true'></iframe>

주소에는 아까 확보한 주소를 놓습니다. 넓이는 블로그 사이즈에 맞게 조절하시면 됩니다.  그 다음 높이가 중요한데, 이것은 앞서 주소에서 page_size에서 잡은 숫자 x 60을 하면 됩니다.

예를 들어 모든 채널의 인기순으로 5개를 표시하고 싶다면 다음과 같이 넣으면 됩니다.

<iframe src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true'></iframe>

더불어 좀 더 꾸미고 싶다면 style 태그를 써서 꾸미면 되죠.

<iframe src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true' style='border:1px solid #D2D2D2;'></iframe>

스타일을 써서 마음껏 외곽선을 꾸며주면 됩니다. 그 다음블로그의 필요한 위치에 넣으면 끝. 간단하죠?

이글루스 사용자를 위한 팁

그런데, 이글루스의 경우 iframe 태그를 쓸 수 없습니다.

2009/04/16 - 하지 말라면 하고 싶다! 이글루스에서 못 쓰는 HTML 태그 쓰기

<iframe a="<>" src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true' style='border:1px solid #D2D2D2;'></iframe a="<>">

그러나 방법은 다 있지요. 마법의 코드 a="<>"!! 간단하게 iframe을 사용해서 블로거뉴스 위젯을 설치할 수 있답니다.

댓글을 달아 주세요!!

  1. Favicon of http://widgetbank.tistory.com 위젯뱅크 2009.04.30 17:40 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 위젯뱅크 입니다.
    위젯뱅크에 많은 관심을 가져주셔서 감사드립니다. 말씀해 주신것처럼 블로거뉴스의 인기글이나 추천글을 모아볼 수 있는 위젯이 블로거뉴스 자체에서 제공되고 있습니다.

    하지만 저희 위젯뱅크에서도 블로거 뉴스와 함꼐 블로거뉴스 위젯에 제작 진행에 대해서 협의중에 있고, 조만간 위젯뱅크에서도 간단한 설정을 통해 블로거 뉴스와 관련된 위젯을 만나볼 수 있으리라 생각 됩니다. 좋은 의견과 함께 블로거 뉴스 위젯 사용에 대해서 설명해 주셔서 감사드리고 위젯뱅크에서 만나볼 블로거 뉴스위젯도 많이 기대해 주세요^^ 감사합니다.

  2. Favicon of http://parkpd.egloos.com ParkPD 2011.10.17 00:28 신고  댓글주소  수정/삭제  댓글쓰기

    지금 이글루스 스킨 2.0 에서는 a="<>" 를 안 먹나봐요.
    제대로 보이지 않고 소스가 바로 보이네요.