블로거 사용자를 위한 코드 모음: 태그

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)의 유형이란 글을 참고하시기 바랍니다. (그리 어렵지 않습니다)