다음뷰, 마이픽업 등 추천 버튼 위치 설정하기

 각 포스팅 하단에 추천 버튼 위젯들이 세로로 나열되면 깔끔하지도 못하고 좀 그렇죠? 1~2개라면 괜찮을지 모르지만 버튼들이 점점 많아지다보면 ㅠㅠ 그래서 예전에 메타블로그 추천 버튼들을 정렬하고, 그 사이에 원하는 이미지를 집어넣는 방법을 소개했었는데요. 그 당시에 소개할 때는 MissFlash님의 소스를 활용하는 방법으로 소개를 했었습니다.

> 참고 : 메타블로그 추천 버튼 통합 및 배경이미지 넣는 방법 - LiveREX

 한동안 웹표준(XHTML) 유효성 검사에 빠져서 에러를 잡아나가는데 위 링크에서 참고한 소스 중 일부가 에러로 잡히더군요. 처음엔 에러 부분만 하나씩 수정해 나가다가 나중에는 관련 소스를 모두 지워버렸습니다 ^^;; 사실 약간의 실수로 삭제 후 저장을 해버렸는데 다시 수정하며 작업하기가 귀찮았더랬죠.

 마침 믹시 버튼을 제거하려고 마음먹고 있던터라 깔끔하게 제거하고는... 다음뷰 추천 버튼과 마이 픽업 위젯, 리트윗 버튼, 블로그독 위젯 등 여러가지 버튼들을 나란히 정렬해서 정리하려고 소스를 나름대로 만들어 보았습니다. 의외로 간단하게 메타블로그 추천 버튼 및 트위터 리트윗 버튼 등이 정렬되더군요.
 물론 웹표준 유효성 검사에서도 에러가 표시되지 않구요. 참고로 직접 확인해보셔도 되겠지만 포스팅 중에 제가 HTML 을 잘못 입력하지 않는 이상 현재 이 블로그에서 에러로 표시되는건 1건일 겁니다. 그 1건은 댓글에 아이콘을 표시하는 티스토리 플러그인인지라... 제가 수정할 수가 없네요 ㅠㅠ

  여튼, 이렇게 버튼들을 정렬해서 사용하는데 위 방법을 질문주시는 분이 계시더군요. 그래서 예전 방법만으로 설명드리기에는 괜히 찝찝한 기분이 들어 제 블로그에 적용되어 있는 소스를 그대로 소개하려고 합니다. 아마도 예전 방법보다 훨씬 간단하고 쉽게 느껴지실 겁니다.

 미리 말씀드릴 것은... 제 블로그 하단에 버튼들을 보면 현재 블로그독 위젯은 정렬되어 있지 않죠? 간혹 가끔 직접 추가하기만 하는데... 얼마전 네이트측에 문의를 해보니 스킨마다 자동으로 추가되는 소스 작업은 이미 완료되었고, 6월초에 공개할 예정이라고 하더군요. 그래서 그 때 블로그독 위젯은 추가할 계획입니다. 그래서 기존에 넣었던 소스는 제거를 한 상태구요. 후에 관련 위젯 추가시 본문에 내용을 추가하도록 하겠습니다.

추천 버튼 깔끔하게 정렬하기

 마이픽업 위젯과 리트윗 버튼은 사용하는 분들에 따라 달라서 그렇지 거의 같은 기능인지라... 여기서는 다음뷰 추천 버튼과 마이픽업 위젯에 대한 소스만으로 설명을 드릴게요. 질문주신 분도 이 2개만 물어보신지라 ^^;; 메모장을 다운로드 받은 후 아래 설명을 참고하여 적용하세요.

 

버튼정렬 소스.txt

▼ 아래 이미지는 skin.html 에 포함되어 있는 관련 소스입니다. 원하는 위치에 소스를 넣으면 되는데요. 노랗게 표시해둔 부분의 URL 을 자신의 블로그 주소 및 트위터에서의 계정명을 입력하시면 됩니다.

 위 이미지에서 2번줄, 7번줄, 19번줄처럼 한줄씩 사이에 공간을 준 건 구분하시기 쉽게 하려고 한겁니다. 스킨에 추가하실 때는 공간을 제거하셔도 됩니다. 참고로 3~6번까지가 다음뷰 추천 버튼에 대한 소스입니다. 며칠전에 웹표준에 맞는 소스를 소개했었죠? 추천 버튼의 형태를 변경하고 싶으시다면 recombox 의 숫자를 변경하고 width 와 height 를 수정하시면 됩니다. 관련해서 수치 등은 아래 링크를 참고하시면 되겠네요.

> 참고 : 웹표준(XHTML) 에러 없는 다음뷰 추천 버튼 추가하기 - LiveREX

 그리고 8~18번까지가 마이픽업 위젯입니다. 원래 마이픽업 홈페이지에서 제공하는 소스는 아래의 형태인데, 역시나 웹표준 에러 때문에 약간 수정했습니다. 현재 제가 올려드린 소스와 아래 보여드린 소스는 티스토리용인데요. 텍큐 등 다른 블로그에서 사용하실 분은 ☞ 여기를 참고하세요.

출처 : 마이픽업

 마이 픽업 위젯도 제 블로그에 있는 것처럼 큰 버튼말고 작은 버튼을 추가할 수 있는데요. 임시로 활용할 수 있는 위젯 소스를 마이픽업에서 공개를 했었습니다. 작은 위젯이라해봐야 글자 부분만 없고 디자인은 같습니다. 그래서 저는 곧 작은 위젯이 나온다니 그걸 기대하는 중입니다 ^^

> 마이픽업 : http://www.estorylab.com/78

▼ 아래 소스 내용은 style.css 에 추가하시면 됩니다. .view 부분의 스타일은 별로 수정하실게 없을 듯 하고, .Meta_Blog 부분의 스타일은 각자의 블로그 스킨에 맞게 수정하시면 되겠네요.

 예를 들어, border 의 색상을 흰색으로 변경하시려면 #e5e5e5 대신 #ffffff 로 수정하시면 됩니다. 그리고 5번줄에 보면 "이미지 주소" 라고 표시되어 있죠? 현재 제 블로그에서 보면 도널드덕 우표 이미지가 들어가는 소스입니다. 원하는 이미지를 블로그에 업로드한 후 해당 주소를 입력하시면 됩니다. 나머지 수치들은 직접 변경해보면서 차이를 비교해 보면 이해되실 듯 하네요.

 덧붙여 혹시 글 더보기 카테고리 플러그인 때문에 버튼들이 원하는 위치에 표시되지 않는다면, 본문 제일 위에 소개한 참고 링크에서 MissFlash님 소스를 이용하시면 됩니다.

[추가] 블로그독 소스가 공개되서 관련 내용을 별도로 포스팅 했습니다. 아래 링크를 참고하세요.

> 블로그독 추천 버튼, 스킨에 추가하기 + 크기 조정 및 하단 정렬 - LiveREX