※ 템플릿 수정은 많은 시행착오를 겪어야 합니다. 여러 번 수정을 거쳐야 할 수 있습니다. 따라서 현재 운영중인 블로그에 바로 적용하지 말고, 별도의 템플릿 편집용 블로그를 만들어 충분한 테스트를 거친 뒤 반영하는 방식을 추천합니다. 구글 Blogger에서는 여러 개의 블로그를 만들 수 있으므로, 꼭 테스트용 블로그를 하나 만들어 해보세요.

 

팁을 설명하기에 앞서, 구글 블로거에 대한 몇 가지 이해가 필요합니다. 블로거 도움말을 꼭 읽어보세요.

- 블로그 레이아웃의 HTML 수정

- 레이아웃용 Widget 태그

- 레이아웃용 페이지 요소 태그

 

간단히 방법만 적어보겠습니다.

블로그 설정화면으로 들어갑니다. '템플릿' - 'HTML편집' 버튼을 누릅니다.

경고문이 나오는데, 한번 읽어본 뒤 '계속' 버튼을 누릅니다.

HTML코드가 출력됩니다. 이것만으론 러프한 편집만 가능하고, 실제 디테일한 부분을 수정하려면 상단의 '가젯 코드 펼쳐서 보여주기' 에 체크합니다. 가젯 코드들이 확장되어 실제 코드들이 보입니다.

찾기(Ctrl + F) 기능을 이용해, '<div class='blog-posts hfeed'>' 부분을 검색합니다. 기본 템플릿이라면 비슷한 부분이 두 개가 나올 겁니다. 위쪽은 안에 인클루딩되는 내용에 관련된 부분이고, 실제 화면에 보여지는 부분은 아랫쪽입니다. 따라서 우리는 아랫쪽 부분을 수정해주면 됩니다.

날짜에 해당하는 부분은

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

입니다. 자세히 보시면, 클래스명과 태그명을 통해 이게 무슨 기능을 하는지 대충 알 수 있습니다. 역으로, 현재 블로그 화면 내에 표시되고 있는 부분을 템플릿에서 찾을 수도 있습니다. 가령 블로거 기본 템플릿에서 날짜 부분의 HTML소스를 확인해보면(크롬에서 F12키, 개발자 툴 이용) <h2 class="date-header"> 와 같은 클래스네임을 가진 h2 태그로 둘러싸인 걸 볼 수 있죠. 따라서 템플릿 태그 내에서도 같은 부분을 찾아보면 됩니다. 다시 위를 보시면, 날짜에 해당하는 부분에 <h2 class='date-header'> 가 있죠? 이런 식으로 블로그 페이지 내에서 어떤 부분이 어떤 템플릿 코드에 해당하는지 찾아볼 수 있습니다.

기본적으로는 이렇게 알아낸 코드들의 순서를 바꿔주고, CSS로 위치를 다시 잡아주면서 정렬하게 됩니다. 제 블로그 게시물페이지 상단에 설정된 템플릿 코드는 다음과 같습니다.

 

<div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>

<data:adStart/>
<h4><a class='bk' expr:href='data:post.url'><data:post.title/></a></h4>
<data:adEnd/>
<h3 class='date-header' style='float: left'>

<data:post.dateHeader/> |
<a class='bk2' expr:href='data:post.addCommentUrl'><span class='brd'><data:post.numComments/></span> comments</a>
</h3>

 

h4 태그를 이용해 게시물 제목을 나타냈습니다. <data:post.title/>이 바로 게시물의 제목을 나타내주는 템플릿 코드이지요. <data:post.dateHeader/> 는 보시다시피 날짜를 나타냅니다. <data:post.numComments/>는 게시물에 달린 댓글 수를 나타내지요.

이런 식으로, 간단하게 각 요소가 나타나는 순서를 변경해줄 수 있습니다. 모양을 꾸미는 것은 CSS를 통해 처리합니다. 템플릿 코드와는 달리 CSS는 소스보기를 통해서 쉽게 확인하실 수 있으니 제 블로그를 직접 뜯어보시면(?) 아실 수 있을 겁니다(크롬의 개발자 도구를 이용해 보세요). 또한 간단한 CSS 변경에 대해서는 웹에 강좌가 많으니, 구글링을 통해 찾아보도록 합시다.

우선 급하게 요점만 적어 써둡니다. 나중에 좀 더 쉽고 자세히 설명해보도록 하겠습니다.

구글의 한국어 메인 페이지에는 Blogger가 아닌 텍스트큐브의 링크가 걸려 있습니다만, 여전히 전세계를 대상으로 한 구글의 주력 블로그 서비스는 Blogger입니다. 그만큼 사용자 수도 많고, 업데이트도 꾸준히 이루어지고 있습니다. 최근에는 'Read more(더 보기, 자세히 알아보기)' 기능을 새롭게 추가했는데요, 오늘은 이 새 기능에 대해 알아보도록 하겠습니다.

Creating 'After the jump' summariesPrint – Blogger Help

한동안 블로그에 좀 뜸했죠? 그간 뭘 했는고 하니, 구글 Blogger에 쓸 템플릿을 만들고 있었습니다. 지난번에 했던 블로그 리뉴얼에서 자신감을 얻어 작업을 시작했죠. 새 템플릿은 사진 블로그를 위해 만들어 졌습니다. 커다란 사진들을 올릴 수 있게 레이아웃을 바꾸고, 사진 감상에 용이하도록 배경색도 조절했습니다. 그리고 웬만하면 Blogger의 템플릿 구조를 잘 모르는 분도 쉽게 쓸 수 있도록 만들었습니다.

 

템플릿 소개

1. 레이아웃
여러 포토블로그들을 참고하여 흔히 쓰는 레이아웃으로 바꾸었습니다. 게시물을 1단으로 만들고, 사이드바를 아래로 옮겼죠. 보다시피 원래는 1개였던 사이드바 영역을 3개로 나누었습니다. Blogger에 삽입되는 가젯들은 각 사이드바 영역 아무 곳에나 배치할 수 있습니다. 요걸 조금만 수정하면 티스토리에서 많이 쓰이는 세로 3단짜리 템플릿도 만들 수 있을 것 같습니다(다음에 한 번 도전해 볼까요?).

2. 헤더
기본적으로 포함되는 블로그 제목과 설명 외에 검색창과 별도 메뉴를 추가시켰습니다. 검색창은 Blogger 가젯으로 제공되는 것을 썼습니다. 이게 원래 헤더에 잘 안 들어가지만 하단에 있는 것보단 나을 거 같아 헤더에 집어넣었습니다(검색 결과는 게시물 위쪽에 표시됩니다).

그리고 직접 링크 주소를 적을 수 있는 메뉴를 추가했습니다. 기본으로 Home, RSS Feed, Comment Feed 링크가 들어가 있는데 이 부분은 HTML수정에서 직접 바꿔주시면 됩니다.

3. 게시물 & 이미지
게시물에 큰 사진을 넣을 수 있게 가로 사이즈를 1000px로 잡았습니다. 1000px보다 작은 이미지를 넣어도 알아서 가운데로 정렬됩니다. 그런데 Blogger에 직접 올리는 사진은 큰 사이즈를 지원하지 않죠. 기껏해야 400px 입니다. 구글에서 제공하는 피카사 웹앨범에서도 블로그에 퍼갈 땐 800px 이하의 크기밖에 지원하지 않습니다.

그래서 전 Flickr를 추천해 드립니다. 이미지를 1000px 정도로 리사이즈한 뒤 플리커에 올리면 그 사이즈 그대로 블로그에 쓸 수 있거든요. 비록 이미지를 따로 올리고 태그를 복사해와야 한다는 불편함이 있지만 금방 적응한다면 괜찮겠죠. 아니면 기타 이미지 업로드 서비스를 이용하시는 것도 좋고요.

4. 사이드바 & 푸터
이 템플릿의 가장 큰 특징인 하단 3개짜리 사이드바 입니다. 원래 Blogger의 사이드바는 한 개 짜리죠. 이걸 3개로 나누어 코딩했는데, 다행스럽게도 제대로 동작하더군요. 각 단은 가로 300px의 크기를 가지며, 가젯들은 3개의 단 중 아무 곳에나 위치시킬 수 있습니다. 대시보드의 레이아웃 편집 화면에서도 3개의 단이 제대로 표시됩니다.

그리고 각 위젯들은 사이드바 아래의 푸터에도 넣을 수 있습니다. 대신 푸터는 가로 너비 1000px의 1단 짜리지요. 기능만 놓고 본다면 사이드바와 별 차이가 없는 것 같기도 합니다. 푸터엔 기본적으로 copyright 정보가 들어가 있는데, 자신의 입맛대로 텍스트를 바꿔주시면 됩니다.

 

템플릿 다운로드 & 적용

먼저 아래에 링크된 xml 파일을 다운로드 받으세요. Blogger에 로그인한 뒤, 템플릿을 바꿀 블로그의 환경설정 화면에서 '레이아웃' - 'HTML편집' 을 차례대로 클릭하세요. '하드 드라이브의 파일에서 템플릿 업로드' 항목을 찾은 뒤, 다운로드 받은 xml 파일을 업로드 하면 됩니다.

템플릿 다운로드

 

템플릿 수정

xml 파일의 업로드가 제대로 이루어졌다면 'HTML편집' 화면의 아래쪽 '템플릿 수정' 란에 HTML코드가 나타날 겁니다. '도구 템플릿 확장'에 체크한 뒤, 몇몇 부분의 HTML 코드를 직접 수정해 줍니다.

 

▲ 코드의 맨 윗부분에서 keywords 부분을 찾아 자신의 블로그에 맞는 키워드들로 채워줍니다. 콤마(,)로 구분해주면 됩니다. 예를 들어 '사진, 카메라, photo, camera, picture' 와 같이 입력할 수도 있겠네요.

 

▲ 메뉴 부분을 찾아 링크와 텍스트를 수정해 줍니다. Ctrl + F (찾기) 기능을 이용하면 좋습니다. betakais.blogspot.com 이라고 쓰여진 부분을 자신의 블로그 주소에 맞게 수정합니다. 더 추가할 링크가 있다면 기존 태그를 참조해서 추가해 줍니다.

 

이렇게 수정해주고 '미리 보기' 버튼을 클릭해 제대로 표시되는지 확인한 뒤, 주황색 '템플릿 저장' 버튼을 누르면 끝! 이제 재미있게 블로깅 하시면 됩니다.

만약 Blogger 템플릿 코드와 CSS에 대해 잘 아시는 분이라면 직접 코드를 수정해서 쓰셔도 좋습니다. 브라우저 테스트 결과 IE, 파이어폭스, 크롬 등의 브라우저에서 큰 이상 없이 잘 표시되고 있네요. 사실 IE6만 주의하면 나머진 대체로 비슷하게 나오는지라... ㅡㅡ; 다만 Blogger의 몇몇 가젯들 중 일부는 가젯 자체의 문제로 인해 IE6에서 제대로 표시되지 않을 수도 있습니다(대표적으로 '관심 있는 사용자' 가젯. 이건 제 탓이 아녜요~).

현재 betakais.blogspot.com 에서 이 템플릿의 기본형이 실제로 적용된 모습을 보실 수 있으며, 저의 새로운 사진블로그인 photokais.blogspot.com 에도 이 템플릿이 적용되어 있습니다. 여기엔 약간의 수정을 거쳐 광고도 달고, 이런 저런 가젯도 달았지요. 참고하시면 좋을 것 같네요.

 

어설프게나마 Blogger 템플릿을 만들었는데, '이걸 과연 누가 쓰려나…' 하는 생각이 듭니다. 한편으론 너무 제 스타일에 맞춰 만든 건 아닐까 싶기도 하고요. 단 한 분이라도 써주신다면 정말 기분 좋을 것 같아요. 아니면 이 템플릿을 베이스로 더 멋진 템플릿을 만들어도 좋을 것 같고요. 부디 유용하게 쓰시는 분이 꼭 있었으면….

템플릿 다운로드

요새 한창 새 템플릿 만드느라 정신이 없었는데, 그 사이 구글 Blogger에 꽤 중요한 업데이트가 있었습니다. 바로 새 편집기를 사용할 수 있게 된 것입니다. Blogger 도움말에도 이에 대한 글이 있는데, 스크린샷을 보아하니 먼저 Blogger Draft에서 테스트를 마치고 이제 정식으로 적용한 모양이네요.

An overview of the new post editor (Blogger Help)

 

Blogger의 구형 위지윅 편집기

기존 편집기의 모습입니다. 아주 기본적인 기능들만 제공하는 위지윅 편집기입니다. 별도의 팝업창을 통해 이미지를 삽입하며, 미리보기 기능은 실제 블로그에서 보는 것과 많은 차이가 있습니다. 간단한 글을 쓰기엔 괜찮지만 입력창 크기가 고정되어 있어 긴 글을 쓸 때엔 불편합니다. 타 블로그 서비스의 편집기와 비교해봐도 많이 떨어지는 편이죠. 그래서 전 예전부터 HTML을 직접 입력하여 글을 썼고, 지금은 Windows Live Writer로 글을 쓰고 있습니다.

 

새 위지윅 편집기

이번에 업데이트된 새 위지윅 편집기입니다. 겉보기엔 큰 차이가 없어 보이지만 꽤 많은 부분이 개선되었습니다. 가장 변화가 큰 부분은 이미지 삽입에 관련된 부분으로, 기존의 중구난방식 이미지 삽입에서 매우 많이 개선되었습니다.

 

기존 편집기에서는 이미지 추가 시 별도의 팝업창이 떴는데요, 새 편집기에서는 이렇게 생긴 레이어가 편집기 바로 위에 뜹니다. 전과 달리 이미지를 올릴 때 크기를 지정하지 않아도 되고, 글에 추가된 이미지들은 썸네일로 이 레이어에 나타나게 됩니다.

기존엔 이미지를 올릴 때마다 글에 삽입할 크기를 미리 지정해야 했죠. 이젠 그럴 필요가 없어졌습니다. 편집창 내에 삽입된 이미지를 클릭하면, 아래쪽에 작은 메뉴가 따로 뜹니다. 이미지 크기를 지정할 수 있고, 이미지 정렬을 바꿀 수도 있습니다.

미리 지정된 세 가지 크기가 맘에 들지 않는다면, 이렇게 직접 크기를 지정해 줄 수도 있습니다. 편집창에서 이미지를 더블클릭하면 크기를 조절할 수 있게 핸들이 생기는데, 이를 조절하여 크기를 바꿀 수 있습니다. 오른쪽 아래에 픽셀수도 표시해 줍니다.

또한 HTML 편집 부분도 개선되었습니다. 기존의 편집기에선 HTML 모드와 위지윅 모드를 번갈아 쓰면 HTML 코드가 죄다 깨져버리곤 했었는데, 이런 부분이 많이 개선되었다고 합니다.

그밖에 편집창 크기 조절, 링크 편집, 미리보기 화면, 도구모음 색상팔레트 등이 개선되었다고 하네요.

 

새 편집기를 직접 써보니…

처음에 딱 보고 도구모음 부분이 바뀌었길래 뭔가 새로운 기능이 추가된 줄 알았는데, 안타깝게도 그런 건 없더군요(겨우 취소선 삽입 버튼 하나). 오히려 동영상 추가 버튼이 없어졌습니다. Blogger에서 바로 넣지 말고 유튜브를 이용하라는 걸까요? 이미지 삽입 부분은 전보다 확실히 편해졌지만, 이미지를 가장 크게 넣었을 때의 크기가 겨우 400px이네요. 너무 작아요.

그리고 편집창 크기는 세로로만 늘어나고, 가로로는 늘어나지 않는군요. 요건 구글 크롬을 쓰는 게 좋겠어요. 색상 팔레트가 개선된 건 좋지만 16진수 코드(#FFFFFF 같은)를 직접 삽입할 수 있었다면 더 좋았을 텐데요.

또한 위에서 링크한 Blogger Help의 글에는 새 편집기에서 위치 태그를 사용할 수 있다고 표시되어 있는데, 실제 써보니까 그런 기능을 찾을 수 없었습니다. 아직 업데이트가 안 된 모양입니다. 좀 아쉽네요.

그래도 꾸준히 개선해 나가는 것 같으니, 계속 지켜봅시다 ;)

덧) 위치태그 기능은 Blogger Draft 상태에서 사용 가능하다고 합니다. zizukabi님의 글 참고.

중요 : Windows Live Writer와 관련해 계정추가시 문제가 발생할 수 있습니다. 자세한 내용은 글 맨 아래를 참고하세요.

구글 Blogger에는 티스토리의 태터데스크같은 메인화면이 따로 없습니다. 미리 지정한 수 만큼의 최신 글을 순서대로 보여줄 뿐입니다. 제목만 보여주는 것도 아니고 각 글의 본문 내용까지 모두 보여줍니다. 이는 아카이브 페이지와 레이블 검색 페이지에도 그대로 적용되죠. 전체적으로 훑어보기엔 좋지만, 페이지가 너무 길어져 버린다는 단점이 있습니다. 또한 각 글의 제목만 따로 뽑아주는 것도 아니어서 제목별로 글을 찾고자 할 때 불편하죠.

그래서 오늘은 Blogger의 메인 화면을 좀 손보려고 합니다. 이미 제 블로그 메인화면에 적용되어 있죠. 저처럼 블로그에 올리는 글의 길이가 긴 편인 분들께 유용하리라 생각됩니다.

 

페이지 타입을 이용해 페이지마다 각각 다른 내용 출력하기

Blogger에는 세 개의 페이지 타입이 있습니다. 메인페이지(main), 아카이브(archive), 게시물(item) 이 바로 그것이죠. 간단한 코드를 이용해 페이지마다 각각 다른 레이아웃이나 디자인, 표시 내용을 지정할 수 있습니다. 대시보드의 ‘레이아웃’-‘HTML편집’ 메뉴에서 수정할 수 있죠(‘도구 템플릿 확장’에 체크는 필수!). 기본 형식은 다음과 같습니다.

<b:if cond='data:blog.pageType == "item"'>
<아이템 페이지에만 표시할 내용>
</b:if>

해석하자면 이렇습니다. “만약 지금 보이는 페이지의 타입이 “item(게시물)” 이라면, 이 안에 속한 내용을 표시하라”. 즉, 각 글의 게시물 페이지에만 내용이 표시됩니다. 메인페이지나 아카이브 페이지에는 나타나지 않죠. 제 블로그에서는 믹시의 ‘믹스업 위젯’을 표시할 때 이 태그를 쓰고 있습니다. 덕분에 게시물 페이지에서만 믹스업 위젯이 나타나죠.

IF가 나왔으니, Else도 있겠죠? 당연히 있습니다. Else가 들어갔을 경우의 코드는 다음과 같습니다.

<b:if cond='data:blog.pageType == "item"'>
<아이템 페이지에만 표시할 내용>
<b:else/>
<아이템 페이지가 아닐 경우 표시할 내용>
</b:if>

코드 위쪽 부분의 해석은 위와 같습니다. 여기에 else 부분을 덧붙여, “만약 지금 보이는 페이지의 타입이 “item”이 아니라면, 아래 내용을 표시하라”. 부분이 추가되었죠. 여기선 두 번째 코드, 즉 else 부분이 포함된 코드를 사용할 겁니다. 방법은 간단합니다. 게시물 페이지일 때의 내용과, 메인 또는 아카이브일 때의 내용을 각각 다르게 지정해주면 되죠.

<b:if cond='data:blog.pageType == “item”'>
<data:post.body/>
<b:else/>
<div class='post_list'>
<data:post.body/>
<div class='post_list_info'> 게시물 내용의 일부입니다.<br/>
<a expr:href='data:post.url'><strong>전체 내용을 보려면 클릭해주세요.</strong></a>
</div>
</div>
</b:if>

<data:post.body/> 태그는 Blogger의 템플릿 코드로서, 글의 본문을 표시해주는 역할을 합니다. 코드를 해석해 볼까요? 게시물 페이지일 때는 본문만 보이게, 게시물 페이지가 아닐 때에는 post_list 라는 이름의 div 안에 본문이 표시되도록 되어 있습니다. 그리고 약간의 설명도 표시되도록 해놨죠. 글 전체를 볼 수 있게 퍼머링크도 달았습니다. 글 제목이나 날짜 등은 그대로 쓸 것이므로, 여기엔 넣지 않았습니다.

Blogger의 HTML편집 메뉴에서 <data:post.body/> 태그가 위치한 곳을 찾아, 위와 같이 변경해 줍니다. 그럼 이제, CSS를 수정해 볼까요?

 

CSS를 이용해 글 내용의 일부만 표시하기

위에서 b:else 코드를 작성했을 때 본문 내용을 표시해주는 <data:post.body/> 태그를 div 로 감쌌습니다. 여기에 CSS스타일을 적용시켜, 길고 긴 본문 내용 중 일부만 표시되도록 할 것입니다. Blogger의 HTML편집에서 보면, head 태그 사이에 CSS 스타일시트가 적용되어 있습니다. 아까 div 태그의 클래스명을 post_list 로 지정했었죠? 이걸 그대로 사용합니다(꼭 여기에 지정된 클래스명을 쓰지 않아도 됩니다. 다만 클래스명을 바꿀 땐 HTML에 쓰인 클래스명 전체를 다 바꿔주세요).

.post_list { width: 560px; height: 300px; overflow: hidden; }

본문을 요약해서 보여줄 크기를 지정해주고 overflow: hidden; 를 입력합니다. div 안의 내용이 지정된 크기보다 커서 넘칠 경우, 넘친 부분은 보이지 않게 하라는 뜻입니다. 이렇게 해두면 글의 길이가 엄청 길어도 위에서부터 가로560 x 세로300px 까지만 표시해 줍니다. 아까 IF문에서 게시물(item)일 때는 이 div 코드를 넣지 않았으므로, 게시물 페이지에서는 본문의 전체 내용이 표시되죠.

그런데 이 방법에는 커다란 단점이 있습니다. 바로 Blogger 시스템 내에서 본문의 일부만 보여주는 것이 아니라, 본문 전체를 로딩한 뒤에 CSS를 이용, 나머지 부분을 잘라낸다는 점이죠. 때문에 몇몇 오브젝트들의 경우 이 방법이 잘 안 먹힐 때가 있습니다. 특히 embed 태그로 삽입된 오브젝트의 경우, 미리 설정된 div 크기보다 바깥쪽에 있으면서도 표시될 때가 있죠. 그래서 전 아예 embed 태그가 보이지 않도록 설정했습니다.

.post_list embed { display: none; }

post_list 클래스명을 쓰는 개체 안에 속한 embed 태그를 보이지 않게 하라는 뜻입니다. 아까 div 에 저 클래스명을 지정했으므로, 그 안에 있는 모든 embed 태그는 보이지 않게 됩니다. 만약 이미지까지 보이지 않게 하려면, img 태그도 추가하면 됩니다.

.post_list embed, .post_list img { display: none; }

이렇게 해 두면 post_list 클래스명을 쓰는 개체 안에 속한 모든 embed, img 태그가 보이지 않게 됩니다. 띄어쓰기에 주의하세요.

템플릿을 저장하고 확인하기, 테두리 넣기

이제 템플릿을 저장하고 제대로 적용되었는지 확인합니다. 템플릿 코드에 오류가 있다면 Blogger의 HTML편집기에서 받아주질 않습니다. 그리고 post_list 박스의 크기를 픽셀로 지정하였으므로, 본문 텍스트가 중간에서 뚝 잘릴 수도 있습니다. 갑자기 텍스트 중간에서 뚝 잘려 보기 안 좋다면, 박스 하단에 선을 넣는 것도 좋은 방법입니다.

.post_list { width: 560px; height: 300px; overflow: hidden; border-bottom: solid 1px #ccc; }

post_list 박스의 하단에 직선으로 된, 두께 1px, #ccc색의 테두리를 넣으라는 뜻입니다. 점선으로 하고 싶으시다면 solid 를 dashed 나 dotted 로 바꿔주면 됩니다.

저도 처음엔 선을 넣었다가 좀 밋밋한 것 같아서 그림자와 투명PNG로 마무리 했습니다. CSS를 이용했지요. 글이 너무 길어지니 이건 다음에 알려드릴게요(말로 설명하는 건 너무 어려워요).

이렇게 해서 블로그의 메인페이지와 아카이브 페이지를 꾸며봤습니다. 전엔 아카이브 페이지를 한 번 볼라치면 너무 길어져서 보기 힘들었는데, 지금은 적당히 짧아져서 보기 괜찮네요.

Blogger를 쓰고 계시다면, 한 번 이렇게 꾸며보는 건 어떨까요?

 

중요 : Windows Live Writer에서 Blogger를 새 계정으로 추가할 때, 이 팁 때문에 블로그의 스킨을 제대로 불러오지 못할 수도 있습니다. 그럴 땐 이 팁에서 수정한 부분을 원래대로 돌려놓은 뒤(또는 주석처리를 이용) Live Writer에서 계정추가를 하고, 다시 팁을 적용하면 됩니다. 향후 스킨 업데이트 시에도 그대로 적용됩니다. Live Writer에서 해당 코드를 제대로 인식하지 못해 이런 문제가 발생합니다.(2009-08-16)

오늘은 구글 Blogger 사용자 분들을 위해 재미있는 팁 하나를 소개하고자 합니다. 바로 블로그 파비콘 바꾸기 for Blogger!

아마 blogger 사용자라면, 주황색 둥글둥글한 네모 안에 하얀 B 글자가 새겨진 blogger 로고를 자주 보셨을 겁니다. 이 로고는 blogger의 파비콘(즐겨찾기 아이콘)으로도 쓰이고 있는데요, 일반 사용자가 blogger에서 자신의 블로그를 만들어도 동일하게 적용됩니다.

그런데 아무리 예쁜 것도 자주 보면 질리게 마련이죠. 수많은 blogspot 블로그들이 모두 같은 파비콘을 쓰니, 좀 개성이 없는 것 같기도 하고요. 그래서 간단하게 파비콘을 바꾸는 방법을 알아보도록 하겠습니다.

 

1. 파비콘 이미지 준비

우선 파비콘으로 만들 이미지를 준비합니다. 직접 이미지를 만들어도 되지만, 여기서는 간단하게 기존 blogger 파비콘의 색만 바꿔보도록 하겠습니다.

파이어폭스에서 Blogger에 접속해 파비콘을 캡쳐(Print Screen 키 사용) 한 뒤, 포토샵에 붙여 넣었습니다. marquee 툴(단축키 M)을 이용해 네모 낳게 선택한 뒤, 선택 영역을 복사(Ctrl+C) 하고 새 작업창(Ctrl+N)을 열어 붙여 넣습니다(Ctrl+V). 간단하게 단축키만 딱딱 쳐주면 됩니다.

 

제대로 복사하였다면, 위와 같이 새 작업창이 열릴 것입니다(확대는 Ctrl+＋). 아이콘의 크기는 16x16 픽셀입니다. 테두리를 둥글게 하기 위해, 다시 marquee 툴을 이용해 테두리 부분을 삭제해 줍니다(삭제할 부분을 선택한 뒤 Delete 키).

 

2. 파비콘 색 바꾸기와 저장, 파일이름 바꾸기

다음은 색을 바꿔보겠습니다. 메뉴에서 Image – Adjustments – Hue/Saturation(Ctrl+U)를 선택하면, 위와 같은 창이 뜹니다. Hue부분의 슬라이드를 조절해서 색을 바꿔줍니다. 여기서는 파란색으로 바꿔봤습니다. OK를 누르면 적용됩니다.

 

메뉴에서 File – Save for Web(Alt+Shift+Ctrl+S)을 선택합니다. GIF로 설정해준 뒤¹ 설정을 대충 위와 같이 하고, ‘Transparency(투명화)’에 체크해줍니다. 아까 삭제했던 테두리 부분이 투명으로 처리됩니다. 디더 부분은 No Dither로 선택합니다. 위 이미지에는 고작 12가지 색이 사용되었네요. Color Table을 보면, 어떠어떠한 색이 쓰였는지 확인할 수 있습니다. Save 버튼을 누르고, 파일명을 지정합니다.

 

저장이 완료되면, 탐색기에서 파일명을 바꿔줍니다. 원래 GIF 파일이지만 과감하게 확장자도 바꿔줍니다. favicon.ico로 바꾸면 됩니다.

 

3. 파비콘 업로드 하기

파비콘을 다 만들었으니, 이제 웹에 업로드 합니다. 만약 별도 계정이 있다면 그곳에 올려도 되겠지만, 없다면 이미지를 호스팅하는 서비스에 올려야겠죠. blogger 사용자들은 대부분 구글 계정을 가지고 있으니, 구글에서 해결해 보도록 합시다. 구글에서는 Picasa 웹앨범이라는 서비스를 제공하고 있습니다. 피카사 웹앨범은 blogger와도 연동되죠. blogger에서 올린 이미지는 자동으로 피카사 웰 앨범에 등록됩니다. 그럼 피카사 웹앨범에 한 번 올려볼까요?

 

이런, 올바른 파일 형식이 아니라고 하는군요. JPEG나 GIF, PNG 같은 이미지 파일 형식이 아니어서 거부되나 봅니다. ‘업로드 시작’ 버튼도 활성화되지 않았고요. 그럼 애써 만든 파비콘을 대체 어디에 올려야 할까요?

 

황당하게도, blogger의 ‘새 게시물’ 메뉴에서 파비콘을 업로드 할 수 있습니다. blogger 대시보드에서 ‘새 게시물’ 버튼을 누르고, 에디터에서 이미지 업로드를 선택한 후, 파비콘 경로를 지정해주고, 확인 버튼을 누릅니다. 그러면…

 

이렇게 너무나도 잘 업로드 됩니다. 그리고 이건 좀 웃기지만, 똑같은 이미지가 피카사 웹앨범에도 업로드 됩니다!

 

이렇게 말이죠! 다만 확장자가 gif로 바뀌었네요.

 

4. 파비콘 주소를 HTML에 넣기

아무튼 파비콘을 웹에 업로드 했으니, 이번엔 HTML을 수정해 봅시다. 우선, 파비콘의 정확한 주소를 알아내야 합니다. 아까 파비콘을 업로드 했던 ‘새 게시물’ 메뉴에서, 이 주소를 찾을 수 있습니다.

 

파비콘을 업로드하고 난 뒤, 에디터의 오른쪽 위에 위치한 ‘HTML 편집’ 버튼을 누릅니다. 그러면 게시물의 소스 코드를 볼 수 있죠. img src 태그 부분을 찾아보면, 위와 같이 주소를 찾을 수 있습니다. 그런데 피카사 웹앨범에 올라온 주소랑은 약간 다르군요. 아무튼, 이 주소를 복사해 둡니다.

 

블로그 관리 메뉴(또는 대시보드)에서, 레이아웃 – HTML 편집 메뉴를 선택합니다. 위와 같이 소스 코드가 보일 겁니다. 오른쪽 위에 있는 ‘도구 템플릿 확장’ 에도 체크를 해줍니다. <head>태그와 </head>태그 사이에 파비콘을 넣어줄 HTML 코드를 삽입합니다. 소스를 잘 살펴보고, <b:include data='blog' name='all-head-content'/> 코드보다 아래쪽에 다음 코드를 추가합니다. (이 코드는 blogger의 기본 주황색 파비콘을 보여주는 코드입니다.) 

<link href='앞서 복사해 둔 파비콘의 주소' rel='shortcut icon' type='image/ico'/>

수정을 마쳤으면, ‘템플릿 저장’ 버튼을 눌러 템플릿을 저장합니다.

 

5. 확인

웹 브라우저에서 블로그를 열어, 파비콘이 제대로 적용되었는지 확인합니다. 간혹 캐시에 저장된 파비콘이 보일 수 있으므로, 캐시를 비우거나 Ctrl+F5(firefox) 키를 눌러 전체 새로 고침을 합니다.

 

제 블로그를 파이어폭스, 사파리, 오페라, 크롬에서 본 모습입니다. 파란색 B모양 파비콘이 잘 나오네요. 참고로 익스플로러 6에서는 파비콘이 잘 나오지 않을 수도 있습니다(브라우저 탓). 잘못 수정된 건 아니니 걱정하지 않아도 됩니다.

저는 기존의 파비콘을 색만 바꿔 사용했지만, 포토샵을 다룰 수 있다면 직접 만들어 쓰셔도 됩니다. 중요한 건 16x16 사이즈, GIF저장, 그리고 업로드만 신경 쓰면 된다는 것이죠.

내 블로그의 파비콘에 질렸다면, 오늘 한번 바꿔보시는 건 어떨까요?

 

 

 

1) 원래 별도의 아이콘 편집 프로그램 없이 ico파일을 만들 땐, bmp 포맷을 이용합니다. 이미지를 bmp로 저장한 뒤 확장자를 바꿔주는 식이죠. 그런데 gif로 했음에도 불구하고 브라우저에서 파비콘이 잘 나타나네요;; 그저 신기할 따름입니다.

mixsh inside에 올라온 믹스 업 위젯 업데이트 글에, 몇몇 분들이 ‘blogger에 믹스 업 위젯 다는 법을 모르겠다’ 는 리플을 남기셨더군요. 그러고 보니 믹스 업 위젯 페이지에도 ‘블로그 스킨편집 메뉴에서 본문 하단위치 아래에 아래의 코드를 붙여 넣어 주세요’ 라고 만 쓰여 있고 위젯설치 도움말에도 blogger에 설치하는 방법은 빠져 있더라고요. 그래서 간단하게나마 믹스 업 위젯을 blogger에 설치하는 방법을 소개하고자 합니다. 우선은 신형 ‘레이아웃’ 방식에서 설치하는 방법에 대해 알려 드리겠습니다. 클래식 템플릿에 적용하는 방법도 별반 다르지 않으니 참고하시기 바랍니다.

 

1. 믹시 가입과 로그인

믹스 업 위젯을 설치해야 하니, 가장 먼저 믹시에 가입해야겠죠? 믹시 홈페이지에 접속한 뒤, 오른쪽 상단의 ‘회원가입’ 링크를 눌러 회원가입 폼을 작성합니다. 아이디, 닉네임, 이메일, 비밀번호만 입력하면 되는 아주 간단한 방식입니다. 회원가입을 마쳤으면 로그인을 합니다.

 

2. 피드 주소 변경

로그인한 뒤, 다시 오른쪽 상단의 ‘블로그관리’ 링크를 눌러 관리 페이지로 들어갑니다. 블로그를 등록하지 않았다면 자신의 블로그를 등록합니다. 중간에 RSS주소를 입력하는 부분이 있는데, 이 주소는 자신의 블로그에서 확인할 수 있습니다. 블로그 하단을 잘 찾아보면 ‘블로그 피드 : 게시물(ATOM)’ 이라 적힌 부분이 있는데, 여기에 링크된 주소를 따다 쓰면 됩니다. blogger 유저라면 기본적으로
http://(사용자 설정 주소).blogspot.com/feeds/posts/default?alt=rss 
형식의 RSS피드 주소를 쓰게 됩니다. 제 블로그 주소는 http://hfkais.blogspot.com 이니, http://hfkais.blogspot.com/feeds/posts/default?alt=rss 주소를 쓰게 되지요. 자신의 블로그 주소를 참조해 알맞게 적어줍니다. 파이어폭스나 사파리를 쓴다면 더욱 쉽게 피드 주소를 복사할 수 있습니다.

 

3. 블로그 소스코드에 믹스 업 코드 삽입

믹시에서의 설정이 다 끝났으면, 믹스 업 위젯 코드를 받아 설치할 차례입니다. 믹스 업 위젯 페이지에서 코드를 받을 수 있습니다. 위젯을 설치할 블로그를 선택하고, 조회수 표시 옵션을 선택한 뒤, 이용중인 블로그 서비스에서 Blogger에 체크하고 확인 버튼을 누릅니다. 확인 버튼 하단에 생성된 코드를 복사합니다.

 

다시 Blogger로 돌아와서, 대시보드의 ‘레이아웃’ 링크를 클릭합니다.

 

상단 메뉴 중 ‘HTML 편집’ 링크를 클릭합니다. 템플릿 수정의 ‘도구 템플릿 확장’ 에 체크한 뒤, 소스를 살펴봅니다. 소스 중에서 <data:post.body/> 태그를 찾습니다(브라우저의 ‘찾기’ 혹은 Ctrl+F 단축키를 사용하면 편함).

 

이 태그는 게시물의 본문을 표시해주는 태그입니다. 이 태그 바로 아래에, 아까 복사해 둔 믹스 업 위젯 코드를 붙여 넣은 뒤 ‘템플릿 저장’ 버튼을 누릅니다. 별 문제가 없다면 변경사항이 저장되고, ‘블로그 보기’ 링크를 누르면, 새롭게 바뀐 모습을 볼 수 있습니다. 제대로 설치되었다면 글 본문 아래에 믹스 업 위젯이 나타날 것입니다.

만약 ‘이 글은 믹시에 등록되어 있지 않습니다’ 라는 메시지가 나온다면, 아직 RSS피드와 글 주소가 믹시에 수집되지 않은 것입니다. 믹시의 ‘블로그 관리’ 페이지로 가서 수동 수집을 실행하거나, 자동 수집이 완료될 때까지 좀 더 기다리면 믹스 업 위젯이 제대로 나타납니다.

 

만약 믹스 업 위젯을 인덱스나 아카이브에서는 보이지 않고, 게시물 페이지에서만 보이도록 하려면 아래 태그를 삽입하면 됩니다.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<믹스 업 스크립트 소스>
</b:if>

이렇게 해두면, 아이템 페이지 즉 ‘게시물 페이지’ 에서만 믹스 업 위젯이 나타나게 됩니다. 인덱스나 아카이브 페이지에서는 나오지 않고요.

 

4. Blogger 클래식 템플릿을 사용한다면

기본적인 방법은 위와 동일합니다. 다만 몇몇 태그를 다르게 적용해야 하는데, 이는 클래식 템플릿과 신형 레이아웃 형식에서 쓰이는 템플릿 태그가 각각 다르기 때문입니다. 레이아웃에서는 <data:post.body/> 태그를 찾았지만, 클래식 템플릿에서는 <$BlogItemBody$> 태그를 찾아서 써야 합니다. 그리고 믹스 업 위젯 페이지에서도, Blogger(클래식) 을 선택해서 설치 코드를 새로 생성해야 합니다.

 

Blogger에서 제공하는 기본 템플릿(스킨)이라면 위의 방법으로 쉽게 믹스 업 위젯을 달 수 있습니다. 다른 곳에서 만든 템플릿 또는 직접 만든 템플릿을 쓴다면 방법이 약간 다를 수도 있습니다만, 어차피 템플릿 태그는 같으니 큰 문제는 없을 겁니다.

(전에 ‘구글 Blogger 구형 템플릿에 믹시 mixUP 위젯 달기’ 라는 글을 썼었는데, 이때 쓰인 코드는 믹시에서 업데이트하기 전 코드입니다. 지금은 수정되었으므로 믹시에서 바로 코드를 복사해 써도 문제 없습니다.)

얼마 전 블로그의 템플릿을 변경 중이라는 글을 올렸습니다. 구형에서 신형으로, 아예 템플릿 구조를 바꿔버리는 대공사(?)였죠. 신나게 코드 수정하고 CSS 스타일 건드리고 위젯 고르고 하다 보니 어느새 약 3주가 지나버렸네요. 오늘 정리한 RSS 피드 부분을 끝으로, 블로그의 큼지막한 부분들에 대한 리뉴얼은 얼추 마무리 되었습니다. 때문에, 각 부분 별로 새롭게 바뀐 곳들을 정리해 두고자 합니다.

 

 

1. Blogger 템플릿 –> Blogger 레이아웃

아마 가장 큰 변화이자, 이번 리뉴얼의 중심이 아닐까 싶습니다. 초기 Blogger의 구형 템플릿 구조에서, Blogger가 구글에 인수된 후에 나온 레이아웃 구조로 템플릿을 변경했습니다. 소스 코드가 기존 방식과 달라 처음에 애를 좀 먹었지만, 하다 보니 금방 적응되더군요. 물론 예기치 못한 문제(애드센스 코드를 HTML 소스에 직접 삽입하면 작동하지 않음)가 있긴 했지만 어찌어찌 다른 방법으로 해결했습니다. 소스 코드를 수정하면서 Blogger 도움말을 많이 참조하긴 했지만 한글화를 이상하게 해놔서 정작 중요할 땐 도움이 되질 못했어요. 소스 코드에 들어갈 텍스트까지 죄다 한글로 바꿔놓은 바람에 결국 다른 곳을 찾아봐야 했죠(나중에 ‘언어 변경’ 부분을 바꾸면 된다는 걸 알았지만). 그래도 확실히 위젯 같은 것들을 추가하기가 훨씬 편리해졌네요. 어떤 위젯들은 신형 레이아웃 구조에서만 동작하기도 했지요.

2. 이전 글 목록

구형 템플릿의 이전 글 목록은 매우 부실했습니다. 월별로 보는 건 괜찮았지만 연도별로 보는 것은 불가능했고, 무엇보다 ‘현재 보고 있는 글’ 보다 나중에 쓰여진 글은 목록에 아예 나타나질 않았습니다. ‘현재 보고 있는 글’ 보다 이전에 쓰여진 글들만 목록에 나타났죠. 그것도 약 10개 정도만. 새로 등록된 글을 보려면 아예 메인 페이지로 가야 했습니다. 지금은 연도별, 월별로 볼 수 있고, 각 글의 제목도 볼 수 있어 훨씬 편리합니다. 다만 기본 목록 스타일이 보기 안 좋아서, CSS로 보기 좋게 수정했습니다. 영어에서는 목록에 내어 쓰기를 하나 보죠?

3. 포스트 내용

Blogger의 기본 레이아웃과 다르게 포스트 제목, 날짜, 코멘트 수 등을 배치하느라 애 좀 먹었습니다. 그냥 기본형으로 쓰는 게 훨씬 편하긴 하지만(간단한 코드로 각 데이터들을 모두 호출) 별로 성에 차질 않았어요. 그래서 또 Blogger 도움말과 해외 사이트들 뒤지느라 시간을 많이 썼습니다. 지금은 리뉴얼하기 전과 비슷하게 모양을 잡을 수 있어서 만족합니다. 포스트 내용에 대해선 최대한 이전과 비슷한 모습을 갖도록 설정했답니다. 그런데 중간에 믹스 업 위젯이 제대로 들어가질 않아 고생했습니다. Blogger의 HTML수정 도구가 믹스 업 위젯의 코드를 받아주지 않더군요. 믹시의 노력에 의해 지금은 아주 잘 들어갑니다. 하지만 다음 뷰 추천 링크는 일일이 수작업으로 달고 있답니다…;

4. 댓글

이전 모습에 비해 댓글 부분의 모습이 약간 바뀌었습니다. 기본형 디자인에 CSS만 수정했지만, 꽤 많은 고민을 해야 했습니다. 바로 댓글 쓰기 양식(form) 때문이었죠. 원래 Blogger의 댓글은 별도의 댓글 페이지에서 남기도록 되어 있었는데, 요새는 워드프레스나 태터툴즈처럼 게시물 아래에서 바로 댓글을 남길 수 있도록 추가 옵션을 제공하고 있습니다. 그런데 이 기능이 IE6에서 자꾸 문제를 일으키는 겁니다. 파이어폭스나 크롬, 사파리, 오페라 등에선 아무 문제 없이 작동하다가 유독 IE6에서는 ‘페이지를 열 수 없음’ 메시지를 띄우며 정지됩니다. 처음엔 원인을 몰라 계속 헛물만 켜다 댓글 기능 때문이라는 걸 알았죠. 그래서 결국 이 기능을 빼버리고, 예전처럼 별도의 댓글 페이지를 사용하는 쪽으로 설정했습니다. 아마 나중에 이 기능이 개선되거나, IE6에 대한 브라우저 점유율이 0%대가 된다면 다시 이 기능을 사용할 수 있겠지요.

5. 태그(라벨)

이전 블로그에서는 태그를 별로 활용하지 못했습니다. 글마다 몇 개씩 달아두긴 했지만, 메타블로그에 전송할 때 빼고는 별로 쓰이질 않았죠. 지금은 블로그 맨 아래에 태그 클라우드를 추가시켰습니다. 제가 쓴 글의 태그들을 사용 빈도수에 따라 각각 다른 크기로 보여주고 있지요. 원래는 사이드 바에 달려고 했지만 태그 갯수가 너무 많아, 맨 아래로 끌어 내렸습니다. 태그 사용 빈도도 1개 이상은 갯수가 너무 많아 2개 이상만 표시하도록 해두었죠. 이 태그 클라우드는 지저깨비님의 블로그와, phydeaux3 블로그의 글에서 많은 도움을 받았습니다. 감사합니다.

6. 위젯, 배너, 아이콘

예전엔 잡다한 위젯들이 사이드 바에 쌓여 정리가 되질 않았었는데, 과감하게 정리했습니다. 지금은 파란 방문자 위치, 위자드웍스 W, 다음 위젯뱅크 D-데이 위젯 등이 추가되어 있죠. 그 아래엔 80x15 픽셀 사이즈의 테크노라티, 믹시, 올블로그, 다음 뷰 배너가 위치하고 있습니다. 파이어폭스, 크롬, 사파리, 오페라, 플리커 아이콘은 그냥 넣어 봤고요(추천 제품이랄까…?). 물론 위젯이나 배너, 아이콘들은 언제라도 추가되고 삭제될 수 있답니다.

7. 관심 있는 사용자

원래는 구글 프렌드 커넥트 바를 추가하려고 했습니다만 이것 역시 IE6에서 문제가 좀 있더군요. 다른 건 잘 작동하는데, 정작 화면 하단에 고정되어 있어야 할 바가 페이지 위쪽으로 왔다 갔다 하는 것이었습니다. 게다가 스크롤 바의 크기도 이상해져 버리고요. 매우 유용한 기능임에 틀림 없지만, 호환성이 떨어져(물론 IE6의 호환성이 떨어지는 것) 결국 빼버리고 ‘관심 있는 사용자’ 위젯을 추가했습니다. 그런데 이 위젯도 IE6에서는 제대로 보이질 않는군요… –_-; IE6에 대한 테스트를 전혀 안 하나 봅니다.

8. 애드센스

제 블로그에 삽입된 광고는 모두 애드센스 광고로, 728x90짜리 슈퍼배너 하나, 300x250 사각형 배너 하나가 표시되고 있습니다. 이 중 슈퍼배너는 항상 표시되고, 사각형 배너는 게시물 페이지에서만 표시되도록 해두었죠. 이전 Blogger에서는 인덱스 페이지와 아카이브 페이지, 그리고 게시물 페이지에 각각 다른 내용을 표시할 수 있어 사각형 배너를 삽입하는 데 별 문제가 없었습니다. 물론 새 Blogger 레이아웃에서도 마찬가지였죠. 코드는 좀 다르지만 인덱스와 아카이브, 게시물 페이지에서 보이는 내용을 각각 설정할 수 있습니다. 그런데 전혀 엉뚱한 곳에서 문제가 터진 겁니다. 애드센스 관리 페이지에서 생성한 코드를, Blogger의 HTML 수정 도구가 받아주질 않는 거였어요. 뭐가 문제인지 계속 빨간색 오류 메시지만 뱉어냈었죠. 결국 Blogger 관리 페이지 내에서 애드센스를 추가하고, 직접 코드를 이동시켜서 겨우겨우 끼워 넣었습니다. 덕분에 애드센스의 채널 기능을 쓰지 못하게 되었습니다.

9. 트위터

그 동안 다른 분들이 하는 걸 지켜만 봐 오다, 저도 이번에 트위터를 시작하게 되었습니다. 자주 메시지를 남기는 건 아니지만 다른 분들의 메시지만 봐도 재미있고 유용한 내용이 넘치네요. 내친김에 블로그에서도 트위터 메시지를 볼 수 있게 위젯을 추가했습니다. 물론 기본형 디자인이 마음에 들지 않아 CSS를 수정해야 했지요. 블로그 포스트보다 위쪽에 놓아둘까 하다, 결국 맨 아래로 내렸습니다. 사이드 바는 좁아서 안되고 말이죠.

10. RSS 피드

그 동안 ATOM과 RSS로 나뉘어졌던 피드를, 피드버너 RSS로 모두 통합시켰습니다. 어느 쪽 주소를 쓰더라도 피드버너 주소로 넘어가게끔 설정했지요. 덕분에 피드버너 구독자 카운터의 숫자가 조금 늘었습니다. 피드버너에서 제공하는 ‘이메일로 구독’ 기능을 써볼까도 했지만, 스팸메일도 귀찮은 마당에 누가 제 블로그 글들을 이메일로 받아볼까 싶어 관뒀습니다.

 

이렇게 해서 약 3주 간에 걸친 리뉴얼 작업을 마무리 지었습니다. 화려한 스킨으로 치장한 다른 블로그들에 비해 초라하기 짝이 없지만, 직접 디자인하고 코딩해서 뚝딱뚝딱 만들었기 때문에 애착이 갑니다. 약간의 차이는 있지만 웬만한 브라우저에서 큰 문제없이 잘 보이고요. 아마 이 모습 그대로, 또 한 3년~4년 정도 가지 않을까 싶습니다.

 

덧) RSS피드를 피드버너로 죄다 통합했더니, 올블로그와 믹시에서 난리도 아니네요. 올블로그에서는 이중 수집이, 믹시에서는 아예 믹스업 위젯과 연동이 안됩니다. 급하게 다시 기본 피드로 수정 ㅠㅠ

덧2) 애드센스 코드의 경우, 광고 관리 페이지에서 생성한 코드를 넣는다면 잘 들어갑니다. 하지만 주석처리된 부분의 주석 태크를 빼주어야 정상 작동 합니다. blogger 레이아웃 템플릿에서는 모든 주석 부분을 빼고 실제 페이지를 생성합니다.

햇수로 벌써 4년이나 된 블로그 템플릿을 Blogger의 ‘템플릿’ 방식에서 ‘레이아웃‘ 방식으로 변경 중입니다. 그 동안 새 방식이 까다롭다고, 복잡하다고, 코드보기 귀찮다고, 시간 없다고 차일피일 미루었는데 어느 순간 갑자기 필(!)을 받아서 해치워 버렸습니다. 기본 디자인이 전과 크게 다르지 않아 실망하시는 분도 계실 것 같네요(그 정도로 인기 있는 블로그도 아니지만).

이전 글 보기가 한결 수월해졌고, 태그 클라우드도 달았습니다(phydeaux3, Zizukabi 참고). 블로거 ‘템플릿’을 ‘레이아웃’으로 바꾸는데 있어 지저깨비님 블로그에 도움이 될 만한 글들이 많더군요. Blogger를 쓰고 있다면, 꼭 한번 가보시길 추천합니다.

아마 며칠 동안은 계속 최적화를 해야 할 것 같습니다. 여기저기 손봐야 할 곳이 많네요. 믹시의 믹스 업 위젯도 제대로 작동 안하고 말이죠. 믹시의 믹스 업 위젯은 금방 수정되었습니다(mixsh inside 참고). 구형 템플릿용 코드와 신형 레이아웃용 코드 둘 다 정상작동 합니다.

그나저나 이전 글 목록을 보니 게시물 수가 참 적네요. 일년에 100개도 쓰지 못했다니…!

덧) 이전 글 목록과 덧글 목록의 CSS 스타일을 수정했습니다. 역시 CSS는 편해요. (6/12)

덧2) Google Friend Connect 라는 걸 설치했는데... 아직 잘 모르겠네요. 근데, 이건 대체 언제 나온거죠? (6/13)

구글의 블로그 서비스인 Blogger 에는 두 가지 템플릿 모드가 있는데, ‘레이아웃’과 ‘클래식 템플릿’이 바로 그것입니다. 레이아웃은 2006년 이후 Blogger가 구글에 인수된 뒤 개발된 새로운 페이지 구성 방식이고, 템플릿은 이전부터 써오던 HTML 기반의 구형 페이지 구성 방식입니다. 요새는 대부분 쉽고 간편한 레이아웃 방식을 많이 쓰지만, 저는 아직까지도 구형 템플릿 방식을 고수하고 있습니다(절대 게을러서 그런 게 맞습니다 ㅠㅠ).

아무튼 구형 Blogger 템플릿을 쓰는 저는, 예전에 Mixsh의 mixUP 위젯을 블로그에 달려고 했다 포기했던 적이 있었습니다. 처음엔 Blogger 서비스를 지원하지 않아서였고, 나중엔 신형 레이아웃 방식의 Blogger만 지원해서 포기했던 것이죠. 물론 지금도 구형 템플릿 방식의 Blogger는 공식적으로 지원하지 않습니다.

그런데 mixUP 위젯의 설치코드를 들여다보다, 문득 어떤 코드들이 눈에 띄어 그 부분을 수정해줬더니 정상적으로 설치가 되었습니다. 이번 글에선 그 방법을 소개하겠습니다.

 

▲ mixUP 위젯 설치를 위한 코드 생성

mixUP 위젯 페이지에서 설치할 블로그를 선택하고, 조회수 표시 옵션을 선택한 뒤, 자신이 사용중인 블로그를 선택합니다. 저는 Blogger를 사용하고 있기 때문에, Blogger를 선택했습니다. ‘확인’ 버튼을 누르면 코드가 생성됩니다. 어떻게 생긴 코드인지 볼까요?

 

▲Blogger(신형 레이아웃)용 mixUP 코드

자바스크립트 코드가 보입니다. post.url 이라고 적힌 문자열과 post.timestamp 등의 문자열이 보입니다. 게시물의 URL주소와 게시 시각을 추출하도록 되어있나 봅니다. blogger에 부여된 플랫폼 구분 숫자는 6이군요.

그런데 이 코드들은 Blogger의 구형 템플릿에서 사용되는 코드들이 아닙니다. 구형 템플릿의 코드들은 <$템플릿용 태그$> 와 같은 형식을 가집니다. 위 스크린샷에 보이는 코드들은 신형 레이아웃에 쓰이는 코드들이네요. 때문에 구형 템플릿을 사용하는 제 블로그에는 이 코드를 적용할 수 없습니다.

 

▲워드프레스용 mixUP 코드

참고 삼아, 워드프레스용 mixUP 코드를 살펴볼까요? 외부 사이트의 위젯이나 가젯 등을 설치할 때, 워드프레스용으로 제작된 코드가 있다면 Blogger 구형 템플릿용으로 수정해서 쓸 수 있습니다. 템플릿 태그 방식이 비슷하거든요. 아까 본 코드보다 이쪽이 더 깔끔하네요. URL과 게시 시각 부분을 추출하기 위한 태그가 보입니다. 워드프레스에 부여된 플랫폼 구분 숫자는 5네요.

그럼 이제, 이 코드를 가지고 Blogger 구형 템플릿에서도 동작할 수 있도록 수정해 볼까요? 노랗게 표시된 부분만 수정해주면 됩니다.

 

▲Blogger(구형 템플릿)용으로 수정된 mixUP 코드

Blogger 구형 템플릿에서 ‘게시물의 URL주소’ 를 표시해주는 태그는 <$BlogItemPermalinkUrl$> 입니다. ‘게시물의 게시 시각’ 을 표시해주는 태그는 <$BlogItemDateTime$> 입니다. Blogger 템플릿용 태그는 대/소문자를 구분하기 때문에, 조심해서 써줘야 합니다. 노랗게 표시된 부분을 바꿔주고, 플랫폼 숫자를 다시 6으로 바꿔줍니다. Blogger 구형 템플릿용 태그는 Blogger 도움말 사이트에서 찾아볼 수 있습니다.

완성된 코드를 Blogger 대시보드의 ‘템플릿 - HTML편집’ 에서 추가합니다. 본문 바로 아래에 넣으면 되겠군요. <ItemPage> </ItemPage> 태그를 쓰면, 게시물 페이지에서만 표시되게 할 수 있습니다. <ItemPage>태그와 </ItemPage>태그 사이에 믹시 코드를 넣으면 되겠죠?

 

 

▲ 블로그 게시물 본문 하단에 나타난 mixUP 위젯 

드디어 mixUP 위젯이 정상적으로 설치되었습니다. 많이 많이 눌러주세요~

 

구글에서 제공하는 블로그 서비스인 Blogger.com의 대시보드 메뉴가 며칠 전 업데이트 되었습니다. 대시보드가 무엇이냐면, '관리자 페이지' 라고 보면 됩니다. 구글 블로거닷컴에서는 하나의 계정으로 여러 개의 블로그를 개설할 수 있는데, 이 블로그들을 한 곳에서 관리하는 페이지가 바로 대시보드인 것입니다.

이번 업데이트에서는 대시보드 페이지 내의 구성요소엔 큰 변화가 없었으며, 전체적인 레이아웃이 바뀌었습니다. 평상시 자주 쓰지 않는 메뉴들이 하단에 위치해 보다 깔끔해진 모습입니다.

▲ Blogger.com 대시보드의 옛 모습. 블로거닷컴의 베타테스트(구글에 인수된 후의) 때 찍은 스크린샷입니다. 거의 이 모양대로 얼마 전까지 운영되었습니다.

▲ 새롭게 바뀐 대시보드의 모습. 블로그 관리부분이 맨 위에 위치하며, 나머지 메뉴들은 아래로 이동되었습니다. 전보다 깔끔해진 느낌이네요. 여전히 클래식 템플릿을 쓰는 블로그에는 '템플릿'으로, 신형 템플릿을 쓰는 블로그에는 '레이아웃'으로 표시되고 있습니다.

구글 블로거(Blogger.com)와 관련된 좋은 소식입니다.

블로거의 코멘트 페이지에서 OpenID를 지원하기 시작했습니다. 어제만 하더라도 구글 계정을 이용하는 기존 방식을 쓰고 있었는데, 오늘 보니 코멘트 페이지에 변화가 생겼네요.

보시다시피 코멘트를 작성할 때 선택할 수 있는 로그인 방법이 많아졌습니다. 기존에는 코멘트를 남길 때 구글/블로거 계정 또는 별도의 닉네임, 익명 세 가지를 이용할 수 있었습니다.

새로 바뀐 코멘트 페이지에서는 다섯 개의 추가된 로그인 계정을 이용할 수 있습니다.

• AOL / AIM
• 라이브 저널
• TypeKey
• WordPress
• 모든 OpenID

아쉽게도 대부분 외국 서비스이지만, OpenID는 국내 사용자 분들도 유용하게 쓰실 수 있을 것 같네요.

이로써 블로거에 코멘트를 남기려고 할 때, 사용자들은 여섯 개(구글 계정+추가된 다섯 개 계정)의 로그인 방법 또는 닉네임, 익명 중에서 선택할 수 있게 되었습니다.

아울러 새롭게 바뀐 코멘트 페이지에 따라, 사용자들이 남긴 코멘트를 표시하는 방법에도 변화가 생겼습니다. 기존에는 그냥 닉네임과 링크만 표시되었는데, 이제는 닉네임 앞에 'Blogger' 또는 'Anonymous' 등의 표시가 나타납니다. 아마 OpenID나 다른 계정을 이용해 코멘트를 남기면, 그에 따른 표시도 나타날 것 같습니다.

태터툴즈나 다른 블로그 서비스에 비해 Blogger의 코멘트 방식이 어렵다고 많은 분들이 불평하시는데, 이번 변경으로 코멘트 수가 많이 늘어났으면 좋겠습니다. 제 블로그에서도 코멘트 많이 남겨주세요.

구글에서 운영하고 있는 Blogger.com은 전세계에서 널리 쓰이는 블로그 서비스이지만, 그에 못지 않게 부족한 면도 매우 많습니다. 특히 국내에서 많이 쓰이는 태터툴즈(텍스트큐브)에 비하면 모자란 점들이 눈에 띄죠. 그래도 전 '그러려니' 하며 쓰고 있습니다.

많은 분들이 Blogger 서비스의 단점으로 꼽는 것들 중 하나가 바로 '포스트 파일명을 지정할 수 없다'는 것입니다. 사실입니다. Blogger에서는 아직 포스트의 파일명을 직접 지정할 수 있는 옵션을 제공하지 않고 있습니다. 단, 포스트 제목이 영어인 경우, 포스트 제목을 파일명으로 씁니다. 예를 들어 볼까요?

Ubuntu 7.04 CD 도착 (http://hfkais.blogspot.com/2007/10/ubuntu-704-cd.html)

10월달에 쓴 이 글의 파일명은 ubuntu-704-cd.html 입니다. 제목에 있는 영어와 숫자가 모두 들어갔네요. 대신 문제가 생길 수 있는 특수문자나 띄어쓰기는 문제가 생기지 않도록 수정되었습니다. 한글은 지원되지 않는군요. 영어를 제외한 다른 언어의 문자는 자동으로 삭제되나 봅니다.

자, 그럼 다시 제목의 질문으로 돌아와서, 어떻게 해야 Blogger에서 포스트 파일명을 지정할 수 있을까요? 혹시 뭔가 거창한 걸 기대하셨나요? 답은 이미 나왔죠. 그것도 바로 위에서요.

제목 입력란에 파일명으로 쓰고 싶은 문자를 입력하면 됩니다.

단, 한글은 지원이 안되니까 영문으로 해야겠죠. 특수문자 같은 것도 당연히 넣지 않는게 좋고요. 그런데 한가지 의문이 들지 않나요? 제목 입력란에 파일명을 입력해 버리면, 대체 제목은 어디에 써야 할까요?

제목이니까 제목 입력란에 쓰면 됩니다.

실은 이 팁은 약간의 꼼수를 이용한 것입니다. Blogger에서는 한번 포스트를 발행하고 나면, 그 글의 고유주소가 바뀌지 않습니다. 발행 날짜를 변경해도, 제목을 변경해도 고유주소는 그대로입니다. 아마 포스트가 다른 곳에 링크되었을 때, 링크가 깨지는 것을 방지하기 위한 것으로 보입니다.

따라서 위 방법은 살짝 잊어주시고, 다음 방법을 그대로 따라하시면 됩니다.

1. 새 게시물 작성 페이지에서, 제목 입력란에 쓰고 싶은 파일명을 영어로 입력합니다.
2. 내용을 작성하고, '게시물 게시' 버튼을 누릅니다.
3. 게시가 되자마자 다시 '게시물 수정' 메뉴로 돌아와, 방금 올린 게시물의 '편집' 버튼을 누릅니다.
4. 제목 입력란에 원래 쓰고자 했던 제목(한글 가능)을 입력하고, '게시물 게시' 버튼을 누릅니다.

즉 게시를 두 번 하는 것입니다. 여기서 첫번째 게시는 포스트 파일 생성을 위한 것이고, 두번째 게시는 제대로 된 제목을 입력하기 위한 게시입니다.

실은 매우 귀찮은 방법입니다. API를 이용한 외부 입력기를 사용할 경우엔 좀 복잡해지기도 하고요. 저도 귀찮아서 이 꼼수를 쓰지 않습니다. 파일명이야 뭐, 아무렇게나 해 놓아도 메타블로그에서 잘 인식하고, 검색엔진에서도 잘 긁어가니까요. 단지 '이런 식으로 쓸 수도 있다'는 것을 알려드리고 싶었습니다. 혹시 또 모르지요. 누군가에게는 매우 유용할지도요. :)

아시다시피, 일주일 전에 국내에서 blogspot.com 블로그로의 접속이 차단된 적이 있었습니다. KT 회선의 경우 11월 2일에 직접 전화로 문제를 해결했고요 (이전 글 참고). 윤리위원회 감시관과의 통화 후 알아서 잘 풀어줬겠거니 싶었는데, 그게 아니었나 봅니다.

LG파워콤에서도 blogspot.com 이 접속 차단되었군요 - mwultong Blog ― 디카 / IT

11월 4일에 올라온 mwultong님의 글에 따르면, LG파워콤 쪽에서 blogspot.com 접속이 안되고 있다고 하시네요. KT에서 차단이 풀린게 2일인데, 4일에 또 다시 차단 관련 글이 올라와서 좀 의아했습니다. 그래서 LG쪽 회선을 쓰는 친구에게 물어봤더니, 접속이 안된다고 하네요.

서둘러 구글 애널리틱스에 접속해, 접속 통계를 살펴봤습니다. KT쪽은 11월 1일 방문자수 0을 기점으로 다시 회복세에 놓여있는데, LG쪽은 11월 1일 또는 2일부터 방문자수가 0이 되더니 계속 0이더군요. 그래서 다시 정보통신부 윤리위원회 감시관에게 전화를 걸었습니다.

'KT쪽의 차단은 풀린걸 확인했다. 잘 접속된다. 그런데 왜 LG파워콤 쪽과 기타 ISP들은 계속 차단이 걸려있는 것이냐. 그쪽은 차단이 풀리지 않은 것 같다' 라고 물었더니, 다음과 같이 답하더군요.

'그때 (민원인이) KT 얘기만 해서, KT에만 연락했다. 다른 곳은 연락하지 않았다. 문제가 된다면 다른 곳에도 연락해 주겠다'

...허허... '설마' 했는데 '역시나' 였던 것입니다. 연락했을 때 KT얘기만 했다고, 그쪽만 풀도록 연락했다네요. 분명 'ISP 쪽에서 접속을 차단했다' 고 얘기했었는데...

여하튼 이제 해결되었습니다. mwultong님도 윤리위원회에 메일을 보내신 모양이더군요. 그래서 지금은 대부분의 ISP에서 blogspot.com 으로의 접속이 원활하게 이루어지고 있습니다.

위 스크린샷은 구글 애널리틱스에서 확인한 접속 통계입니다. LG쪽에서 운영하는 회선의 이름이 4개 정도 잡히더군요. powercomm, powercom, LG powercomm, dacom 등... 다소 정리가 안된 느낌입니다. 스크린샷을 보시면 아시겠지만 대체로 11월 1일을 기점으로 방문자수가 0을 기록하였고(차단), 약 이틀 간 차단이 계속되었으며, 그 이후에 차단이 풀려 접속이 이루어졌음을 알 수 있습니다.

이번 일을 통해, 정부기관에서 인터넷을 관리하는데 있어 좀더 신중을 기해줬으면 하는 바람이 크게 듭니다. 신경 좀 써주셨으면 좋겠습니다.

# Blogspot.com 으로 접속이 되지 않는다

오늘(11월 2일) 하루, 제 블로그에 접속할 수 없었습니다. 아침부터 전혀 접속이 되질 않더군요. 처음엔 Blogger 서버에 문제가 있는 줄 알았습니다. Blogger를 쓰는 다른 분들의 블로그 주소도 어렵게 기억해내어 접속을 시도해 봤지만, 되지 않았습니다. mwultong님의 블로그에도 접속을 시도했지만, 아예 blogspot.com 도메인을 쓰는 블로그들이 모두 죽은 것 같았습니다.

그러다 문득, Blogger.com에 접속해 봤습니다. 멀쩡합니다. 글을 올릴 수도 있고, 수정할 수도 있었습니다. 구글의 다른 서비스들도 모두 정상적으로 운영되고 있었습니다. 혹시나 해서 Blogger Play에 접속해 봤습니다. 만약 Blogger 서버 전체에 이상이 있는 거라면 이 사이트도 멈췄을 거라고 생각했기 때문입니다. 그런데 잘 됩니다. 그런데 그림을 클릭해서 다른 블로그에 접속해보려 해도, 접속은 되지 않았습니다.

사태가 이상하다고 생각했습니다. 이전의 Alexa.com 차단 때 처럼, 뭔가 이상하다고 생각되었죠. 그래서 KT쪽에 문의를 해봤습니다. 혹시 blogspot.com 주소를 모두 막아놨냐고. 답장은 금방 왔습니다.  www.blogspot.com 은 접속이 잘된다고 합니다. 자기네들은 막지 않았다고 하네요. 그런데  블로그 주소 없이 그냥 blogspot.com 으로 접속하면, www.blogger.com 으로 자동 연결 됩니다. 그래서 그 내용을 담아 또 문의를 보냈습니다.

# 망 관리 담당자로부터의 전화

이번엔 답장이 오지 않았습니다. 대신 직접 제 휴대폰으로 전화가 왔습니다. KT의 망 관리센터 담당자라고 하시더군요. 고객센터의 E-mail 문의로는 듣기 힘든, 속사정을 이야기해 주셨습니다.

정보통신부 윤리위원회에서 지침이 내려왔답니다. 윤리적으로 문제가 있는 사이트, 그러니까 음란, 퇴폐, 불건전, 적대세력 찬양 등의 웹사이트들을 차단하라고요. 그런데 그 목록 중에, blogspot.com 도메인을 쓰는 외국 블로그가 하나 포함되었던 것입니다. 음란사이트라고 하더군요. 그래서 그 사이트를 막게 되었는데, 이걸 도메인으로 막은게 아니라(도메인으로 막을 경우 우회접속하기도 쉽고, 도메인만 바꾸면 되니까요) IP로 막았답니다. 그런데 하필 같은 IP의 서버에 제 블로그, mwultong님의 블로그까지 다 들어있던 모양입니다. 그래서 죄다 막혔다고 하더군요.

그래서 제가 '하나로나 다른 회선 이용자들은 접속이 된다. 왜 KT만 안되는 것이냐' 라고 물었더니, '다른 곳들은 아직 차단작업을 하지 않은 것으로 안다. KT는 작업을 먼저 끝냈기 때문에 차단된 것이다. 다른 ISP쪽도 금방 막힐 것이다.' 라고 답해주셨습니다. 그러면서 윤리위원회 쪽으로 연락해 보라고 하시더군요.

# 윤리위원회 감시관과의 통화

정보통신부 윤리위원회로 전화를 걸었습니다. 마침 감시관께서 회의중이라 하네요. 잠시 후에 통화를 할 수 있었습니다. 꽤 친절한 분이어서 편하게 통화를 할 수 있었습니다.

윤리위원회에서는 문제가 있는 사이트들을 찾아내, ISP(인터넷 회선 공급업체)쪽으로 지침을 내려보낸다고 합니다. 앞서 얘기했던 음란사이트, 불건전 사이트 등을 효과적으로 막기 위해서지요. ISP에서는 이 목록을 회선 장비에 입력, 접속을 원천적으로 차단합니다. 그러나 도메인(인터넷 주소) 만으로 접속을 막기는 매우 어렵기 때문에, 아예 서버 IP 자체를 막아버린다고 하네요.

앞서 얘기했듯이, blogspot.com의 서버를 쓰는 블로그들 중 음란사이트가 껴있었고, 그 사이트를 막는 과정에서 blogspot.com 블로그들이 모두 막혀버린 것이지요.

그래서 감시관에게 말했습니다. blogspot.com에는 전세계 수백만의 블로그가 운영되고 있으며, 국내에도 꽤 많은 사람들이 이 서비스를 이용하고 있다고요. 그랬더니 조치를 취해주겠다고 하네요. 우선은 제 블로그 주소를 불러달라기에, 그대로 불러줬습니다. 그리고 혹시나 해서 mwultong님 블로그 주소도 불러줬습니다.

# 차단 해제

감시관과의 전화통화를 끝내고, 금방 다시 KT로부터 전화가 왔습니다. 윤리위원회 쪽에서 연락을 받았으며, 차단을 풀어주겠다고요. 10분 정도면 작업이 완료된다고 하셨는데, 그보다 조금 더 걸리더군요. 여하튼, 이렇게 해서 다시 블로그에 접속할 수 있게 되었습니다. mwultong님 블로그에도 제대로 접속할 수 있었고, 다른 blogspot.com 블로그들의 주소를 입력해보니 다 접속이 잘 되네요. 아마 IP로 막았던 것을 풀어버리고, 그 음란 블로그 하나만 막은 모양입니다. 여하튼 이렇게 해서 문제는 해결 되었네요.

관련글 : KT(한국통신)가 구글 블로거(blogger.com + blogspot.com) 접속 차단? - mwultong Blog

제 블로그는 Blogger.com의 서비스를 이용해 운영되고 있습니다. 많은 장점과 단점을 모두 갖고 있는 블로그 서비스지요. 국내에서 많이 쓰이고 있는 태터툴즈나 해외에서 많이 쓰이는 워드프레스에 비하면 많은 것이 모자란게 사실입니다. 그래서 Blogger를 이용하는 많은 블로거들은 다양한 툴을 이용하거나, 서드파티 서비스(Haloscan이나 Flickr 등)를 이용하곤 합니다.

새롭게 바뀐 Blogger Beta에서는 기본적으로 검색창을 지원합니다. 간단하게, 레이아웃 편집에서 클릭만 하면 쉽게 추가되죠. 하지만 저처럼 Blogger 클래식을 이용하는 경우, 기본적으로 검색창은 최상단 navbar의 블로그 검색창밖에 없습니다. 물론 이것도 쓸만하긴 하지만, 속도가 느리고 또 검색 키워드가 담긴 포스팅 내용 전체가 줄줄이 나와버려서 쓸데없는 트래픽을 만들어내곤 하죠.

그래서 그 이전까지는, 별도로 검색창을 붙여서 썼었습니다. 구글은 어느 사이트에나 자사의 검색창을 달 수 있게 지원해주고 있죠. '구글 검색창 달기' 란 웹페이지에서 확인할 수 있습니다. 간단히 코드만 복사해서 넣으면 쉽게 구글 검색창을 추가할 수 있고, 자신의 웹 사이트를 검색하게 할 수도 있죠. 저도 전에는 이걸 썼었습니다. 저 뿐만이 아니라, 많은 사이트들과 블로그들이 이 검색창을 썼던 것으로 기억합니다.

단점이라면, 검색결과가 새 창에서 뜬다는 것입니다. 웹사이트 운영자는 검색결과에 자신의 사이트 로고를 넣을 수 있지만, 그것 뿐이었죠. 모양도 그리 예쁜 편은 아니었습니다. 그냥, '검색창'만 자기 사이트에 달아놓고, 구글에서 검색하는 것과 마찬가지인 셈이었습니다. 별로 만족스럽지 못했죠.

그런데 구글은 최근 또 하나의 검색창 서비스를 선보였습니다. 바로 Google Custom Search Engine이 그것입니다. 이것은 검색창에 대해 다양한 설정이 가능합니다. 각기 다른 설정을 가진 나만의 검색엔진들을 만들어 관리할 수도 있죠. 자신이 운영중인 사이트가 여러 개라면, 여러 개의 검색엔진 설정을 만들 수도 있습니다. 그리고 무엇보다 가장 맘에 드는 건, 자기 사이트의 웹페이지 안에 검색결과를 포함시킬 수 있다는 점입니다. 여기서 자세한 설치 과정을 설명하면 좋겠지만, 이미 설치 과정에 대해 훌륭하게 소개해놓은 글이 있습니다. 구글 CSE의 설치에 대해선 Hoogle님의 글을 참조해 주세요.

링크된 글을 읽어보시면 아시겠지만, 구글 CSE의 코드는 두 가지로 이루어집니다. 하나는 검색창을 달기 위한 코드이며, 또 하나는 검색결과를 보여주기 위한 코드입니다. 검색창을 달기 위한 코드는 아무 곳에나 넣어도 잘 작동합니다. 하지만 검색결과를 보여주기 위한 코드는 약간 손이 더 갑니다. 스크립트도 지원되어야 하고요.

후글님은 검색창을 달기 위해 평소 잘 쓰지 않는 '지역정보' 페이지를 바꿔버렸습니다. 바로 워드프레스와는 달리 태터툴즈에서는 정적 페이지를 추가할 수 없기 때문인데요, 이 페이지는 검색결과를 나타낼 때 필요합니다. 자신의 사이트 내에서 검색결과가 보이도록 하기 위해서지요.

그럼 Blogger에서는 어떡해야 할까요? Blogger도 마찬가지로 고정적인 페이지를 만드는 기능이 없습니다. 때문에 그냥 아무 내용없는 글(포스팅)을 하나 만들어서, 그 안에 CSE의 코드를 집어넣고 글을 게시하면 됩니다 (혹시나 해서 시도하진 않았는데, 후글님의 조언대로 해보니까 되더군요). 스크린샷을 참조해 주세요.

보시다시피, 새 게시물을 만들되 'HTML편집'에서 넣어야 합니다. '쓰기(위지윅 방식)' 에서 넣으면 아무 소용 없겠죠. 하단의 스타일시트(CSS) 부분은, 필요없는 부분을 감추기 위해 썼습니다. 블로그 검색 결과를 표시하는데 글쓴 날짜나 코멘트, 올블릿 등은 필요가 없겠죠? 그래서 display: none 해버렸습니다. CSS에서는 가장 나중에 선언된 코드가 우선되기 때문에 위와 같은 코드를 이용할 수 있습니다. '덧글 허용 안함', '백 링크 허용 안함' 등을 체크해주고(혹시 모를 스팸 코멘트를 막기 위해), 적절한 날짜와 게시 시간을 선택해 글을 올려줍니다. Blogger에서는 게시 날짜와 시간을 바꿀 수 있기 때문에, 몇 달 전 날짜로 올렸습니다.

결과는 왼쪽 스크린샷과 같습니다. 직접 검색해 보시면 아시겠지만, 검색창은 왼쪽 맨 위에 두었습니다. 검색창에 삽입된 폼(form)에도 CSS를 적용할 수 있기 때문에, 자신의 사이트에 알맞게 너비를 조절할 수 있습니다. 저는 다음과 같은 코드를 썼습니다.

.searchform { width: 150px; }

<input type="text" name="q" class="searchform" />

윗줄은 CSS에 넣어주고, 아랫줄은 검색창 코드에 들어갑니다. 밑줄 그은 부분이 제가 추가한 부분입니다. 물론 테두리 색을 바꾸거나, 폰트 모양을 바꾸는 것도 가능하겠죠?

검색결과는 오른쪽 단에 나타나게 했습니다. 원래는 포스팅 내용이 표시되는 부분이죠. display:none으로 쓸데없는 것들을 감추었기 때문에, 포스팅 날짜나 코멘트 등은 나타나지 않습니다.

한가지 단점이라면, 검색 결과에 광고가 나타난다는 점입니다. 이는 구글에서 집행하는 광고죠. 별도의 설정을 하지 않는 한, 블로그에 게재된 자신의 애드센스와는 무관합니다. CSE의 컨트롤 판넬에서 자신의 애드센스와 연결시키도록 설정하는 메뉴가 있는 것 같긴 한데, 잘 안되네요.

여하튼 이렇게 해서, Blogger에 위치한 블로그에 구글 CSE를 달았습니다. 서비스형이면서도 설치형 못지않은 다양한 시도가 가능하다는 것, 그것이 Blogger의 가장 큰 매력이 아닐까 싶습니다.

늦은 새벽, 푸념 몇 줄 끼적여 보겠습니다.

하루에도 몇번씩 올블로그를 들여다보며, 많은 글들을 접하게 됩니다. 유익한 글들도 많고, 별로 보고싶지 않은 글들도 많죠. 다만 특정 주제가 크게 이슈화될 때, 올블로그 전체가 그 주제로만 도배되는 것은 별로 달갑지 않습니다.

관심있는 주제에 대한 글이나, 글을 쓰신 분이 뭔가 오해하고 있다고 생각되는 글, 나와 비슷한 생각의 글 등에는 주로 리플을 답니다. 아시다시피 Blogger.com에서 제공하는 블로그에는 트랙백 기능이 없기 때문이죠. 물론 외부 플러그인을 통해 쉽게 해결할 수 있는 문제긴 하지만, 개인적으로 달갑지 않은 터라 그냥 리플을 달고 있습니다.

그런데 가끔, 리플을 달다가 어떤 문제에 봉착하게 됩니다. 닉네임을 쓰고 블로그 주소를 적고 하고 싶은 말을 입력한 뒤, '전송' 버튼을 눌렀을 때 나타나는 한 줄의 문구가 바로 그것이죠.

'차단된 사용자 입니다.'

당황스러웠습니다. 분명 처음 와 본 블로그인데 어째서? 란 생각이 들었죠. 처음 이 문구를 접하고 나름대로 내린 결론은 '비슷한 IP주소를 블럭하는 과정에서 내가 걸렸나보구나' 였습니다. IRC 같은 곳에서 불량사용자를 차단(Ban)할 때, 211.211.211.* 와 같은 방식으로 차단을 걸었던게 생각났던거죠. 이런 식으로 IP를 차단하면, IP 주소가 211.211.211.*으로 시작하는 모든 사용자는 차단되게 됩니다. 사용하고 있던 회선도 많은 사람들이 사용하는 회선이었으니 충분히 가능한 이야기라고 생각되었죠. 결국 리플은 달지 못했고, 그렇게 나름대로 결론짓고 그냥 잊어버렸습니다.

그런데 어떤 날은, 각각 다른 세 개의 블로그에서 똑같은 문제로 리플을 달지 못했던 적이 있었습니다. 역시나 차단된 사용자라네요. 한번도 가본 적 없는 처음 와보는 블로그에서 그것도 세 곳에서 동시에 차단을? 결국 찾아낸 답은, IP차단이 문제가 아니었습니다. 혹시나 해서 블로그 주소를 빼고 입력했더니, 아무런 문제 없이 리플이 올라갔던 것입니다.

진짜 문제는 blogspot.com 이란 주소가 문제였습니다.

어떤 이유에선지는 모르겠지만, 위 주소가 차단 리스트에 있었던가 봅니다. 게다가 나중에 생각해보니, 공교롭게도 이 주소를 차단한 블로그들은 모두 태터툴즈를 사용하고 있었습니다. 차단 이유는 아마도 스팸 때문이 아닐까 추측해봅니다. 스팸차단용 플러그인에서 blogspot.com을 차단하고 있을지도 모릅니다. 물론, 주소를 차단하지 않는 태터툴즈 블로그가 훨씬 많긴 합니다.

그래서 정중히 부탁드립니다. 혹시라도 이 글을 보고 계신 여러분의 블로그에서 주소 차단 필터를 쓰고 있다면, blogspot.com이 리스트에 있진 않은지 확인해주세요. 의외로 많은 한국인이 blogger.com의 블로그를 이용하고 있고, blogspot.com 주소를 자기 블로그에 쓰고 있답니다. blogger 유저들도 리플을 달아야 하지 않겠습니까?