사실 구글 Blogger에는 자체적으로 라이트박스 기능이 들어있습니다. 사진을 첨부하면 알아서 멋진 라이트박스로 보여주죠. 하단에 썸네일도 나오고, 무척 좋은 기능입니다. 설정에서 간단히 온/오프 할 수도 있죠. 포스트 본문에 삽입된 작은 사진을 크게 보여주기 때문에 간단히 사진 갤러리로도 사용할 수 있습니다.

하지만 2006년부터 꾸준히 커스터마이징을 해온 제 블로그 템플릿에서는 어떤 이유에선지 작동하지 않았습니다. 2009년에 구형 템플릿 -> 레이아웃(편의상 구분) 방식으로 변경한 이후 다시 최신 템플릿에 맞춰 바꿔야 하지만, 시간도 없고 아무래도 영 귀찮네요. 여기저기 손댄 부분도 많은데 그걸 다 옮겨오기가 겁날 정도입니다.

해외 사이트도 뒤져보고 여러 방법을 모색해 봤지만 결국 해결하지 못했습니다(라이트박스 관련 스크립트가 각 국가 언어별로 따로 제공되더군요). 그래서 아예 직접 만들까도 고민했습니다. 그 결과물이 이것 입니다만 결국 완성은 못했습니다. 원리는 간단하죠. 구글플러스에 올린 사진을 블로그에 삽입했을 때, 버튼을 누르면 중간의 주소값을 바꿔 좀더 큰 사진을 보여주도록 하는 것입니다. 어늦어도 구현도 되었지만 나머지 정리하는데 손이 많이가서 결국 중단하게 되었네요.

그러다 우연히 찾은 http://baksimgorkii.blogspot.kr/2010/10/blogspot-lightbox.html 이 글에 소개된 플러그인이 괜찮아보인다 싶었습니다. 예전에 여기저기서 자주 보였던 라이트박스 플러그인인데 Blogger 용으로 개조가 잘 되어 있더군요.

적용해봤더니 잘 됩니다. 다만 이미지 사이즈와 애니메이션 속도, 구글플러스에서 가져온 사진 파라미터 등이 약간 달라 수정을 좀 했습니다. 결과적으로 큰 사진을 1000px로 보여주고, 애니메이션 속도는 더 빠르게 했으며, 구글플러스의 사진도 문제 없이 보여지도록 했습니다.

지금 당장은 얼마 전 올린 꼬마버스 타요 직찍 사진과 마니산 일출 사진 포스트에 적용되어 있습니다. 앞으로 구글플러스에 올렸던 사진들도 블로그에서 많이 소개하고자 합니다.

구글은 자사에서 제공하는 모든 서비스들을 구글플러스(Google+)로 통합하고 싶은 걸까요? 구글 지역정보를 '구글플러스 로컬'로 바꾼 데 이어 피카사 웹 앨범까지 '구글플러스 사진'으로 통합하더니, 이번엔 Blogger를 대상으로 통합된 구글플러스 코멘트 시스템을 선보였습니다.

 

관련 글 : Bringing Google+ Comments to Blogger

 

사실 SNS를 통해 블로그 링크가 공유될 때 좀 애매한 느낌이 들긴 했습니다. 분명 글은 블로그에 있는데 독자의 의견은 엉뚱한 곳에 달리는 것이었죠. 처음 글을 쓴 이는 무시된 채 전혀 다른 공간에서 다양한 의견들이 오가는 경우랄까요? 때문에 트위터 API를 이용한 라이브리라던가 페이스북의 소셜댓글 등이 등장하게 된 것이겠죠.

아직은 이러한 기능들이 부족했던 구글플러스에서 우선 구글의 블로그 서비스인 Blogger를 대상으로 구글플러스 코멘트 시스템을 선보였습니다. 구글은 예전에 Blogger와 구글플러스 간의 프로필을 통합하는 작업도 진행했었죠. 이번에도 마찬가지입니다. Blogger 대시보드의 'Google+' 탭에서 '이 블로그에서 Google+ 댓글 사용' 란에 체크해주면 됩니다.

※ 템플릿 수정은 많은 시행착오를 겪어야 합니다. 여러 번 수정을 거쳐야 할 수 있습니다. 따라서 현재 운영중인 블로그에 바로 적용하지 말고, 별도의 템플릿 편집용 블로그를 만들어 충분한 테스트를 거친 뒤 반영하는 방식을 추천합니다. 구글 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가 아닌 텍스트큐브의 링크가 걸려 있습니다만, 여전히 전세계를 대상으로 한 구글의 주력 블로그 서비스는 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 템플릿을 만들었는데, '이걸 과연 누가 쓰려나…' 하는 생각이 듭니다. 한편으론 너무 제 스타일에 맞춰 만든 건 아닐까 싶기도 하고요. 단 한 분이라도 써주신다면 정말 기분 좋을 것 같아요. 아니면 이 템플릿을 베이스로 더 멋진 템플릿을 만들어도 좋을 것 같고요. 부디 유용하게 쓰시는 분이 꼭 있었으면….

템플릿 다운로드

중요 : 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 위젯이 정상적으로 설치되었습니다. 많이 많이 눌러주세요~