구글블로그 사용법: 가젯(위젯)을 특정한 페이지에만 보이거나 숨기는 방법

구글 블로그에는 여러가지 가젯(위젯)들이 있고, 또 HTML 가젯으로 다양한 내용을 추가 할 수 있다. 가젯의 쓰임에 따라 특정한 가젯을 특정한 페이지, 특정한 라벨(태그) 페이지, 또는 첫 페이지에서만 보이게 하거나 숨길 수 있다.

방법은 HTML 편집창에서 숨기거나 보이게 하려는 가젯에 특정성을 주는 태그와 해당 주소(URL)를 넣어 주면 된다. 다만, 이 기능은 주소(URL)를 사용하는 것이므로 방문자의 접속 위치에 따라 도메인주소가 바뀌는 blogspot 주소에서는 작동을 하지 못한다. 블로그에 자신의 도메인을 연결 시킨 경우에만 사용할 수 있다.


1. 가젯에 추가할 태그 선택
어떤 페이지에서 보이거나 숨길지를 생각하고 아래에서 적당한 코드를 선택한다.


[인덱스 페이지에만 보이게 하는 코드]
이 코드를 추가하면 블로그의 글 목록이 표시되는 모든 페이지에만 해당 가젯이 보인다.
<b:if cond='data:blog.pageType == "index"'>
</b:if>


[홈페이지 (첫 페이지)에만 보이게 하는 코드]
이 코드를 추가하면 블로그의 첫페이지(홈페이지)에만 해당 가젯이 보인다.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>


[개별 글 (포스트) 페이지에만 보이게 하는 코드 1]
이 코드를 추가하면, 검색결과나 라벨 페이지 등에서는 가젯이 보이지 않고 개별 글 페이지에만 보인다.
<b:if cond='data:blog.pageType == "item"'>
</b:if>


[개별 글 (포스트) 페이지에는 숨기는 코드 1]
이 코드는 바로 위의 코드와 정 반대로, 개별 글 페이지에서는 가젯이 보이지 않고 검색결과나 라벨 페이지 등에서만 보이게 한다.
<b:if cond='data:blog.pageType!= "item"'>
</b:if>


[개별 글 (포스트) 페이지에만 보이게 하는 코드 2]
이 코드를 추가하면, 검색결과나 라벨 페이지 등에서는 가젯이 보이지 않고 개별 글 페이지에만 보인다.
<b:if cond='data:view.isPost'>
</b:if>


[개별 글 (포스트) 페이지에는 숨기는 코드 2]
이 코드를 추가하면, 홈페이지, 검색결과 페이지, 라벨 페이지 등에서는 가젯이 보이고 개별 글 페이지에서는 보이지 않게 한다.
<b:if cond='!data:view.isPost'>
</b:if>


[싱글 페이지에서만 가젯이 보이게 하는 코드]
이 코드는 싱글 페이지에서만 가젯을 보이게 하고, 그렇지 않은 경우에는 가젯을 보이지 않게 한다. 목록 페이지 등에서는 가젯이 보이지 않게 된다.
<b:if cond='data:view.isSingleItem'>
</b:if>


[개별 페이지에는 숨기는 코드]
이 코드는 개별 글(포스트) 페이지와 페이지(pages) 등 싱글 페이지 에서는 가젯을 나타나지 않게 하고, 목록페이지나 라벨검색페이지 등에서는 가젯을 표시한다.
<b:if cond='!data:view.isPost and !data:view.isSingleItem'>
</b:if>


[스태틱 페이지에서만 가젯이 보이게 하는 코드]
이 코드는 개별 글 페이지에는 가젯을 숨기고, 개별 글이 아닌 검색결과 페이지나 라벨 페이지 등에서만 가젯을 보이게 한다.
<b:if cond='data:blog.pageType == "static_page"'>
</b:if>


[스태틱 페이지에만 숨기는 코드]
이 코드는 바로 위의 코드와 정 반대로, 검색결과 페이지나 라벨 페이지 등에서는 가젯을 숨기고, 개별 글 페이지 등에만 보이게 한다.
<b:if cond='data:blog.pageType!= "static_page"'>
</b:if>


[아카이브 (Archive) 페이지에만 보이게 하는 코드]
이 코드는 아카이브 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:blog.pageType == "archive"'>
</b:if>


[라벨 검색 결과 페이지에만 보이게 하는 코드]
이 코드는 라벨을 클릭하여 라벨 검색 결과 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:blog.searchLabel'>
</b:if>


[포스트 가운데 첫 번째 포스트 페이지에만 보이게 하는 코드]
이 코드는 포스트가 여러개 나열 될 때 첫 번째 포스트 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:post.isFirstPost'>
</b:if>


[개별 포스트와 스태틱 페이지에만 보이게 하는 코드]
이 코드는 개별 글(포스트) 페이지와 스태틱 페이지에서만 가젯을 보이게 한다.
<b:if cond='data:blog.url == data:post.url'>
</b:if>


[특정한 글 (포스트)이나 라벨 등 지정된 주소(URL) 페이지에만 보이게 하는 코드]
이 코드는 지정된 주소 페이지에만 가젯을 보인다. 빨강색 부분은 지정할 페이지의 주소(URL)를 넣는 곳이므로, 원하는 주소로 대체를 하면 된다. (자세한 설명은 아래에서 설명)
<b:if cond='data:blog.url == "URL of the page"'>
</b:if>


[특정한 글 (포스트)이나 라벨 등 지정된 주소(URL) 페이지에만 숨기는 코드]
이 코드는 바로 위의 코드와 정 반대로, 지정된 주소(URL) 페이지에서만 가젯을 숨기고 다른 모든 페이지에서는 가젯을 보인다. 빨강색 부분은 원하는 주소로 대체하면 된다. 
<b:if cond='data:blog.url != "URL of the page"'>
</b:if>

>> 위의 여러가지 코드 가운데 끝에 있는 두 가지는 특정한 주소(URL)을 지정해 주어야 하고, 나머지는 그대로 사용하면 된다.



2. 특정할 주소를 찾아 코드 만들기

위에서 끝에 있는 두 종류의 태그를 사용하려면, 특정하려는 페이지의 주소(URL)가 있어야 하므로 아래와 같이 주소를 찾아 코드를 만들면 되고, 다른 태그를 사용하려는 경우에는 이 단계가 필요 없으므로 넘어 가면 된다.

주소를 찾는 방법은 아래 그림과 같이 해당 페이지를 열어 놓고 브라우저 주소창의 주소를 복사하면 된다.
방법은 브라우저 주소창을 마우스로 클릭하면 주소가 선택되어 색상이 반전된다. 그러면 키보드에서 [컨트롤+C]를 치면 복사가 되고, 메모장 등에 붙여 넣기 (컨트롤+V) 하면 된다.

특정한 주소 페이지에만 가젯을 보이려 한다면, 아래와 같은 코드를 선택하고, 복사한 주소(URL)로 빨강색 부분을 대체하여 코드를 완성한다.

[코드 완성 전의 모습]
<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 이고, 아래 녹색 사각형으로 표시한 소스에서 두 줄 가운데에 위치하고 있지만, 표시되지 않습니다.

[첫 번째 방법]
구글블로그 사용법: 가젯(위젯)을 특정한 페이지에만 보이거나 숨기는 방법


두 번째 방법으로 하면, 아래 그림의 녹색 사각형 부분에서 보듯이, 페이지 소스보기를 해 보면 가젯 영역이 표시됩니다. 다만, 가젯에 들어 있는 내용부분은 표시되지 않습니다.

[두 번째 방법]
구글블로그 사용법: 가젯(위젯)을 특정한 페이지에만 보이거나 숨기는 방법

한마디로 말하자면, 첫 번째 방법은 가젯 영역자체가 아예 표시되지 않는 것이고, 두 번째 방법은 가젯영역은 표시되지만 그 내용은 표시되지 않는 것입니다. 그러므로, 첫 번째 방법이 더 깔끔하고 나은 것으로 생각됩니다.


도움이 되기를 바랍니다.