2013년 7월 31일 수요일

블로거(blogger) 태그·레이블을 이용한 페이지 탭 활용

그림1
블로거의 페이지 탭은 보통 독립적인 빈 페이지를 작성하거나 다른 웹 주소로 독자를 보낼  때 사용되지만, 특정 태그(레이블)의 글 만을 보여주는 카테고리 기능으로도 이용할 수 있습니다.

그림2
블로거에서 태그 위에 마우스 커서를 올리면, 태그 검색 주소를 볼 수 있는데요. 바로 이 주소를 이용하는 것입니다.

예를 들어, '테스트1'이란 태그가 붙은 글만을 보여주는 페이지 탭을 생성한다고 가정해보겠습니다.

그림3
대시보드의 페이지에서 새 페이지로 '웹 주소'를 선택한 후 페이지의 이름, 그리고 하단에는 <그림2>에서 본 것과 같은 태그 검색 주소를 입력해줍니다.

태그 검색 주소는 다음과 같은 형태로 되어 있습니다.

http://자신의블로그주소.blogspot.com/search/label/자신이입력하고자하는태그

여기에 최대 검색 결과의 수를 제한하는 옵션을 추가하면, 주소는

http://자신의블로그주소.blogspot.com/search/label/자신이입력하고자하는태그?max-results=10

과 같은 형태가 됩니다. 뒤의 숫자 10은 자신이 원하는 숫자로 대체해 줍니다.


2013년 7월 30일 화요일

블로거(blogger) 태그 클라우드 꾸미기 #1

그림1

블로거(blogger)에는 태그·라벨을 표시해주는 가젯이 있고,

그림2
이 가젯을 이용하면, 태그를 클라우드 형식으로 나타낼 수 있습니다.

그림3

그런데, 한가지 아쉬운 점은 비주얼이 그리 만족스럽지 못하다는 것입니다. 영문과 한글, 작은 글씨와 큰 글씨 간의 조화가 잘 이루어지지 못하기 때문에 뭔가 조금 어색하고 너저분해보입니다. 영문 블로거들이 태그 가젯을 예쁘게 꾸며주는 코드들을 공유하고 있지만, 막상 적용해보면 한글과는 맞지 않는 경우가 많았습니다.

그래서 태그를 직접 한번 꾸며봤습니다. 깔끔하게, 그리고 사용자가 자신의 템플릿에 맞게 조절할 수 있게 하는데 중점을 두었습니다.

그림4
<그림4>는 제가 작성한 코드를 적용한 모습입니다. 그리고 코드는 아래와 같습니다.

1:  .label-size {  
2:  padding: 3px;  
3:  margin: 2px;  
4:  font-size:11px;  
5:  border:1px dotted #666666;  
6:  border-radius:0px;  
7:  display:block;  
8:  float:left;  
9:  text-decoration:none;  
10:  background:#ffffff;  
11:  }  

코드 적용 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다. 복사하실 때 코드 왼쪽의 숫자 행 표시(1: 2: 3: 등)는 삭제하시기 바랍니다.

코드를 삽입할 때는 자신의 스타일에 맞게 2·3·4·5·6·10 행을 수정하시면 됩니다.

각각의 행이 의미하는 것은 이렇습니다.

그림5
2행(2번째줄)은 텍스트와 테두리의 간격을 설정하는 부분입니다.

그림6
3행은 태그와 태그 사이의 간격을 설정하는 부분입니다.

그림7
4행은 폰트의 크기를 설정하는 부분입니다.

그림8
5행은 테두리의 굵기와 종류, 그리고 색상을 설정하는 부분입니다. 테두리의 굵기를 0px로 설정하거나, none으로 설정하여 테두리가 표시되지 않도록 설정할 수도 있습니다. 테두리 설정에 관해서는 CSS 테두리(border-style)의 유형이란 글을 참고하시기 바랍니다. (그리 어렵지 않습니다)

그림9
6행은 테두리 가장자리를 얼마나 둥글게 처리할지를 설정하는 부분입니다. 가장자리를 둥글게 설정하고 싶지 않다면, 0px로 설정합니다.

그림10
마지막으로, 10행은 태그의 바탕 색상을 설정하는 부분입니다.


※ 이 코드는 태그 가젯의 표시 방법을 '클라우드'로 설정했을 때만 적용이 됩니다.

text-decoration 이해하기


1:  text-decoration:none  
2:     
3:  text-decoration:underline  
4:     
5:  text-decoration:overline  
6:     
7:  text-decoration:line-through  
8:     
9:  text-decoration:blink  

text-decoration 역시 블로거(blogger)를 꾸밀 때 종종 접하게 되는 CSS 코드입니다.

보통은 'none'으로 설정되어 있는 경우가 대부분이고, 'none'은 '기본값(default), 꾸밈없는 기본텍스트 상태'를 의미합니다. 3·5·7·9 행에서처럼 none이 아닌 다른 값을 주게 되면, 텍스트는 그림1처럼 표시됩니다.

그림1



CSS 테두리(border-style)의 유형

그림1

그림2

'border'는 블로그에서 가장 자주 접하는 코드 중의 하나이므로, 각각의 단어들이 무엇을 의미하는지 알아두면 템플릿을 꾸밀 때 편리합니다.

 border: 1px solid #000000  

보통 이런식으로 쓰이는데, 앞의 '1px'은 테두리의 굵기를, 'solid'는 테두리의 종류를, '#000000'은 테두리의 색상을 의미합니다. <그림1>과 <그림2>는 'solid'(실선)를 대체할 수 있는 다른 유형의 테두리들 입니다. 테두리를 실선이 아닌 점선(dotted)으로 처리하고 싶다면, 다음과 같이 코드를 수정하면 됩니다.

 border: 1px dotted #000000  



2013년 7월 29일 월요일

블로거(blogger) 포스트 이미지 가장자리에 그림자 효과 주기

그림1

블로거에서 포스트에 이미지를 삽입하면, 템플릿에 따라서 그림1처럼 이미지의 가장자리에 그림자로 경계선 효과가 나타나기도 합니다. 동적뷰 같은 경우에는 이 기능이 기본으로 제공되고 있지만, 일반 템플릿에선 해당 기능이 지원되지 않는 경우도 있습니다.

아래의 태그는 이미지 그림자 효과를 삭제한 경우, 또는 그림자효과가 없는 템플릿에서 해당 효과를 추가할 수 있도록 해주는 코드입니다.

 .post-body img {   
 padding: 1px;   
 background: transparent !important;   
 border: 1px solid transparent !important;   
     
 -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);   
 -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);  
 -ms-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);    
 box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);   
 }   

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

그림자의 두께나 위치 등을 조정하고자 할 경우, 아래의 글들을 참고하시기 바랍니다.


! 관련 글.

CSS box-shadow 이해하기
CSS에서의 색상 설정 - 그림자를 가능한 엷게 설정하려면 rgba 색상을 이용.


블로거(blogger) 동적뷰 포스트 하단의 공유 버튼 보이지 않게 설정하기

그림1
동적뷰에서 포스트 하단에 표시되는 공유 버튼(구글+, 트위터, 페이스북)을 보이지 않도록 설정해주는 태그입니다.

 /* Hide the sharing controls */  
 .share-controls { display: none !important; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.



블로거(blogger) 동적뷰 우측 하단의 의견보내기 버튼 보이지 않게 설정하기

그림1
동적뷰의 우측 하단에 표시되는 의견보내기 버튼을 보이지 않게 설정해주는 코드입니다.

 /* Hide the google chrome feedback button */  
 a.feedback { display: none !important; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.



2013년 7월 28일 일요일

블로거(blogger) 페이지 탭 중앙 정렬시키기

그림1
블로거(blogger)에서 그림1과 같이 페이지 탭을 중앙에 정렬시켜주는 태그입니다.

 .PageList {text-align:center !important;}  
 .PageList li {display:inline !important; float:none !important;}  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.



블로거(blogger) 포스트 타이틀과 날짜 타이틀 중앙 정렬시키기

그림1

블로거(blogger) 일반 템플릿에서 포스트 타이틀과 날짜 타이틀을 중앙으로 정렬시켜주는 태그입니다.

코드1.
 .post-title {   
 text-align:center;   
 }  

코드2.
 .date-header {   
 text-align:center;   
 }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다

포스트 타이틀(게시물 제목)만 중앙으로 정렬시키고자 할 경우에는 코드1만, 날짜 타이틀만 중앙으로 정렬시키고 싶다면 코드2만 삽입합니다.



블로거(blogger) 동적뷰의 뷰 스타일 선택 옵션 숨기기 #2

블로거(blogger) 동적뷰에서의 뷰 선택 옵션 설정은 예전에 구글 블로그 동적뷰에서 특정 뷰 제거하기 라는 글에서 한번 다룬 적이 있습니다. 오늘 소개하는 방법도 비슷한 내용입니다. 선택 옵션 자체를 완전히 숨기고자 할 때에는 오늘 소개하는 방법이 좀 더 손쉬운 방법이라고 할 수 있겠습니다.

그림1
동적뷰에서는 7가지 뷰 스타일을 선택할 수 있습니다. 헤더에 페이지 요소가 없을 때에는 그림1과 같이 7가지 뷰 스타일이 헤더에 일렬로 표시됩니다.

그림2

그림3
동적뷰에서 헤더에 페이지 요소를 추가하면, 그림3 처럼 7가지 뷰 스타일은 드롭다운 메뉴로 표시됩니다.

독자(reader)로 하여금 이 7가지 뷰 스타일을 선택을 할 수 없도록 하려면, 즉 해당 요소가 표시되지 않도록 하려면 블로그에 아래의 코드를 삽입합니다.

1:  #header #views {  
2:  display: none;  
3:  }  
4:     
5:  #header #pages:before {  
6:  border-left: 0px;  
7:  }  
8:     
9:  #header #pages {  
10:  margin-left: 100px;  
11:  }  

코드의 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.(복사하실 때 1: 2: 3: 등 코드 왼쪽의 숫자 행 표시는 알아서 삭제하셔야 합니다.)

그림4
코드의 9, 10, 11 행은 탭 페이지 요소와 왼쪽 가장자리 사이의 간격을 조절하는 요소입니다. 코드를 삽입할 때 10행의 '100px'을 자신이 원하는 수치로 대체해줍니다. 간격을 따로 설정하고 싶지 않다면, 9·10·11 행을 제외하고 1~7행만 삽입하면 됩니다.

블로거(blogger) 동적뷰에서 검색바 넓이 조절 태그

그림1
동적뷰에서 검색바의 넓이를 조절해주는 태그입니다.

 #header input#search {  
 width: 100px;  
 }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가]입니다. 코드를 삽입할 때 2번째줄에 숫자 '100' 대신 자신이 원하는 수치를 설정해줍니다.



2013년 7월 25일 목요일

블로거 blogger 저작자 표시 구성 숨기기 #2

블로거 Blogger 하단에

'*** 템플릿. Blogger 제공'

라고 표시되는 저작자 표시 구성을 보이지 않도록 설정해주는 코드입니다.

 #Attribution1 {display: none;}  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

저작자 표시 구성을 보이지 않도록 설정해주는 방법은 2013년 6월 23일에 구글 블로그(Blogger)에서 저작자 표시 구성(** 템플릿. Blogger 제공) 삭제하기 라는 글에서도 한번 다룬 적이 있습니다.

먼저번의 방식이 위젯을 아예 삭제하는 방식이었다면, 오늘 소개하는 방식은 단순히 해당 위젯이 표시되지 않도록 설정하는 방식입니다.



"레이블이 ***인 게시물을 표시합니다." 메세지 커스터마이징

그림1

블로거 Blogger 에서 태그를 클릭하면, 해당 태그를 갖고 있는 글들이 검색됩니다. 이 때 일반 템플릿에서는 그림1과 같이 '레이블이 ***인 게시물을 표시합니다.'라는 메세지가 출력이되는데요. 이 메세지를 커스터마이징할 수 있습니다.

1. 폰트 사이즈 설정

'레이블이 ***인 게시물을 표시합니다.' 메세지의 글자 크기를 설정하려면 아래의 태그를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가]에 삽입합니다.

 .status-msg-wrap{  
 font-size:24px;  
 }  

삽입할 때 2번째 줄에는 24px 대신 자신이 원하는 크기를 폰트 크기를 입력해줍니다.

2. '레이블이 ***인 게시물을 표시합니다.' 를 보이지 않게 설정

해당 메세지를 아예 보이지 않게 설정할 수도 있습니다. 해당 메세지를 보이지 않도록 설정하려면, [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가]에 다음의 코드를 삽입해 줍니다.

 .status-msg-wrap{  
 display: none;  
 }  



2013년 7월 20일 토요일

Navbar의 높이 조절하기

블로거(blogger) Navbar의 높이를 조절하는 태그입니다.

 #navbar {  
 height: 0px;  
 }  

이 태그는 헤더의 높이를 좁게 설정하고자 할 때 유용하게 쓰일 수 있는 태그입니다.

그림1
<그림1>에서 보는 것처럼, Navbar는 보이지 않게(off) 설정해도 그 영역이 남아있습니다. 이는 타이틀(헤더)의 높이를 가능한 짧게 설정하고자하는 분들에게 문제가 될 수 있겠죠. 위의 태그를 이용하면 낭비되는 공간을 최소로 줄일 수 있습니다.

그림2
태그의 2번째 줄에는 자신이 원하는 px을 입력하면 됩니다. <그림2>는 Navbar의 높이를 0px로 설정한 화면입니다.



2013년 7월 19일 금요일

동적뷰 타이틀에 이미지 삽입하기 #1

동적뷰의 타이틀에 이미지를 삽입하는 것과 관련하여 제가 알고 있는 방법은 두가지입니다. 일단, 이 글에서는 첫번째 방법에 대해서만 다룰 것입니다. 이 방법은 무난하고 따라하기 쉽고, 또 코드 수정도 거의 필요로 하지 않는 방법입니다.

그림1

동적뷰에서는 정상적인 방법으로는 이미지 삽입이 되지 않습니다. <그림1>에서 보시는 바와 같이 레이아웃의 머릿글 구성에서 이미지를 삽입해도 '블로그보기'를 하면, 이미지는 보이지 않고 여전히 텍스트로 된 '블로그 제목'과 '블로그 설명'이 타이틀로 나타납니다.

그래서 약간의 꼼수를 쓰는 것이 바로 백그라운드 이미지를 이용하는 것입니다. 정확히 말하면, 백그라운드 이미지를 타이틀 이미지처럼 보이게 하는 것입니다.

그림2

타이틀의 높이(height)는 65px이라는 것을 기억하시기 바랍니다. 저 위치에 정확히 높이 65px(또는 그 이하)의 이미지를 삽입할 수 있습니다.

그림3

예를 들어 설명하기 위해, <그림3>의 이미지를 타이틀 자리에 삽입하겠습니다.

먼저, [대시보드→템플릿→맞춤설정] 으로 이동한 후 [배경]에 원하는 이미지를 업로드합니다.

그림4

정렬은 <좌측상단>(중앙 정렬을 원할 경우 <중앙상단>), 배치는 <타일식 배치 안 함>으로 선택합니다. 

그림5
여기까지 마치고 나면, 블로그의 모습이 <그림5> 처럼 보일텐데요. 여기서 두가지 선택이 있습니다.

하나는, '블로그 제목'과 '블로그 설명'의 폰트 색상을 투명으로 처리하는 방법이고,
다른 하나는, '블로그 제목'과 '블로그 설명'을 아예 표시되지 않도록 하는 방법입니다.

1. '블로그 제목'과 '블로그 설명'의 폰트 색상을 투명으로 처리

그림6

[대시보드 → 템플릿 → 맞춤설정 → 고급] 에서 '블로그 제목'과 블로그 설명'의 폰트 색상을 모두 투명(transparent)로 설정합니다.

(사용하고자 하는 타이틀 이미지의 색상·배경이 흰색이 아닌 경우에는 페이지와 헤더의 색상을 자신의 이미지의 색상에 맞게 조절해줍니다.)

그림7

그러면, <그림7>과 같은 모습이 됩니다. 타이틀 자리에 이미지를 성공적으로 삽입하였지만, 우리는 '블로그 제목'과 '블로그 설명' 항목을 아예 삭제한 것은 아니란 점을 기억하시기 바랍니다. 

그림8

즉, 투명처리된 '블로그 제목'과 '블로그 설명' 자리에 마우스 커서를 올리거나 해당 자리를 드래그하면, 숨겨져 있던 '제목'과 '설명'이 독자(reader)에게 나타납니다. 

독자들이 블로그의 제목을 애써 드래그 해보는 일은 많지 않을 것이므로, 이 부분이 크게 문제되리라고 생각지는 않습니다. 신경이 쓰인다면, 드래그 방지 코드를 심어 놓는 것도 좋은 방법이라고 생각합니다.

2. '블로그 제목'과 '블로그 설명'을 아예 표시되지 않도록 설정

'블로그 제목'과 '블로그 설명'이 아예 표시되지 않도록 코드를 삽입할 수도 있습니다. 다시 위로 돌아가서, <그림5>의 상태에서 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 자리에 아래의 코드를 삽입해줍니다.

 .header-bar {  
 display: none !important;  
 }   

이 코드는 블로그의 '제목'과 '설명'이 아예 디스플레이되지 않도록 설정해주는 코드입니다. '제목'과 '설명'이 아예 표시되지 않기 때문에 드래그가 불가능해지지만, 대신 헤더의 클릭도 불가능해집니다.

※ 제 블로그의 우클릭, 드래그 방지를 해제하였습니다. 이제 코드를 편하게 복사하실 수 있습니다.




2013년 7월 18일 목요일

동적뷰 렌더링 타임아웃 설정

동적뷰에서 커스텀 CSS 코드를 추가하였을 경우, 또는 심지어 기본 설정일 때에도 동적뷰가 제대로 로딩되지 않는 문제가 있습니다. 예컨데,

  • 맞춤설정대로 표시되지 않거나,
  • 오른쪽에 가젯이 하나만 표시되는 경우
  • 탭 페이지가 표시되지 않는 경우 등


이런 현상이 발생하는 이유는, 일반 템플릿에서는 블로그가 하나의 페키지처럼 로딩되는데 반해 동적뷰에서는 각각의 요소가 서버로 부터 독립적을 로딩하기 때문이라고 합니다. 즉, 동적뷰에는 자체 타임아웃 메커니즘을 갖고 있는데, 로딩 시간이 길어지면 그냥 무시하고 렌더링(render)을 해버리는 것입니다.

저도 프로그래머가 아니기 때문에, 자세히는 모르고 대략적으로만 이해하고 있는 내용입니다.

어쨌든, 이 문제 때문에 많은 블로거 유저들이 동적뷰를 포기하고 일반 템플릿으로 복귀하거나, 아니면 아예 다른 블로그로 이전을 하는데요. 블로거에 따르면, 2백만명이 넘는 유저들이 이 문제로 고생을 하고 있다고 합니다.

최근에, 이 문제에 대한 해결 방법이 소개되었으니, 동적뷰 유저는 꼭 해당 코드를 수정하여 추후 고생하는 일이 없기를 바랍니다.

Fixed: Blogger Dynamic Views Fails to Load Properly   ← 동적뷰 사용자들의 영웅

먼저, [대시보드 → 템플릿 → HTML 편집]에서 Ctrl+F를 이용하여 'setTimeout(function()'  을 찾습니다.

 <script language="javascript" type="text/javascript">  
  setTimeout(function() {  
   blogger.ui().configure().view();  
  }, 0);  
 </script>  

그리고, 4번째 줄에 0이라고 표시된 부분을 500으로 고쳐줍니다. (0에서 500까지 입력 가능) 500은 500 milliseconds로 0.5초입니다. 다시 말하면, 렌더링하기까지의 로딩 시간 제한을 0.5초 더 주는 것입니다.

 <script language="javascript" type="text/javascript">  
  setTimeout(function() {  
   blogger.ui().configure().view();  
  }, 500);  
 </script>  

이렇게 수정을 해주면, 오른쪽에 가젯이 하나만 뜨거나, 동적뷰가 맞춤설정대로 표시되지 않는 현상이 확 줄어들 것입니다.



헤더 클릭 범위 설정하기


그림에서 보는 바와 같이 설정을 따로 하지 않은 헤더의 클릭 범위는 매우 넓습니다. Blogger는 헤더의 우측에도 애드센스나 각종 메뉴를 추가할 수 있는데, 이 때 헤더의 넓은 클릭 범위가 문제될 수 있습니다. 아래의 코드는 이런 문제를 해결하기 위해, 헤더의 클릭 범위를 설정하는 코드입니다.

 #Header1 {  
 width: 500px;  
 }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다. 참고로, Header1은 정해진 값이 아닙니다. 대부분의 경우 헤더의 ID는 'Header1'이지만, 설정하기에 따라서 헤더의 id는 'Header2', 또는 'Header3'가 될 수도 있습니다. HTML모드에서 헤더 id를 확인한 후 자신의 헤더 id를 입력해줍니다. (대부분의 경우 'Header1') 그리고 삽입할 때 '500px' 부분을 자신의 이미지 넓이에 맞게 수정해줍니다. 픽셀 범위가 이미지의 폭보다 짧으면, 이미지가 짤릴 수 있습니다.


주의.
  • Blogger에서 코드가 꼬이면 생고생 할 수 있다. 코드 삽입 전 반드시 템플릿을 백업해두자.



2013년 7월 15일 월요일

구글 검색 결과에 포스트 제목을 먼저 표시하기

구글 블로그의 글을 검색하면, 아래 그림처럼 블로그의 제목이 먼저 표시됩니다.


앞서 작성한 조건 태그를 이용하면, 검색 결과에서 포스트의 제목 뒤에 블로그의 제목이 표시되도록 설정할 수 있습니다.

[대시보드 → 템플릿 → HTML 편집]으로 들어가서 Ctrl+F로

 <title><data:blog.pageTitle/></title>  

를 검색합니다. 그리고 해당 코드를 아래의 코드로 대체해줍니다.

 <b:if cond='data:blog.pageType == "item"'>  
 <title><data:blog.pageName/> |<data:blog.title/></title>  
 <b:else/>  
 <title><data:blog.pageTitle/></title> </b:if>  

붙여넣을 때, 2번째 줄의 "|" 은 자신이 원하는 문자로 대체할 수 있습니다. 위의 코드 그대로 붙여넣을 경우 검색 결과에는 다음과 같이 표시됩니다.

포스트제목 |블로그제목

코드를 수정하면 브라우저에서는 결과가 바로 반영되지만, 검색 결과에 반영되기까지는 일정 시간이 걸릴 수 있습니다.

※ 코드 출처 :

How To Show Post Title Before Blog Title In Blogger Search Results
How to show Post title First in search engine before Blog title



구글 블로그(blogger)의 조건 태그

 Blogger 조건 태그의 형식

<b:if cond='조건1'>
내용1
</b:if>

<b:if → 조건 태그의 시작을 나타냄
</b:if> → 조건 태그의 종료를 나타냄


Blogger 조건 태그 리스트

<b:if cond='data:blog.url == data:blog.homepageUrl'>
홈페이지에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
홈페이지, 레이블 페이지, 블로그 보관함(archive) 페이지에서 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
통계(static) 페이지에서 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
포스트(post) 페이지에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.url == &quot;PUT_URL_HERE&quot;'>
특정 url에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.url == data:post.url'>
포스트(post)와 통계(static) 페이지에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.searchLabel'>
특정 태그(tag) 페이지에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
블로그 보관함(archive) 페이지에서만 표시되는 텍스트, 또는 코드
</b:if>

<b:if cond='data:post.isFirstPost'>
복수의 포스트(multi-post) 중 첫번째 포스트 뒤에서만 표시되는 텍스트, 또는 코드
</b:if>

조건 태그의 사용

<b:if cond='data:blog.pageType == &quot;item&quot;'>
내용 2 (조건이 맞으면 내용 2을 실행)
<b:else/>
내용 3 (조건이 틀리면 내용 3을 실행)
</b:if>



2013년 7월 13일 토요일

구글 크롬에서 블로그(blogger) 레이아웃이 깨지는 버그

크롬과 블로그(blogger) 관련하여 구글에 의견을 보내기 위한 글입니다. '의견보내기'로는 설명하기 힘든 부분이 있어서 블로그 포스트로 작성합니다.



블로그에 글을 쓸 때 이미지를 삽입하면, 발행된 글을 읽는 사람(reader)은 글에 삽입된 이미지를 클릭하여 확대된 이미지로 볼 수 있습니다.

공식 유튜브 파트너 및 제작자 블로그를 예로 들어보겠습니다. 아래는 공식 유튜브 파트너 및 제작자 블로그의 "YouTube 라이브 스트리밍 채널 확대" 라는 글을 크롬 브라우저로 본 화면인데요.


그림처럼 포스트에 이미지가 있을 때 읽는 사람(reader)은 이미지를 클릭하면, 확대된 이미지로 볼 수 있습니다. 이미지를 클릭하면, 아래 그림과 같은 화면이 나옵니다.


검은 바탕화면의 이미지 확대 화면. 이는 blogger에서 기본으로 제공되는 기능입니다. 여기서 우측 상단의 'X'를 클릭하거나, 검은 바탕화면을 클릭하면 본래의 화면으로 돌아갑니다.

그런데, 크롬 브라우저에서 이 기능을 이용하면, 버그가 생깁니다.

이미지 확대화면에서 우측 상단의 'X'를 클릭하거나, 검은 바탕화면을 클릭하여 본래의 화면으로 돌아온 후 '스크롤 올리기', '스크롤 내리기', '이미지에 마우스 커서 올리기' 등의 동작을 하면, 블로그의 일부 영역이 약 8px 가량 좌측으로 이동하고 그 잔상이 남습니다.


템플릿을 꾸미다가 이런 현상이 생긴다는 것을 알았기 때문에, 처음에는 코드가 꼬여서 생기는 문제인줄 알았습니다. 그런데, 이 같은 현상은 익스플로러와 파이어폭스 브라우저에서는 발생하지 않았습니다. 또, 그림에서 보시는 바와 같이 제 개인 블로그에서만 발생하는 문제도 아니었습니다.



위의 사진은 구글 한국 개발자 블로그의 글 번개장터 YouTube API 적용기 에서 동일한 문제가 발생한 것을 캡쳐한 것입니다.

제가 프로그래밍은 잘 모릅니다만, 문제의 원인에 대해서 짐작이 가는 부분이 하나 있는데요. 검은 바탕의 이미지 확대화면이 뜰 때, 검은 바탕을 유심히 보면 블로그가 우측으로 약 8px 정도 이동하는 것을 볼 수 있습니다. 아마 이 부분에서 무슨 문제가 발생하는 것이 아닐까 싶습니다.

여튼, 해당 문제에 대해 구글 측에 의견을 전달합니다.

구글 블로그(blogger) 레이아웃 간격 조절 코드 몇가지

일반 템플릿에서 포스트, 탭, 위젯의 간격을 조절할 때 쓰일 수 있는 코드 몇가지를 모아봤습니다. 코드 입력 전에는 반드시 템플릿을 백업해두시고, 테스트용 블로그에서 테스트를 해본 후 적용하시기 바랍니다.

아래 코드들의 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.


1. 포스트와 탭(페이지) 사이의 간격 조절


.blog-posts {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


2. 포스트와 사이드바 사이의 간격 조절



.blog-posts {margin-right:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


3. 사이드바와 탭(페이지) 사이의 간격 조절


.main-inner .column-right-outer {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


4. 포스트 간 간격 조절


.date-outer{margin-bottom:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


5. 사이드바 위젯 간 간격 조절


.sidebar .widget {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.