구글블로그 사용법: 블로그 리스트 가젯 (Blog List Gadget) 추가 및 설정하고 꾸미는 방법

블로그에 외부의 홈페이지나 블로그의 최근 글이 보여지도록 하려면, 블로그 리스트 가젯 (Blog List Gadget)을 이용하면 편하고 쉽게 할 수 있다. 이전에는 불편하고 오류도 잦았는대, 지금은 개선이 되어 잘 작동한다.

옆의 그림은 이 블로그의 오른쪽 사이드바 맨 아래에 있는 블로그-리스트 가젯이다.

가젯에 홈페이지나 블로그를 추가하고 설정하는 방법은 아주 간단하고, 반면에 CSS 코드를 추가하여 폰트, 색상, 테두리, 여백, 이미지 등을 다양하게 꾸밀 수 있으므로 블로그에 잘 어울리게 할 수 있다.


1. 블로그 리스트 가젯 추가하기

블로그-리스트 가젯을 추가하는 경로는
=> 블로그 대시보드 > 레이아웃 (Layout) > 가젯추가 (Add a Gadget) 링크를 클릭한다
=> 가젯 추가 (Add a Gadget) 창이 열리면 > 스크롤바를 아래로 내리면 중간쯤에 그림과 같은 블로그-리스트 가젯이 있다

=> 가젯 이름 (Blog List)을 클릭하거나, 가젯의 오른쪽에 있는 플러스(+) 를 클릭하면 아래 두번 째 그림과 같은 블로그-리스트 가젯 설정창이 뜬다

2. 블로그 리스트 가젯 설정하기

가젯 설정은 두 가지로 나누어 생각해 볼 수 있다.우선은 아래 그림의 주황색으로 표시한 기본적인 사항을 설정하는 것이고, 둘은 파랑색으로 표시한 보여줄 홈페이지나 블로그 주소를 입력하는 것이다.

1) 기본사항 설정하기
ㅇ 가젯 이름 (Title) : 적어도 되고 비워 두어도 된다
ㅇ 정렬 (Sort) : 최근 글 순서 (Most recently updated)와 보여줄 블로그나 홈페이지 이름의 알파벳 순 (Alphabetically by blog title) 가운데서 선택한다
ㅇ 보여주기 (Show) : 드랍박스에서 가젯에 보여줄 갯수를 설정하고, 블로그 아이콘, 글 제목, 짧은 내용 보이기, 이미지 표시, 글 업데이트 날짜 등의 항목을 체크하거나 풀어서 선택한다.
=> 설정은 언제든 자유로이 바꿀 수 있으므로, 일단 생각대로 설정을 하여 가젯을 추가하여 보고, 잘 헤아려 다시 설정하는 것이 편하다.

2) 보여줄 홈페이지나 블로그 주소 입력하기
=> 위 그림의 아래 부분에 녹색으로 표시된 것과 같이 [목록추가 Add to List]를 클릭하면, 파랑색으로 표시한 것과 같은 주소입력창이 뜬다.
=> 주소는 예컨데, http://abcdefg.com 과 같이 URL을 입력한다.

URL을 입력하고 [추가 Add] 버튼을 누르면, 정상적으로 작동을 하면 저장이 되고, 그렇지 않으면 '입력한 URL 페이지를 읽을 수 없다'는 오류메시지가 뜬다.
이럴 때는 홈페이지나 블로그의 피드(RSS, XML) 주소링크를 찾아서 그 피드 주소를 입력해 주면 정상적으로 작동한다.

해당 홈페이지나 블로그에서 피드(RSS,Feed)의 접근 자체를 막는 경우는 어쩔 수 없다. 피드를 제한하는 경우가 드물지만 간혹 있는 듯 하다.

기본설정과 주소입력을 마쳤으면, 가젯창 맨 아래의 [저장, Save] 버튼을 눌러 저장을 한다.
입력한 주소가 많을 경우에는 저장하는 데 시간이 한 참 걸리기도 하고, 오류가 나기도 한다. 한참을 기다려도 반응이 없거나 오류가 나면, 다시 저장을 하면 저장이 된다.


3. 블로그-리스트 가젯 꾸미는 CSS 코드

블로그-리스트 가젯을 추가하면, 1, 2, 3 .... 의 숫자를 붙여, 가젯 아이디(ID)가 BlogList1 처름 자동으로 부여 된다.

[블로그-리스트 가젯 꾸미는 CSS 코드 모양]

#BlogList1 {
width: 390px;
margin: 0px 0px 0px -17px;
padding:0px;
border: 1px solid #efefef;
background-color: #eee;
..........
}

#BlogList1 a {color: #333;}
#BlogList1 a:hover {color: #222; background-color: #555;} 

ㅇ BlogList1 { ~~ } 는 블로그-리스트 전반에 적용된다
ㅇ BlogList1 a { ~~ } 는 가젯에 보여지는 내용 가운데 링크가 걸린 곳에 적용된다
ㅇ BlogList1 a:hover { ~~ } 는 가젯에 보여지는 목록에서 링크에 마우스가 올라 갔을 때 적용된다


[BlogList 가젯을 제어할 수 있는 항목]

#BlogList1 {width:360px; margin: 0px; padding: 0px;}
#BlogList1_container {margin: 0px; padding:0px;}
#BlogList1_blogs {margin: 0px; padding:0px;}
#BlogList1_show-all {font-size:0.7em;}

#BlogList1 .blog-content {margin: 0px; padding:0px;}
#BlogList1 .blog-title {margin: 0px; padding:0px;}

#BlogList1 .item-content {width:336px; padding: 0px;}
#BlogList1 .item-title {width:336px; padding: 0px;}
#BlogList1 .item-thumbnail {width:336px; padding: 0px;}
#BlogList1 .item-snippet {width:336px; padding: 0px;}

#BlogList1 ul {width:360px; margin: 0px; padding: 0px;}
#BlogList1 ul li {width:376px; margin: 0px; padding: 0px;}

너비(width), 높이(height), 바깥여백(margin), 안여백(padding), 색상(color), 폰트(font-size), 테두리(border), .... 등의 속성을 꾸미고자 하는 대로 사용하면 된다.
(CSS 코드를 넣는 방법은 링크 페이지 참조)


도움이 되기를 바랍니다.