구글 블로그 사용법: 가젯(위젯)을 특정한 페이지 또는 모바일에만 보이거나 숨기는 방법
구글 블로그에서, 특정한 가젯을 특정한 페이지, 특정한 라벨(태그) 페이지, 또는 첫 페이, 모바일과 데스크탑 등을 선택적으로 보이게 하거나 숨길 수 있습니다.
가젯뿐만 아니라, 특정한 영역도 설정하여 적용할 수 있고, 특정한 페이지에만 적용되는 CSS나 스크립트를 해당 페이지에만 적용되게 할 수도 있습니다. 이러한 기능은 구글 블로그가 가지고 있는 큰 장점 가운데 하나라 할 수 있습니다.
방법은 간단히 태그만 설정해 주면 됩니다.
HTML 편집창에서, 숨기거나 보이게 하려는 가젯에 특정성을 주는 태그와 해당 주소(URL)를 넣어 주면 됩니다.
다만, 도메인 주소(URL)를 사용하는 것이므로, 방문자의 접속 위치에 따라 도메인주소가 바뀌는 blogspot 주소에서는 작동을 하지 못합니. 블로그에 자신의 도메인을 연결 시킨 경우에만 사용할 수 있습니다.
태크는 구형과 신형 두 가지가 있습니다. 어느쪽을 사용하여도 잘 작동합니다. 새로이 태그를 설정할 때는 가급적이면, 신형 태그를 사용하는 것이 낫지 않나 싶습니다. 아래의 각 태그에서, 위쪽은 신형 태그이고, 아래쪽은 구형 태그 입니다. 신형 태그는 data:view~ 로 되어 있고, 구형 태그는 data:blog~ 로 되어 있습니다.
1. 가젯에 추가할 태그 선택
어떤 페이지에서 보이거나 숨길지를 생각하고 아래에서 적당한 코드를 선택한다.
[홈페이지 (첫 페이지)에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 첫페이지(홈페이지)에만 해당 가젯이 보인다.
[인덱스(목록) 페이지에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 글 목록이 표시되는 모든 페이지에만 해당 가젯이 보인다.
[개별 글 (포스트) 페이지에만 보이게 하는 태그]
이 코드를 추가하면, 개별 글 페이지에만 보인다.
[스태틱 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 스태틱 페이지, 일반 글(post)쓰기가 아니라, pages로 만든 페이지에만 보인다.
[싱글 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 싱글 페이지에서만 가젯을 보이게 하고, 목록 페이지에서는 가젯이 보이지 않게 된다. 싱글 페이지는 일반 글(post)와 pages로 만든 페이지를 모두 지칭한다.
[아카이브 (Archive) 페이지에만 보이게 하는 태그]
이 코드는 아카이브 페이지에서만 가젯을 보이게 한다.
[라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 라벨을 클릭하여 라벨 검색 결과 페이지에서만 가젯을 보이게 한다.
[특정 라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.
[검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 바로 위의 코드와 정 반대로, 개별 글 페이지에서는 가젯이 보이지 않고 검색결과나 라벨 페이지 등에서만 보이게 한다.
[특정 검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.
[글(post) 가운데 첫 번째 포스트 페이지에만 보이게 하는 태그]
이 코드는 포스트가 여러개 나열 될 때, 첫 번째 포스트 페이지에서만 가젯을 보이게 한다.
[특정한 글 (포스트)이나 라벨 등 지정된 주소(URL) 페이지에만 보이게 하는 태그]
이 코드는 지정된 주소 페이지에만 가젯을 보인다. 빨강색 부분은 지정할 페이지의 주소(URL)를 넣는 곳이므로, 원하는 주소로 대체를 하면 된다. (자세한 설명은 아래에서 설명)
[오류 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.
[미리보기(preview) 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.
[모바일에서만 보이는 태그]
이 코드는 모바일 기기에서만 보이게 한다.
[모바일에서는 숨기는 태그]
이 코드는 모바일 기기에서는 표시되지 않도록 숨기는 코드이다. 신형 태그에서는 ! 를 붙이고, 구형 태그에서는 false 를 추가한다.
[목록 페이지에서, 첫 번째 포스트에만 보이는 태그]
이 코드는 홈페이지, 라벨 검색 페이지, 검색 페이지 등과 같은 목록 페이지에서, 첫 번째 글(포스트)에서만 가젯을 보이게 한다. 예를 들어, 광고나 특정한 안내문 등이 목록 페이지의 첫번째 글 위 또는 아래에만 보여지도록 할 때 사용하면 된다.
[신형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 신형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 신형 태그들은 모두 이와 같이 하면 된다.
[구형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 구형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 구형 태그들은 모두 이와 같이 하면 된다.
[복수 조건 설정 태그]
이 코드는 개별 글(포스트) 페이지와 페이지(pages)로 만든 스태틱 페이지 등 싱글 페이지 에서는 가젯을 나타나지 않도록, 복수의 조건을 설정한 태그이다. 복수의 조건은 and 로 연결한다.
[복수 조건 태그 예 2]
"모바일이 아니면 + 그리고 + 홈페이지에만" 보이게 하는 예이다. 곧, 데스크탑 홈페이지에만 보이게 하는 태그이다.
2. 특정할 주소를 찾아 코드 만들기
위에서 끝에 있는 두 종류의 태그를 사용하려면, 특정하려는 페이지의 주소(URL)가 있어야 하므로 아래와 같이 주소를 찾아 코드를 만들면 되고, 다른 태그를 사용하려는 경우에는 이 단계가 필요 없으므로 넘어 가면 된다.
주소를 찾는 방법은 아래 그림과 같이 해당 페이지를 열어 놓고 브라우저 주소창의 주소를 복사하면 된다.
방법은 브라우저 주소창을 마우스로 클릭하면 주소가 선택되어 색상이 반전된다. 그러면 키보드에서 [컨트롤+C]를 치면 복사가 되고, 메모장 등에 붙여 넣기 (컨트롤+V) 하면 된다.
특정한 주소 페이지에만 가젯을 보이려 한다면, 아래와 같은 코드를 선택하고, 복사한 주소(URL)로 빨강색 부분을 대체하여 코드를 완성한다.
[코드 완성 전의 모습]
[코드 완성 후의 모습]
3. 가젯에 이름 붙여 쉽게 찾아가기
위에서 사용할 코드를 만들었으니, 이제 HTML에 추가하면 된다. HTML 편집창을 열기에 앞서 해당 가젯에 이름을 붙여 주면 편집창에서 찾기가 쉽다.
가젯 이름은 간단하게 "안내" "작업" .... 등과 같이 편한대로 붙여 주면 되고, 방법은
=> 블로그 대시보드 > 레이아웃(Layout) 창을 열고 > 해당 가젯의 [편집: Edit] 버튼을 눌러 가젯 편집창을 연다
=> 가젯 이름(Title)에 적당한 이름을 넣고, 저장을 한다. 그림의 예에서는 '길안내'라고 이름을 붙였다.
4. HTML 편집창을 열고 해당 가젯에 준비한 태그 추가
=> 블로그 대시보드 > 템플릿 > HTML편집(Edit HTML)을 눌러 편집창을 엽니다.
=> 편집창의 빈 곳 아무데나에 마우스로 클릭하여 편집창을 활성화 한 다음 > [컨트롤+F]키를 쳐서 검색창을 열고 > 해당 가젯 이름을 입력하고 [엔터]키를 치면 > 해당 가젯으로 이동되고 가젯의 이름에 노랑색 표시가 됩니다.
태그를 삽입하는 방법은 두 가지가 있습니다. 아래에서 설명하는 첫 번째 방법은 새로 알게 된 방법이고, 두 번째 방법은 이전에 알게 된 방법입니다. 개인적인 생각으로는 첫 번째 방법이 더 나은 것 같습니다. 왜 그런가는 이 페이지 맨 아래에 비교하여 설명하도록 합니다.
1) 첫 번째 방법 : <b:widget ~ 코드 부분에 직접 추가
=> 해당 가젯으로 이동하면, 해당 가젯은 아래 그림에서 보는 것처름
<b:widget id='HTML6' locked='true' ~~> 로 되어 있습니다. 이 코드에 직접 코드를 추가합니다. 추가하는 위치는 <b:widget 바로 뒤에 추가합니다.
=> 위에서 설명한 여러가지 코드들은
<b:if cond='data:blog.pageType == "index"'> 모양입니다. <b:if 부분은 빼고, 안의 cond='~~~~~~' 부분만 추가해야 합니다. 예컨데, 아래의 빨강색 부분만 추가하는 것입니다.
<b:if cond='data:blog.pageType == "index"'>
=> 그러면, 아래 그림에서 노랑색으로 표시한 부분과 같이,
<b:widget cond='data:blog.pageType == "index"' id='HTML6' ~~~~~와 같은 모습이 됩니다.
=> 이로서 작업이 끝났고, HTML 편집창의 맨위에 있는 저장(Save) 버튼을 눌러 저장을 하고 편집창을 닫으면 됩니다.
2) 두 번째 방법: <b:includable id='main'> 코드 바로 아래에 추가
=> 해당 가젯의 태그들이 닫혀 있으므로, 왼쪽에 있는 화살표(▶)를 눌러 닫힌 태그를 엽니다. 화살표를 한 번 누르면 그 안에 또 같은 화살표가 나옵니다. 그러면 또 눌러 아래 두번째 그림과 같이 태그를 활짝 엽니다.
=> 가젯 이름(그림의 예에서는 '길안내')의 바로 아래 줄 <b:includable id='main'>의 바로 아래에 그림과 같이 준비한 태그를 추가 합니다.
그러면, <b:> 태그의 쌍이 맞지 않으므로, 그 아래의 </b:includable> 부분이 빨강색으로 표시됩니다.
=> 그림과 같이 </b:includable> 바로 위에 곧, <b:include name='quickedit' /> 바로 아래에 </b:if> 를 추가하여 <b:> 태그를 닫아 줍니다. 그러면, 빨강색 경고 표시가 녹색으로 바뀝니다.
=> 코드 추가가 끝났으므로, 편집창 맨 위의 [저장: Save template] 버튼을 눌러 저장을 하고 편집창을 닫습니다.
저장을 하면 아무런 응답이 없는 경우도 있고, 저장이 되었는데도 편집창을 닫으면 저장되지 않았다는 경고 메시지가 뜨기도 하지만, 대체로 정상적으로 저장이 됩니다.
일단 편집창을 닫은 다음, 다시 편집창을 열어 확인을 해 보고 만약 저장이 안되었으면, 다시 추가 하고 저장하면 됩니다.
=> 편집창에서 나왔으면, 블로그 대시보드 > 레이아웃(Layout)으로 가서, 가젯에 붙였던 이름을 삭제하고 저장을 합니다. 가젯의 이름을 삭제해도 위에서 설정한 기능은 정상적으로 작동합니다. 가젯의 이름이 블로그에 그대로 보이게 하고 싶으면 그냥 두면 됩니다.
=> 페이지 맨 위에서 본 여러가지 코드들도 코드를 추가하는 위치와 방법은 모두 같습니다.
어떻게 보면 아주 복잡한 것 같지만, 실제로 해보면 간단합니다.
이 기능을 잘 활용하면 여러가지 가젯을 필요한 페이지에만 보이게 함으로써 방문자에게 좀 더 깔끔하고 편리한 블로그를 만드는 데에 도움이 될 것입니다.
3) 위 첫 번째 방법과 두 번째 방법의 차이점
아래의 두 그림에서 각각 하단 부분에 녹색 사각형으로 표시한 부분을 보면 두 방법의 차이를 알 수 있습니다. 녹색 사갹형으로 표시한 부분은 페이지의 소스보기에서 해당 가젯이 위치하는 부분입니다.
첫 번째 방법으로 하면, 그림의 녹색 사각형 부분에서 보듯이, 가젯 자체가 아예 표시되지 않아 깔끔합니다. 예에서 추가한 가젯 아이디는 HTML6 이고, 아래 녹색 사각형으로 표시한 소스에서 두 줄 가운데에 위치하고 있지만, 표시되지 않습니다.
[첫 번째 방법]
두 번째 방법으로 하면, 아래 그림의 녹색 사각형 부분에서 보듯이, 페이지 소스보기를 해 보면 가젯 영역이 표시됩니다. 다만, 가젯에 들어 있는 내용부분은 표시되지 않습니다.
[두 번째 방법]
한마디로 말하자면, 첫 번째 방법은 가젯 영역자체가 아예 표시되지 않는 것이고, 두 번째 방법은 가젯영역은 표시되지만 그 내용은 표시되지 않는 것입니다. 그러므로, 첫 번째 방법이 더 깔끔하고 나은 것으로 생각됩니다.
참고 : 구글 도움말
>> https://support.google.com/blogger/answer/47270?hl=ko
>> https://support.google.com/blogger/answer/47270?hl=en
>> https://support.google.com/blogger/answer/176245?hl=ko&ref_topic=6321969
가젯뿐만 아니라, 특정한 영역도 설정하여 적용할 수 있고, 특정한 페이지에만 적용되는 CSS나 스크립트를 해당 페이지에만 적용되게 할 수도 있습니다. 이러한 기능은 구글 블로그가 가지고 있는 큰 장점 가운데 하나라 할 수 있습니다.
방법은 간단히 태그만 설정해 주면 됩니다.
HTML 편집창에서, 숨기거나 보이게 하려는 가젯에 특정성을 주는 태그와 해당 주소(URL)를 넣어 주면 됩니다.
다만, 도메인 주소(URL)를 사용하는 것이므로, 방문자의 접속 위치에 따라 도메인주소가 바뀌는 blogspot 주소에서는 작동을 하지 못합니. 블로그에 자신의 도메인을 연결 시킨 경우에만 사용할 수 있습니다.
태크는 구형과 신형 두 가지가 있습니다. 어느쪽을 사용하여도 잘 작동합니다. 새로이 태그를 설정할 때는 가급적이면, 신형 태그를 사용하는 것이 낫지 않나 싶습니다. 아래의 각 태그에서, 위쪽은 신형 태그이고, 아래쪽은 구형 태그 입니다. 신형 태그는 data:view~ 로 되어 있고, 구형 태그는 data:blog~ 로 되어 있습니다.
1. 가젯에 추가할 태그 선택
어떤 페이지에서 보이거나 숨길지를 생각하고 아래에서 적당한 코드를 선택한다.
[홈페이지 (첫 페이지)에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 첫페이지(홈페이지)에만 해당 가젯이 보인다.
신형 태그
<b:if cond="data:view.isHomepage">.....</b:if>
구형 태그
<b:if cond='data:blog.url == data:blog.homepageUrl'>.....</b:if>
<b:if cond="data:view.isHomepage">.....</b:if>
구형 태그
<b:if cond='data:blog.url == data:blog.homepageUrl'>.....</b:if>
[인덱스(목록) 페이지에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 글 목록이 표시되는 모든 페이지에만 해당 가젯이 보인다.
<b:if cond='data:view.isMultipleItems'>.....</b:if>
<b:if cond='data:blog.pageType == "index"'>.....</b:if>
<b:if cond='data:blog.pageType == "index"'>.....</b:if>
[개별 글 (포스트) 페이지에만 보이게 하는 태그]
이 코드를 추가하면, 개별 글 페이지에만 보인다.
<b:if cond='data:view.isPost'>.....</b:if>
<b:if cond='data:blog.pageType == "item"'>.....</b:if>
<b:if cond='data:blog.pageType == "item"'>.....</b:if>
[스태틱 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 스태틱 페이지, 일반 글(post)쓰기가 아니라, pages로 만든 페이지에만 보인다.
<b:if cond='data:view.isPage'>.....</b:if>
<b:if cond='data:blog.pageType == "static_page"'>.....</b:if>
<b:if cond='data:blog.pageType == "static_page"'>.....</b:if>
[싱글 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 싱글 페이지에서만 가젯을 보이게 하고, 목록 페이지에서는 가젯이 보이지 않게 된다. 싱글 페이지는 일반 글(post)와 pages로 만든 페이지를 모두 지칭한다.
<b:if cond='data:view.isSingleItem'>.....</b:if> (신형)
<b:if cond='data:blog.pageType in ["item", "static_page"]'>.....</b:if> (구형)
<b:if cond='data:blog.url == data:post.url'>.....</b:if> (구형)
<b:if cond='data:blog.pageType in ["item", "static_page"]'>.....</b:if> (구형)
<b:if cond='data:blog.url == data:post.url'>.....</b:if> (구형)
[아카이브 (Archive) 페이지에만 보이게 하는 태그]
이 코드는 아카이브 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:view.isArchive'>.....</b:if>
<b:if cond='data:blog.pageType == "archive"'>.....</b:if>
<b:if cond='data:blog.pageType == "archive"'>.....</b:if>
[라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 라벨을 클릭하여 라벨 검색 결과 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:view.isLabelSearch'>.....</b:if>
<b:if cond='data:blog.searchLabel'>.....</b:if>
<b:if cond='data:blog.searchLabel'>.....</b:if>
[특정 라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.
<b:if cond='data:blog.searchLabel == "블로그스팟"'>....</b:if>
[검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 바로 위의 코드와 정 반대로, 개별 글 페이지에서는 가젯이 보이지 않고 검색결과나 라벨 페이지 등에서만 보이게 한다.
<b:if cond='data:view.isSearch'>.....</b:if>
<b:if cond='data:blog.searchQuery'>.....</b:if>
<b:if cond='data:blog.searchQuery'>.....</b:if>
[특정 검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.
<b:if cond='data:blog.searchQuery == "블로그스팟"'>....</b:if>
[글(post) 가운데 첫 번째 포스트 페이지에만 보이게 하는 태그]
이 코드는 포스트가 여러개 나열 될 때, 첫 번째 포스트 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:post.isFirstPost'>.....</b:if>
[특정한 글 (포스트)이나 라벨 등 지정된 주소(URL) 페이지에만 보이게 하는 태그]
이 코드는 지정된 주소 페이지에만 가젯을 보인다. 빨강색 부분은 지정할 페이지의 주소(URL)를 넣는 곳이므로, 원하는 주소로 대체를 하면 된다. (자세한 설명은 아래에서 설명)
<b:if cond='data:blog.url == "URL of the page"'>.....</b:if>
[오류 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.
<b:if cond='data:blog.pageType == "error_page"'>.....</b:if>
[미리보기(preview) 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.
<b:if cond='data:view.isPreview'>.....</b:if>
[모바일에서만 보이는 태그]
이 코드는 모바일 기기에서만 보이게 한다.
<b:if cond='data:view.isMobile'>.....</b:if>
<b:if cond='data:blog.isMobileRequest'>.....</b:if>
<b:if cond='data:blog.isMobileRequest'>.....</b:if>
[모바일에서는 숨기는 태그]
이 코드는 모바일 기기에서는 표시되지 않도록 숨기는 코드이다. 신형 태그에서는 ! 를 붙이고, 구형 태그에서는 false 를 추가한다.
<b:if cond='!data:view.isMobile'>.....</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>.....</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>.....</b:if>
[목록 페이지에서, 첫 번째 포스트에만 보이는 태그]
이 코드는 홈페이지, 라벨 검색 페이지, 검색 페이지 등과 같은 목록 페이지에서, 첫 번째 글(포스트)에서만 가젯을 보이게 한다. 예를 들어, 광고나 특정한 안내문 등이 목록 페이지의 첫번째 글 위 또는 아래에만 보여지도록 할 때 사용하면 된다.
<b:if cond='data:post.isFirstPost'> ..... </b:if>
[신형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 신형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 신형 태그들은 모두 이와 같이 하면 된다.
<b:if cond='data:view.isPost'>.....</b:if>
<b:if cond='!data:view.isPost'>.....</b:if>
<b:if cond='!data:view.isPost'>.....</b:if>
[구형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 구형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 구형 태그들은 모두 이와 같이 하면 된다.
<b:if cond='data:blog.pageType= "item"'>.....</b:if>
<b:if cond='data:blog.pageType!= "item"'>.....</b:if>
<b:if cond='data:blog.pageType!= "item"'>.....</b:if>
[복수 조건 설정 태그]
이 코드는 개별 글(포스트) 페이지와 페이지(pages)로 만든 스태틱 페이지 등 싱글 페이지 에서는 가젯을 나타나지 않도록, 복수의 조건을 설정한 태그이다. 복수의 조건은 and 로 연결한다.
<b:if cond='!data:view.isPost and !data:view.isPage'>
</b:if>
</b:if>
[복수 조건 태그 예 2]
"모바일이 아니면 + 그리고 + 홈페이지에만" 보이게 하는 예이다. 곧, 데스크탑 홈페이지에만 보이게 하는 태그이다.
<b:if cond="!data:view.isMobile and data:view.isHomepage">.....</b:if>
2. 특정할 주소를 찾아 코드 만들기
위에서 끝에 있는 두 종류의 태그를 사용하려면, 특정하려는 페이지의 주소(URL)가 있어야 하므로 아래와 같이 주소를 찾아 코드를 만들면 되고, 다른 태그를 사용하려는 경우에는 이 단계가 필요 없으므로 넘어 가면 된다.
주소를 찾는 방법은 아래 그림과 같이 해당 페이지를 열어 놓고 브라우저 주소창의 주소를 복사하면 된다.
방법은 브라우저 주소창을 마우스로 클릭하면 주소가 선택되어 색상이 반전된다. 그러면 키보드에서 [컨트롤+C]를 치면 복사가 되고, 메모장 등에 붙여 넣기 (컨트롤+V) 하면 된다.
[코드 완성 전의 모습]
<b:if cond='data:blog.url == "URL of the page"'>
[코드 완성 후의 모습]
<b:if cond='data:blog.url == "http://howways.blogspot.com/2016/03/How-to-Show-AppData-folder-on-Windows-Explorer.html"'>
3. 가젯에 이름 붙여 쉽게 찾아가기
위에서 사용할 코드를 만들었으니, 이제 HTML에 추가하면 된다. HTML 편집창을 열기에 앞서 해당 가젯에 이름을 붙여 주면 편집창에서 찾기가 쉽다.
가젯 이름은 간단하게 "안내" "작업" .... 등과 같이 편한대로 붙여 주면 되고, 방법은
=> 블로그 대시보드 > 레이아웃(Layout) 창을 열고 > 해당 가젯의 [편집: Edit] 버튼을 눌러 가젯 편집창을 연다
=> 가젯 이름(Title)에 적당한 이름을 넣고, 저장을 한다. 그림의 예에서는 '길안내'라고 이름을 붙였다.
4. HTML 편집창을 열고 해당 가젯에 준비한 태그 추가
=> 블로그 대시보드 > 템플릿 > HTML편집(Edit HTML)을 눌러 편집창을 엽니다.
=> 편집창의 빈 곳 아무데나에 마우스로 클릭하여 편집창을 활성화 한 다음 > [컨트롤+F]키를 쳐서 검색창을 열고 > 해당 가젯 이름을 입력하고 [엔터]키를 치면 > 해당 가젯으로 이동되고 가젯의 이름에 노랑색 표시가 됩니다.
태그를 삽입하는 방법은 두 가지가 있습니다. 아래에서 설명하는 첫 번째 방법은 새로 알게 된 방법이고, 두 번째 방법은 이전에 알게 된 방법입니다. 개인적인 생각으로는 첫 번째 방법이 더 나은 것 같습니다. 왜 그런가는 이 페이지 맨 아래에 비교하여 설명하도록 합니다.
1) 첫 번째 방법 : <b:widget ~ 코드 부분에 직접 추가
=> 해당 가젯으로 이동하면, 해당 가젯은 아래 그림에서 보는 것처름
<b:widget id='HTML6' locked='true' ~~> 로 되어 있습니다. 이 코드에 직접 코드를 추가합니다. 추가하는 위치는 <b:widget 바로 뒤에 추가합니다.
=> 위에서 설명한 여러가지 코드들은
<b:if cond='data:blog.pageType == "index"'> 모양입니다. <b:if 부분은 빼고, 안의 cond='~~~~~~' 부분만 추가해야 합니다. 예컨데, 아래의 빨강색 부분만 추가하는 것입니다.
<b:if cond='data:blog.pageType == "index"'>
=> 그러면, 아래 그림에서 노랑색으로 표시한 부분과 같이,
<b:widget cond='data:blog.pageType == "index"' id='HTML6' ~~~~~와 같은 모습이 됩니다.
=> 이로서 작업이 끝났고, HTML 편집창의 맨위에 있는 저장(Save) 버튼을 눌러 저장을 하고 편집창을 닫으면 됩니다.
2) 두 번째 방법: <b:includable id='main'> 코드 바로 아래에 추가
=> 해당 가젯의 태그들이 닫혀 있으므로, 왼쪽에 있는 화살표(▶)를 눌러 닫힌 태그를 엽니다. 화살표를 한 번 누르면 그 안에 또 같은 화살표가 나옵니다. 그러면 또 눌러 아래 두번째 그림과 같이 태그를 활짝 엽니다.
=> 가젯 이름(그림의 예에서는 '길안내')의 바로 아래 줄 <b:includable id='main'>의 바로 아래에 그림과 같이 준비한 태그를 추가 합니다.
그러면, <b:> 태그의 쌍이 맞지 않으므로, 그 아래의 </b:includable> 부분이 빨강색으로 표시됩니다.
=> 그림과 같이 </b:includable> 바로 위에 곧, <b:include name='quickedit' /> 바로 아래에 </b:if> 를 추가하여 <b:> 태그를 닫아 줍니다. 그러면, 빨강색 경고 표시가 녹색으로 바뀝니다.
=> 코드 추가가 끝났으므로, 편집창 맨 위의 [저장: Save template] 버튼을 눌러 저장을 하고 편집창을 닫습니다.
저장을 하면 아무런 응답이 없는 경우도 있고, 저장이 되었는데도 편집창을 닫으면 저장되지 않았다는 경고 메시지가 뜨기도 하지만, 대체로 정상적으로 저장이 됩니다.
일단 편집창을 닫은 다음, 다시 편집창을 열어 확인을 해 보고 만약 저장이 안되었으면, 다시 추가 하고 저장하면 됩니다.
=> 편집창에서 나왔으면, 블로그 대시보드 > 레이아웃(Layout)으로 가서, 가젯에 붙였던 이름을 삭제하고 저장을 합니다. 가젯의 이름을 삭제해도 위에서 설정한 기능은 정상적으로 작동합니다. 가젯의 이름이 블로그에 그대로 보이게 하고 싶으면 그냥 두면 됩니다.
=> 페이지 맨 위에서 본 여러가지 코드들도 코드를 추가하는 위치와 방법은 모두 같습니다.
어떻게 보면 아주 복잡한 것 같지만, 실제로 해보면 간단합니다.
이 기능을 잘 활용하면 여러가지 가젯을 필요한 페이지에만 보이게 함으로써 방문자에게 좀 더 깔끔하고 편리한 블로그를 만드는 데에 도움이 될 것입니다.
3) 위 첫 번째 방법과 두 번째 방법의 차이점
아래의 두 그림에서 각각 하단 부분에 녹색 사각형으로 표시한 부분을 보면 두 방법의 차이를 알 수 있습니다. 녹색 사갹형으로 표시한 부분은 페이지의 소스보기에서 해당 가젯이 위치하는 부분입니다.
첫 번째 방법으로 하면, 그림의 녹색 사각형 부분에서 보듯이, 가젯 자체가 아예 표시되지 않아 깔끔합니다. 예에서 추가한 가젯 아이디는 HTML6 이고, 아래 녹색 사각형으로 표시한 소스에서 두 줄 가운데에 위치하고 있지만, 표시되지 않습니다.
[첫 번째 방법]
두 번째 방법으로 하면, 아래 그림의 녹색 사각형 부분에서 보듯이, 페이지 소스보기를 해 보면 가젯 영역이 표시됩니다. 다만, 가젯에 들어 있는 내용부분은 표시되지 않습니다.
[두 번째 방법]
한마디로 말하자면, 첫 번째 방법은 가젯 영역자체가 아예 표시되지 않는 것이고, 두 번째 방법은 가젯영역은 표시되지만 그 내용은 표시되지 않는 것입니다. 그러므로, 첫 번째 방법이 더 깔끔하고 나은 것으로 생각됩니다.
참고 : 구글 도움말
>> https://support.google.com/blogger/answer/47270?hl=ko
>> https://support.google.com/blogger/answer/47270?hl=en
>> https://support.google.com/blogger/answer/176245?hl=ko&ref_topic=6321969