구글 blogger에 믹스 업 위젯을 달아보자

by H.F. Kais | 2009. 6. 30. | 13 comments

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

 

1. 믹시 가입과 로그인

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

 

2. 피드 주소 변경

blogger에 믹스업 위젯 달기

로그인한 뒤, 다시 오른쪽 상단의 ‘블로그관리’ 링크를 눌러 관리 페이지로 들어갑니다. 블로그를 등록하지 않았다면 자신의 블로그를 등록합니다. 중간에 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에 체크하고 확인 버튼을 누릅니다. 확인 버튼 하단에 생성된 코드를 복사합니다.

 

blogger에 믹스업 위젯 달기

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

 

blogger에 믹스업 위젯 달기

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

 

blogger에 믹스업 위젯 달기

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

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

 

blogger에 믹스업 위젯 달기

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

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

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

 

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

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

 

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

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



댓글 13개:

  1. 다음뷰 다는것도 포스팅할 생각 없으신지요?
    블로거에 다음뷰 다는것 넘 힘들어서 포기했어요,,;;

    답글삭제
  2. knight4u 님 /
    그게 자동으로 딱딱 되면 좋겠는데 다음 뷰에서 '새 글 보내기' 도 해야 하고... 어떻게 해야 할 지 모르겠네요. 저도 그냥 일일이 코드 복사해서 쓰고 있습니다. 다음 측에서 개선해주지 않는 이상 별다른 방법이 없을 것 같아요.

    답글삭제
  3. 안녕하세요. H.F.Kais 님의 도움덕분에 성공적으로 믹시위젯을 게시판에 붙일수 있었습니다 . 정말 감사드립니다 ^^

    근데 염치불구하고 좀만 더 질문해도 되련지요 -_ㅠ
    H.F.Kais 님의 블로그를 보면 그 오른쪽에
    위젯들이 잘 정리가 되어있던데 그것은 HTML의 어느부분에 삽입을 해야하는 것인지요 ..?

    Kais 님같은 블로그처럼 만들고 싶은데 네이버 블로그만 쓰다보니 HTML이 어렵게 느껴지네요 ^^;

    답글삭제
  4. 소금 님 /
    방금 블로그에 방문해 보니 믹스업 위젯이 잘 나오네요. 도움이 되어서 기쁩니다.

    오른쪽 위젯 부분은 blogger의 대시보드-레이아웃 메뉴에서 '가젯추가'를 선택하여 넣은 것입니다. 여러 가젯 중 'HTML/Javascript'를 선택하여, 직접 HTML코드를 넣어주면 됩니다. 적당히 br 태그 등을 사용해서 정렬해주면 되고요. 막상 해보시면 간단할 겁니다.

    답글삭제
  5. 오.. 감사합니다. ㅎㅎ
    블로거는 항상 쓸때마다 느끼는거지만 사용하기 넘어려운거 같네요 ^^

    답글삭제
  6. blogger..너무 어려운데 잘 활용하고 계시는것 같네요~

    앞으로 종종 방문해서 많이 배우고 갈 것 같네요!

    follow할게요!

    답글삭제
  7. Kim, Beomyeol /
    Blogger도 잘 살펴보면 생각보다 쉬워요~ 방문해주셔서 감사합니다!

    답글삭제
  8. 아직 공부가 많이 필요한 것 같아요-
    어쨋든 덕분에 믹시 잘 설치했네요~
    피드버너 덕분에 문제는 있었지만요~

    답글삭제
  9. 덕분에 믹시 위젯 설치해봅니다
    블로거에 가젯이 이쁜게 없어서
    가젯 설치법 찾으러 돌아다니다가
    이렇게 와서 글보게 됩니다
    HTML 참 어려운거 같네요
    아직도 가젯 설치는 무리인거 같습니다

    많이 배우고 갑니다 좋은 하루 되세요

    답글삭제
  10. Iris 님 / 방문 감사합니다.
    Blogger의 코드 형식이 다소 복잡할 수 있어, 어려우시다면 파이어폭스의 확장기능인 FireBug 같은 툴을 추천해드립니다.
    그런데 믹시는 요새 시스템이 많이 불안정하더라고요. 설치하시고 잘 살펴보시기 바랍니다~

    답글삭제
  11. 하하 data:post.body/ 이것을 찾아서 밑에 넣었는데 아무것도 안보이더군요.
    그래서 지우고넣고 지우고넣고 ㅠㅠ 그래도안돼서 혹시나해서 찾기을 더했더니
    헉 하나더있더군요.data:post.body/ 이말이죠 .그래서 밑에넣으니 그제서야 보입니다.하하
    암튼 좋은 정보고맙습니다

    답글삭제
    답글
    1. 네, blogger의 템플릿 구조는 위쪽에 보여줄 내용을 '선언' 하고, 아래쪽에서 그걸 '불러오는' 방식으로 이루어집니다. 그래서 좀 헷갈리는 면이 있습니다만, 숙달되면 생각보다 단순해서 이것저것 건드리기가 오히려 편합니다. :D

      삭제
  12. 감사합니다 정말 많은 도움이 되었어요.

    답글삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.