구글 블로그(blogger)에서 조건 태그를 이용하여 페이지별로 위젯 설정하기 |블로거 사용자를 위한 코드 모음

블로거의 조건태그를 이용하면, 데모 블로그에서처럼 위젯의 표시 여부를 페이지에 따라 달리할 수 있습니다.

데모보기

지난번에 관리자만 볼 수 있는 가젯 만들기 라는 글에서도 말씀을 드렸는데요. 템플릿을 HTML편집 모드에서 보시면 위젯은 아래와 같은 구조로 되어 있습니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>

그리고, 어떤 위젯을 조건에 따라서 작동시키고자 할 때 조건 태그가 들어가는 자리는 '<b:includable id='main'>'과 '</b:includable>' 사이입니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
내용
</b:if>
</b:includable>
</b:widget>

또는,

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
조건이 참일 경우 표시할 내용
<b:else/>
조건이 참이 아닌 경우 표시할 내용
</b:if>
</b:includable>
</b:widget>

'조건'에는 참이나 거짓으로 평가될 수 있는 모든 항목을 넣을 수 있으며, 조건 태그를 사용하여 컨텐츠를 표시할 수 있는 위치도 있고 그렇지 않은 위치도 있습니다.

! 참고. 레이아웃용 Widget 태그 (구글 도움말)

구글 도움말의 설명과 예가 충분하지 않기 때문에 어떤 조건들이 가능한지 전부 알 수는 없지만, 위젯 설정과 관련하여 해외 블로거들 사이에 많이 공유되고 있는 조건 태그는 주로 9가지였습니다.

! 참고. 구글 블로그(blogger)의 조건 태그

그리고 이 9가지를 테스트용 블로그에서 직접 테스트를 해보았을 때 작동하는 조건 태그는 아래의 7가지였습니다.(나머지 2개는 제가 적용을 잘못해서 작동하지 않은 것일 수도 있습니다.)

1. Home Page

<b:if cond='data:blog.url == data:blog.homepageUrl'>

홈 페이지에서만 나타난다

2. Index Pages

<b:if cond='data:blog.pageType == "index"'>

홈 페이지와 레이블 검색 페이지, 그리고 블로그 보관함의 년 단위 페이지에서 나타난다.

3. Post Page, 또는 Item Page (각각의 개별 포스트)

<b:if cond='data:blog.pageType == "item"'>

포스트(아이템) 페이지, 즉 개별 포스트의 본문을 읽을 때만 나타난다.

4. Label-Search Pages

<b:if cond='data:blog.searchLabel'>

라벨 검색 페이지에서만 나타난다.

5. Static Page(s)

<b:if cond='data:blog.pageType == "static_page"'>

페이지 탭의 페이지에서만 나타난다. (블로거 대시보드 페이지 메뉴를 통해서 생성한 '새 페이지'를 static page라고 합니다.)

6. Archive Pages

<b:if cond='data:blog.pageType == "archive"'>

블로그 보관함의 월단위 페이지를 조회할 때 나타난다.

7. Specific Page

<b:if cond='data:blog.url == "URL주소"'>

특정 URL에서만 나타난다. .com 과 .kr 과 상관없이 똑똑하게 나타난다.

참고로, 위의 조건 태그들을 각각 역의 조건으로 바꿀 수도 있습니다. 예를 들어,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

이 조건 태그는 홈페이지에서만 표시한다는 조건태그이지만, 코드 중간의 "=="를 "!="로 바꿔주면

<b:if cond='data:blog.url != data:blog.homepageUrl'>

이 조건 태그는 '홈페이지가 아닐 경우에만 표시한다'가 됩니다. (해당 조건이 거짓일 경우 표시한다.)

자, 이제 직접 적용을 해보겠습니다.

그림1

일단, 테스트용 블로그에서 별다른 내용 없는 HTML/Javascript 가젯을 생성한 후

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

이를 HTML편집 모드에서 확인해보았더니 위젯의 코드는 위와 같은 모습이었습니다. 말씀드렸던 바와 같이, 위젯 코드의 시작 지점에는 '<b:includable id='main'>'이 보이고 종료 지점에는 '</b:includable>'라는 코드가 보입니다.

이 위젯을 가령 홈페이지에서만 표시하고자 한다면, 위에서 열거한 조건들 중 첫번째 조건 태그를 삽입하면 되겠죠.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

즉, 이런 모습이 됩니다.

그림2

+
여기까지가 해외 블로거들 사이에서 조건 태그와 관련하여 주로 공유되는 내용입니다. 사실상 거의 그대로 번역하여 설명을 드린 것인데요. 위의 내용도 물론 맞습니다. 그런데, 위의 내용을 그대로 적용했을 때 한가지 문제점이 있었습니다. 바로, 스타일 설정입니다. 위젯에 공통적으로 적용되어 있는 스타일 설정 때문에 위젯이 사라져도 간격이나 악센트(경계선) 등은 사라지지 않았습니다.

이는 위의 예에서처럼 하얀 바탕색에 경계선이 없는 경우에는 잘 나타나지 않는데요. 다른 템플릿을 적용해서 보여드리겠습니다.

그림3. 동일한 테스트용 블로그를 이번에는 색상과 경계가 뚜렷한 '세련' 템플릿으로 적용시켜 보았다.

<그림3>을 보시면, 위젯은 사라졌지만 간격이나 선, 공간은 그대로 남아있습니다. 이 문제를 해결하기 위해서는 표시되지 않을 때의 스타일 설정을 별도로 해줘야 합니다.

참고로, 어떤 요소를 표시되지 않도록 설정해주는 css의 태그는

display: none;

입니다. 즉, 자신이 원하지 않는 조건에서는 이 스타일 설정이 적용되도록 만들어주어야 하는데, 다음과 같이 입력함으로써 이를 적용시킬 수 있습니다.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#HTML1 {
display:none;
}
</style>
</b:if>
</b:includable>
</b:widget>

이해를 돕기 위해 그림을 추가합니다.

그림4

그림5

<그림4>와 같은 방법으로 코드를 적용해주었더니, 위젯이 깔끔하게 사라지는 것을 볼 수 있었습니다.

조건 태그를 사용하거나 스타일을 설정하는데 어떤 정해진 방법이 있는 것은 아닙니다. 데모 블로그의 경우에는 else 태그 대신 거짓(!=) 조건을 사용했습니다. 하나의 예로써 참고하실 수 있도록 코드와 설명을 아래에 첨부하겠습니다.

<b:widget id='Text2' locked='false' title='본문을 읽을 때만 표시되는 위젯' type='Text'>
<b:includable id='main'>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#Text2 {
display:none;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#Text2 {
margin-top:0px;
}
</style>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>