트위터를 하다 보면 어떤 트윗들의 하단에 큰 사진이나 동영상, 뉴스 요약 등이 딸려있는 것을 볼 수 있습니다. 바로 '트위터 카드'란 것인데요, 주로 웹 페이지의 링크를 트윗에 넣으면 자동으로 해당 페이지의 요약 등을 보여주게 됩니다. 만약 트윗에 유튜브 동영상 링크를 넣으면 아예 트윗 내에서 유튜브 동영상까지 바로 볼 수 있죠. 아래와 같이 트윗을 embed 형태로 다른 웹 페이지에 삽입해도 트위터 카드가 표시됩니다.

Everything you need to know about the Amazon Fire Phone http://t.co/uULA47di9M

— TechCrunch (@TechCrunch) 2014년 7월 23일

 

저도 블로그에 트위터 카드를 적용했는데요, 트윗을 임베드 하면 아래와 같이 보이게 됩니다.

http://t.co/Xdajo9pm4h 호오... 제 구글 Blogger 템플릿에 트위터 카드 메타태그를 적용시켰습니다. 그런데 매번 검색 설명을 넣어줘야 함... 귀찮...

— Kais (@hfkais) 2015년 8월 11일

 

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

Creating 'After the jump' summariesPrint – Blogger Help

중요 : 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 위젯 달기’ 라는 글을 썼었는데, 이때 쓰인 코드는 믹시에서 업데이트하기 전 코드입니다. 지금은 수정되었으므로 믹시에서 바로 코드를 복사해 써도 문제 없습니다.)

구글의 블로그 서비스인 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 위젯이 정상적으로 설치되었습니다. 많이 많이 눌러주세요~