구글블로그 사용법: 페이지(즈) 가젯 (pages gadget)으로 상단 헤더(header) 및 사이드바 메뉴 만들기와 꾸미기
페이지 가젯을 사용하면 아래 그림과 같은 메뉴바를 쉽게 만들 수 있다.
페이지 가젯으로 만든 메뉴와 다른 가젯으로 만든 메뉴의 차이점
메뉴는 라벨 가젯 (Label gadget), 링크리스트 가젯 (Link List gadget), HTML/Java script 가젯 등으로도 만들 수 있지만, 페이지 가젯으로 만드는 것과 차이가 있다. 페이지 가젯으로 만든 메뉴는 모바일 템플릿에도 그대로 적용이 되므로 모바일 기기에서도 메뉴가 보여지는 반면에 다른 가젯으로 만든 메뉴는 그렇지 않다.
[페이지 가젯으로 만든 상단 메뉴의 예]
페이지가젯으로 메뉴 만들기
페이지 가젯의 두 가지 기능: 페이지 가젯에서 메뉴 링크를 만드는 방법에는 페이지가젯에서 직접 링크를 걸어 주는 방법과 페이지즈(pages)로 만든 페이지에 링크를 거는 방법이 있다.
1) 페이지 가젯에서 직접 링크를 거는 방법
아래 그림에서 초록색 ① ② ③ 경로를 통해 가젯에서 직접 링크를 만들 수 있다.
=> ① 외부링크 추가 (+Add external link) > ② 페이지 타이틀 (메뉴 이름)과 연결 될 주소(URL)을 입력하고 저장(Save Link)
=> 그러면, ③과 같이 메뉴목록에 추가 된다. 예에서는 메뉴이름을 HTML 로 하였다.
=> 이 기능은 블로그 내의 글 뿐만이 아니라, 블로그 밖의 어떤 링크도 걸 수 있다.
2) 페이지즈 (pages)로 만든 페이지에 링크를 거는 방법
아래 그림에서 주황색 ① ② 경로를 통해 링크를 만든다.
=> 블로그 대시보드 > 페이지즈 (Pages) > 새 페이지 (New Page)를 선택하면, 블로그 글(post) 쓰기 창과 같은 모양의 페이지 작성 창이 열린다.
=> 페이지 작성에서 적은 글 제목이 곧 페이지가젯의 메뉴이름이 된다. (페이지 작성과 특성에 관한 자세한 내용은 링크 페이지 참조)
=> 페이지즈로 만든 페이지들은 주황색 ② 번과 같이 페이지가젯에 표시 된다. 메뉴바에 링크를 걸고자 하는 페이지 앞의 사각형 체크박스를 클릭하여 체크를 하면, 아래 쪽의 메뉴목록에 추가된다.
3) 메뉴 순서 조절하기
=> 아래 그램에서 초록색 ③ 번 (메뉴이름 "HTML")의 앞쪽에 보라색으로 표시한 것과 같이, 점으로 된 사각형 조정자를 마우스로 잡아 아래/위로 끌어 순서를 조절하면 된다.
=> 작업이 완료 되었으면 가젯의 맨 아래에 있는 저장(Save)을 눌러 가젯 창을 닫는다.
4) 페이지 가젯을 배치하는 위치와 모양
페이지가젯을 헤더(header) 영역에 넣으면, 맨 위의 그럼처럼, 가로 모양의 메뉴바가 되고, 페이지가젯을 사이드바 영역에 넣으면 세로 모양이 되어 링크리스트(Link List) 가젯과 같은 모양이 된다.
블로그 대시보드 > 레이아웃(Layout)에서 헤더 영역은 헤드(Header), 크로스-칼럼(Cross-column)이다. 곧, 이 영역에 페이지 가젯을 넣으면, 가로 모양의 메뉴바가 된다.
5) 페이지 가젯을 CSS로 꾸미거나 제어하기
페이지 가젯의 고유 아이디(ID)는 PageList1 PageList2 PageList3 ... 로 부여되므로, 아래와 같이 CSS를 설정하면 된다.
#PageList1 {margin: 0px; padding: 0px;}
#PageList1 ul {margin: 0px; padding: 0px;}
#PageList1 ul li {margin: 0px; padding: 0px;}
#PageList1 ul li a {margin: 0px; padding: 0px;}
#PageList1 ul li a:hover {margin: 0px; padding: 0px;}
첫번째는 페이지 가젯 영역 전체를 제어 하는 것이고, 두 번째는 링크를 제어하는 것이고, 세번째는 마우스가 올라 갔을 때를 제어하는 것이다. (CSS코드를 넣는 방법은 링크페이지 참조)
6) 아래의 이전 버전 내용 가운데서,
3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)는 변함이 없으므로 참고 하면 되겠다.
<< (주) 아래는 기능이 변경되기 이전의 내용입니다. >>
구글 블로그의 페이지즈(pages)는 두 가지 기능을 가지고 있다.
하나는 일반 글(posts)쓰기와 같이 글을 쓸 수 있는 기능이고, 또 하나는 특정 주소(URL)로 연결(redirect)시킬 수 있는 링크를 걸어 메뉴를 만드는 기능이다.
1. 페이지(pages) 만들기 창으로 가기
옆의 그림과 같이
=> 블로그 대시보드 > 페이지(Pages)를 누르면, 그림의 오른쪽에 보이는 것과 같은 페이지를 만드는 창이 열린다.
아무런 페이지를 만들지 않았다면 즉 초기 상태라면, 기본적으로 [Home] 하나만 만들어져 있다.
[Home] 페이지의 편집(Edit)을 누르면, 그림의 오른쪽 아래에 주황색으로 표시한 것과 같은 창이 뜬다.
[Home]은 최신 글을 맨위로 하여 지정된 숫자만큼 보여지도록 되어 있으므로, 변경이 되지 않는다. 다만, 그림에서 보듯이 "Home"라는 글자는 "대문" "나들문" 등과 같이 원하는 대로 변경할 수 있다.
2. 새 페이지 만들기(New Page)
아래 그림처럼, 새페이지(New page)를 누르면, 두 가지 메뉴가 있다.
ㅇ 빈페이지 : 텍스트나 미디어를 올림 (Blank page : Add text and media)
ㅇ 웹 주소 : 방문자를 다른 웹주소로 연결시킴(Web address : Send reader to another web address)
1) 빈페이지(Blank page): 일반적인 글 올리기
빈페이지는 일반 글쓰기(posts)와 같이 글이나 그림 동영상 등을 넣어서 웹페이지를 만들 수 있지만, 일반 글쓰기(posts)와는 목적과 기능에 차이가 있다. 자세한 내용은 다음 페이지를 참고 하기 바란다.
글(posts)과 페이지즈(pages) 차이점 >>
2) 웹 주소(Web Address) : 메뉴 만들기
=>대시보드 > 페이지(pages) > 새페이지(New page) > 웹주소(Web address)를 누르면, 아래 그림과 같이 웹주소를 연결(리다이렉트)할 수 있는 창이 열린다.
두 개의 입력란 가운데
ㅇ 첫 번째 입력란에는 만드는 페이지의 이름을 입력한다. 페이지의 이름은 블로그 상단(헤더)나 사이드바의 메뉴 이름이 되므로, 그 점을 고려하여 알맞게 만들면 된다.
ㅇ 두 번째 입력란에는 메뉴를 눌렀을 때 연결될 목적지 페이지의 주소(URL)을 입력한다.
창의 맨 아래에 있는 저장(Save)을 누르면, 위 그림에서 본 [Home] 아래에 새로 만든 페이지 이름이 표시된다.
3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)
1) 블로그 밖의 웹주소 연결 메뉴
위의 그림에서 웹주소(URL)는 블로그 안에 있는 글의 주소 뿐만이 아니라 블로그 밖의 주소도 허용이 된다. 예컨데, 친구의 블로그 주소나 트위트 주소도 연결 시킬 수 있다.
2) 구글 블로그에서 메뉴 링크를 만드는 방법은 라벨(Label)검색을 이용하는 방법과 글 검색을 이용하는 방법이 있다. 물론 외부의 API를 이용하면 다양한 링크를 만들 수 도 있다.
2-1) 라벨검색 링크 만들기
블로그 글이나 라벨가젯에서 메뉴링크로 만들고자 하는 라벨을 클릭한 다음, 브라우저의 주소창에 있는 주소(URL)를 복사하여 넣으면 된다. 라벨검색결과 페이지의 주소 모양새는 아래와 같다.
http://howways.blogspot.kr/search/label/구글블로그
빨강색 부분이 라벨 이름이며, 라벨검색에서는 정확히 일치하지 않으면 검색이 되지 않는다. 라벨검색 링크는 하나의 라벨만을 검색하여 만들 수도 있고, 여러개의 라벨을 그리고(AND)로직이나 또는(OR)로직으로 검색하여 만들 수도 있다. 라벨과 관련된 상세한 내용은 다음 글을 참조하기 바란다.
메뉴(카테고리/ 목록) 만들 때 주의사항 - 라벨(Label) 및 검색 페이지 링크 >>
복수 라벨(Label) 검색 - 그리고(and) / 또는(or) 검색 >>
글에 라벨(Label) 달기/넣기 방법 >>
2-2) 글 검색 링크 만들기
블로그 검색결과 페이지를 메뉴링크로 만들고자 한다면, 검색창에서 원하는 검색을 한 다음, 브라우저의 주소(URL)를 복사하여 넣으면 된다. 주소 모양새는 아래와 같다.
http://howways.blogspot.com/search?q=구글블로그
빨강색 부분이 입력한 검색어이다. 위의 라벨검색에서와 마찬가지로, 검색어 검색에서도 하나의 검색어를 검색하여 메뉴링크를 만들 수도 있고, 여러개의 검색어를 그리고(AND)로직이나 또는(OR)로직으로 검색하여 메뉴링크를 만들 수도 있다.
검색에 관한 자세한 내용은 아래의 글을 참고하기 바란다.
검색창에서 그리고(AND)로직과 또는(OR)로직으로 검색하기 - 복수 검색어 검색 >>
4. 페이지 순서 바꾸기
페이지가젯으로 만든 메뉴바에는 왼쪽 그림과 같은 페이지 목록에 있는 순서대 로 표시된다.
페이지의 순서를 바꾸려면,
옆의 그림에서 초록색으로 표시한 것과 같이 각각의 페이지 이름 왼쪽에 있는 회색부분을 마우스로 끌어서 위/아래로 움직여 원하는 위치에 놓으면 된다.
5. 메뉴 위치 설정하기(상단 헤더 / 사이드바)
메뉴바에 표시할 메뉴페이지가 모두 만들어 졌으면, 메뉴바를 표시할 위치를 지정한다.
옆의 그림과 같이 "Show pages as"옆에 있는 버튼을 누르면 세 가지 위치를 선택할 수 있는 창이 열린다.
첫 번째의 상단 탭(Top tabs)은 블로그의 이름과 설명(Blog Title, Description)이 들어 있는 헤더(Header) 바로 아래에 메뉴바가 표시된다.
두 번째의 사이드바(Side links)는 블로그에 사이드바가 있을 경우에 사이드바에 표시된다.
세 번째의 보이지 않음(Don't show)은 페이지로 메뉴를 만들어 놓았지만, 블로그에는 표시되지 않는다.
이 설정에서 상단 헤더나 사이드바에 표시되도록 선택하였다면,
블로그 대시보드 > 짜임새(Layout) 페이지에 아래와 같이 [페이지 가젯: Pages]이 만들어져 있다.
페이지가젯은 메뉴바의 위치를 상단탭(Top tabs)로 설정하면 블로그 이름이 표시된 헤더(Header)가젯 바로 아래에 추가되고, 사이드바(Side links)로 설정하면 사이드바 가젯란에 추가된다.
※ 아래의 그림은 이 블로그의 상단 메뉴바를 페이지(pages)의 웹주소(Web address) 기능으로 만든 것이다. 링크는 라벨검색 링크를 사용하였다.
페이지 가젯으로 만든 메뉴와 다른 가젯으로 만든 메뉴의 차이점
메뉴는 라벨 가젯 (Label gadget), 링크리스트 가젯 (Link List gadget), HTML/Java script 가젯 등으로도 만들 수 있지만, 페이지 가젯으로 만드는 것과 차이가 있다. 페이지 가젯으로 만든 메뉴는 모바일 템플릿에도 그대로 적용이 되므로 모바일 기기에서도 메뉴가 보여지는 반면에 다른 가젯으로 만든 메뉴는 그렇지 않다.
[페이지 가젯으로 만든 상단 메뉴의 예]
페이지가젯으로 메뉴 만들기
페이지 가젯의 두 가지 기능: 페이지 가젯에서 메뉴 링크를 만드는 방법에는 페이지가젯에서 직접 링크를 걸어 주는 방법과 페이지즈(pages)로 만든 페이지에 링크를 거는 방법이 있다.
1) 페이지 가젯에서 직접 링크를 거는 방법
아래 그림에서 초록색 ① ② ③ 경로를 통해 가젯에서 직접 링크를 만들 수 있다.
=> ① 외부링크 추가 (+Add external link) > ② 페이지 타이틀 (메뉴 이름)과 연결 될 주소(URL)을 입력하고 저장(Save Link)
=> 그러면, ③과 같이 메뉴목록에 추가 된다. 예에서는 메뉴이름을 HTML 로 하였다.
=> 이 기능은 블로그 내의 글 뿐만이 아니라, 블로그 밖의 어떤 링크도 걸 수 있다.
2) 페이지즈 (pages)로 만든 페이지에 링크를 거는 방법
아래 그림에서 주황색 ① ② 경로를 통해 링크를 만든다.
=> 블로그 대시보드 > 페이지즈 (Pages) > 새 페이지 (New Page)를 선택하면, 블로그 글(post) 쓰기 창과 같은 모양의 페이지 작성 창이 열린다.
=> 페이지 작성에서 적은 글 제목이 곧 페이지가젯의 메뉴이름이 된다. (페이지 작성과 특성에 관한 자세한 내용은 링크 페이지 참조)
=> 페이지즈로 만든 페이지들은 주황색 ② 번과 같이 페이지가젯에 표시 된다. 메뉴바에 링크를 걸고자 하는 페이지 앞의 사각형 체크박스를 클릭하여 체크를 하면, 아래 쪽의 메뉴목록에 추가된다.
3) 메뉴 순서 조절하기
=> 아래 그램에서 초록색 ③ 번 (메뉴이름 "HTML")의 앞쪽에 보라색으로 표시한 것과 같이, 점으로 된 사각형 조정자를 마우스로 잡아 아래/위로 끌어 순서를 조절하면 된다.
=> 작업이 완료 되었으면 가젯의 맨 아래에 있는 저장(Save)을 눌러 가젯 창을 닫는다.
페이지가젯을 헤더(header) 영역에 넣으면, 맨 위의 그럼처럼, 가로 모양의 메뉴바가 되고, 페이지가젯을 사이드바 영역에 넣으면 세로 모양이 되어 링크리스트(Link List) 가젯과 같은 모양이 된다.
블로그 대시보드 > 레이아웃(Layout)에서 헤더 영역은 헤드(Header), 크로스-칼럼(Cross-column)이다. 곧, 이 영역에 페이지 가젯을 넣으면, 가로 모양의 메뉴바가 된다.
5) 페이지 가젯을 CSS로 꾸미거나 제어하기
페이지 가젯의 고유 아이디(ID)는 PageList1 PageList2 PageList3 ... 로 부여되므로, 아래와 같이 CSS를 설정하면 된다.
#PageList1 {margin: 0px; padding: 0px;}
#PageList1 ul {margin: 0px; padding: 0px;}
#PageList1 ul li {margin: 0px; padding: 0px;}
#PageList1 ul li a {margin: 0px; padding: 0px;}
#PageList1 ul li a:hover {margin: 0px; padding: 0px;}
첫번째는 페이지 가젯 영역 전체를 제어 하는 것이고, 두 번째는 링크를 제어하는 것이고, 세번째는 마우스가 올라 갔을 때를 제어하는 것이다. (CSS코드를 넣는 방법은 링크페이지 참조)
6) 아래의 이전 버전 내용 가운데서,
3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)는 변함이 없으므로 참고 하면 되겠다.
<< (주) 아래는 기능이 변경되기 이전의 내용입니다. >>
구글 블로그의 페이지즈(pages)는 두 가지 기능을 가지고 있다.
하나는 일반 글(posts)쓰기와 같이 글을 쓸 수 있는 기능이고, 또 하나는 특정 주소(URL)로 연결(redirect)시킬 수 있는 링크를 걸어 메뉴를 만드는 기능이다.
1. 페이지(pages) 만들기 창으로 가기
옆의 그림과 같이
=> 블로그 대시보드 > 페이지(Pages)를 누르면, 그림의 오른쪽에 보이는 것과 같은 페이지를 만드는 창이 열린다.
아무런 페이지를 만들지 않았다면 즉 초기 상태라면, 기본적으로 [Home] 하나만 만들어져 있다.
[Home] 페이지의 편집(Edit)을 누르면, 그림의 오른쪽 아래에 주황색으로 표시한 것과 같은 창이 뜬다.
[Home]은 최신 글을 맨위로 하여 지정된 숫자만큼 보여지도록 되어 있으므로, 변경이 되지 않는다. 다만, 그림에서 보듯이 "Home"라는 글자는 "대문" "나들문" 등과 같이 원하는 대로 변경할 수 있다.
2. 새 페이지 만들기(New Page)
아래 그림처럼, 새페이지(New page)를 누르면, 두 가지 메뉴가 있다.
ㅇ 빈페이지 : 텍스트나 미디어를 올림 (Blank page : Add text and media)
ㅇ 웹 주소 : 방문자를 다른 웹주소로 연결시킴(Web address : Send reader to another web address)
1) 빈페이지(Blank page): 일반적인 글 올리기
빈페이지는 일반 글쓰기(posts)와 같이 글이나 그림 동영상 등을 넣어서 웹페이지를 만들 수 있지만, 일반 글쓰기(posts)와는 목적과 기능에 차이가 있다. 자세한 내용은 다음 페이지를 참고 하기 바란다.
글(posts)과 페이지즈(pages) 차이점 >>
2) 웹 주소(Web Address) : 메뉴 만들기
=>대시보드 > 페이지(pages) > 새페이지(New page) > 웹주소(Web address)를 누르면, 아래 그림과 같이 웹주소를 연결(리다이렉트)할 수 있는 창이 열린다.
두 개의 입력란 가운데
ㅇ 첫 번째 입력란에는 만드는 페이지의 이름을 입력한다. 페이지의 이름은 블로그 상단(헤더)나 사이드바의 메뉴 이름이 되므로, 그 점을 고려하여 알맞게 만들면 된다.
ㅇ 두 번째 입력란에는 메뉴를 눌렀을 때 연결될 목적지 페이지의 주소(URL)을 입력한다.
창의 맨 아래에 있는 저장(Save)을 누르면, 위 그림에서 본 [Home] 아래에 새로 만든 페이지 이름이 표시된다.
3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)
1) 블로그 밖의 웹주소 연결 메뉴
위의 그림에서 웹주소(URL)는 블로그 안에 있는 글의 주소 뿐만이 아니라 블로그 밖의 주소도 허용이 된다. 예컨데, 친구의 블로그 주소나 트위트 주소도 연결 시킬 수 있다.
2) 구글 블로그에서 메뉴 링크를 만드는 방법은 라벨(Label)검색을 이용하는 방법과 글 검색을 이용하는 방법이 있다. 물론 외부의 API를 이용하면 다양한 링크를 만들 수 도 있다.
2-1) 라벨검색 링크 만들기
블로그 글이나 라벨가젯에서 메뉴링크로 만들고자 하는 라벨을 클릭한 다음, 브라우저의 주소창에 있는 주소(URL)를 복사하여 넣으면 된다. 라벨검색결과 페이지의 주소 모양새는 아래와 같다.
http://howways.blogspot.kr/search/label/구글블로그
빨강색 부분이 라벨 이름이며, 라벨검색에서는 정확히 일치하지 않으면 검색이 되지 않는다. 라벨검색 링크는 하나의 라벨만을 검색하여 만들 수도 있고, 여러개의 라벨을 그리고(AND)로직이나 또는(OR)로직으로 검색하여 만들 수도 있다. 라벨과 관련된 상세한 내용은 다음 글을 참조하기 바란다.
메뉴(카테고리/ 목록) 만들 때 주의사항 - 라벨(Label) 및 검색 페이지 링크 >>
복수 라벨(Label) 검색 - 그리고(and) / 또는(or) 검색 >>
글에 라벨(Label) 달기/넣기 방법 >>
2-2) 글 검색 링크 만들기
블로그 검색결과 페이지를 메뉴링크로 만들고자 한다면, 검색창에서 원하는 검색을 한 다음, 브라우저의 주소(URL)를 복사하여 넣으면 된다. 주소 모양새는 아래와 같다.
http://howways.blogspot.com/search?q=구글블로그
빨강색 부분이 입력한 검색어이다. 위의 라벨검색에서와 마찬가지로, 검색어 검색에서도 하나의 검색어를 검색하여 메뉴링크를 만들 수도 있고, 여러개의 검색어를 그리고(AND)로직이나 또는(OR)로직으로 검색하여 메뉴링크를 만들 수도 있다.
검색에 관한 자세한 내용은 아래의 글을 참고하기 바란다.
검색창에서 그리고(AND)로직과 또는(OR)로직으로 검색하기 - 복수 검색어 검색 >>
4. 페이지 순서 바꾸기
페이지가젯으로 만든 메뉴바에는 왼쪽 그림과 같은 페이지 목록에 있는 순서대 로 표시된다.
페이지의 순서를 바꾸려면,
옆의 그림에서 초록색으로 표시한 것과 같이 각각의 페이지 이름 왼쪽에 있는 회색부분을 마우스로 끌어서 위/아래로 움직여 원하는 위치에 놓으면 된다.
5. 메뉴 위치 설정하기(상단 헤더 / 사이드바)
메뉴바에 표시할 메뉴페이지가 모두 만들어 졌으면, 메뉴바를 표시할 위치를 지정한다.
옆의 그림과 같이 "Show pages as"옆에 있는 버튼을 누르면 세 가지 위치를 선택할 수 있는 창이 열린다.
첫 번째의 상단 탭(Top tabs)은 블로그의 이름과 설명(Blog Title, Description)이 들어 있는 헤더(Header) 바로 아래에 메뉴바가 표시된다.
두 번째의 사이드바(Side links)는 블로그에 사이드바가 있을 경우에 사이드바에 표시된다.
세 번째의 보이지 않음(Don't show)은 페이지로 메뉴를 만들어 놓았지만, 블로그에는 표시되지 않는다.
이 설정에서 상단 헤더나 사이드바에 표시되도록 선택하였다면,
블로그 대시보드 > 짜임새(Layout) 페이지에 아래와 같이 [페이지 가젯: Pages]이 만들어져 있다.
페이지가젯은 메뉴바의 위치를 상단탭(Top tabs)로 설정하면 블로그 이름이 표시된 헤더(Header)가젯 바로 아래에 추가되고, 사이드바(Side links)로 설정하면 사이드바 가젯란에 추가된다.
※ 아래의 그림은 이 블로그의 상단 메뉴바를 페이지(pages)의 웹주소(Web address) 기능으로 만든 것이다. 링크는 라벨검색 링크를 사용하였다.