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



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

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

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

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

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

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

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


▼ 아래 이미지는 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
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 돌이아빠 2010.05.27 07:04 신고

    와웅 블독 추천 위젯도 이제 조만간 공개가 되는거군요
    전 그때까지 참을라구요 ㅎㅎㅎ 그때 수정해서 재발행 해주시면 그때 업어가겠습니다~
    감사합니다 ㅋ

  3. BlogIcon 머 걍 2010.05.27 07:58 신고

    와우~~ 이런거 만드시는 분들 존경스러워요^^
    봐도 잘 모르겠지만,저녁때 제대로 한번 공부해야겠어요.

  4. BlogIcon 몽리넷 2010.05.27 09:35 신고

    마이픽업 var fn = 'table_s' 로 변경하면 버튼 작아진다~
    깜박하고 포스팅을 안했네 ㅋㅋ

  5. BlogIcon ★입질의 추억★ 2010.05.27 11:23 신고

    저도 이거 궁금했는데~ 조만간 날잡아서 샥다 정리 해버릴까봐요
    감사합니다 ^^

  6. BlogIcon killerich 2010.05.27 13:19 신고

    저도 통합해야 하긴 하는데;;아아;;;;귀찮아요--;;

  7. BlogIcon G-Kyu 2010.05.27 14:52 신고

    제게 완전 필요한 부분이네요!! 감사합니다 ^^ 꼭 써야겠어요!

  8. BlogIcon 무예인 2010.05.27 21:34 신고

    ㅜ.ㅜ 어려워요 ㅜ.ㅜ 외계어 같아요

  9. BlogIcon 형석 2010.06.04 17:09 신고

    좋은 글 잘 보았습니다. 감사드려요. 질문이 있어서 답글달게되었습니다. 제가 740사이즈로 글을 올리고 있는데요. 저 박스에서 옆에 그림넣는 부분만 없으면 깔끔하게 들어갈 듯 합니다. 그림을 따로 안넣으려면 어떻게 하면 될까요?^^:;;

  10. BlogIcon 형석 2010.06.04 22:43 신고

    이렇게 저렇게 해보다가 결국은 그림을 넣었네요.ㅋ 정말 감사드립니다. 한결 깔끔해졌답니다^^ 감사드려요^^

  11. BlogIcon 노지 2010.06.05 08:07 신고

    벌써 20번은 읽고 시도한것 같은데.....모르겠다는.......앜ㅋㅋㅋㅋㅋㅋ 돌겠다

    카데고리 글 더보기가 참;;;

  12. BlogIcon 형석 2010.06.06 00:27 신고

    ㅋ 블로그독 위젯 스킨에 입히는 소스가 공개되었어요.ㅋㅋ 추가해주실꺼죠?? 기다릴께요!!

  13. BlogIcon 형석 2010.06.06 01:51 신고

    정말요?? 이렇게 빨리 답장해주시고 완전 감사드려요^^

  14. BlogIcon 사랑초 2010.06.15 23:55 신고

    skin 에 어느부분에 소스를 추가해야하나요?

  15. BlogIcon 천사마음 2010.07.02 20:52 신고

    LiveRex님 질문이 한가지 있습니다.
    왼쪽 스크롤바 이동바에 다음뷰가 제대로 표시되지 않는데 무슨 문제가 있는건가요? 하단에는 제대로 나오는데 ㅠ,.ㅠ
    그리고 블로그 독 별이 LiveRex님은 테두리가 이쁘게 나오는데 저는 이쁘게 나오지 않습니다. ^^;;
    방법 좀 알려주시면 감사하겠습니다.

    • BlogIcon LiveREX 2010.07.02 21:03 신고

      보아하니 천사마음님 글은 주소가 문자로 표시되어서 그런듯 합니다.

      article_rep_id 부분을 article_rep_link 로 변경해서 다음뷰 소스를 넣어보세요 ^^

  16. BlogIcon 노지 2010.08.11 07:20 신고

    볼 떄마다 그런데... 블로그독이 뒤에 트위터버튼을 가릴 떄도 있고 안 가릴때도 있네요

  17. BlogIcon 머피 2010.10.04 01:21

    좋은 정보 감사합니다. !!

  18. BlogIcon [씽씽] 2010.11.13 13:02 신고

    저도 적용해보앗습니다 ^^
    블로그가 훨~씬 깔끔해지내요 ㅎㅎ
    믹시버튼도 추가하고 싶은대 잘 않되내요;;
    아무튼 소중한 정보 감사합니다 ^^

  19. BlogIcon 당근천국 2010.12.27 22:00 신고

    우왕굳~
    감사합니다.

  20. BlogIcon 한솔골프 2011.05.19 14:48 신고

    결국포기..ㅠㅠ 아무리 해도 깨져서 나와 안되네요..트위트는 아예 안나오고..뷰추천버튼은 정렬이 안되서 위로 올라가네요.

  21. BlogIcon jogos do mario 2011.06.24 19:35

    와우~~ 이런거 만드시는 분들 존경스러워요^^
    봐도 잘 모르겠지만,저녁때 제대로 한번 공부해야겠어요.

댓글을 남겨주세요 :)




submit