다음뷰, 마이픽업 등 추천 버튼 위치 설정하기 포스팅에서 각 추천 버튼을 본문 하단에 깔끔하게 정렬하는 방법을 소개했었는데요. 기억하시나요? ^^ 그 글에서 제가 언급하기를... 네이트 블로그독은 각 글마다 수동으로 추천 버튼을 추가해야 해서 번거롭다. 그런데 6월초에 블로그독 추천 버튼도 스킨에 자동으로 추가되는 소스를 제공한다더라고 말씀드렸었죠? 드디어 소스를 공개 했더군요. 요즘 연애 사업(?)에 빠져있어서 신경을 못쓰고 있었는데 형석님께서 알려주셔서 ^^;;
 그런데 소스 자체는 좀 실망스러웠습니다. 뭐 그런 이야기는 지루하니까 패스하고~ 약속했던대로 블로그독 추천 버튼을 스킨에 추가하여 각 포스팅마다 자동으로 생성되게 하고, 하단에 깔끔하게 정렬하는 방법까지 소개를 하겠습니다.

 덧붙여, 원래 블로그독 추천 위젯의 크기가 아래 이미지처럼 좀 크죠? ^^;;


 버튼형으로 제공해 줄거라 생각했는데 이 부분도 좀 아쉽네요. 언젠가는 나오겠지요. 아무튼 블로그독 위젯의 크기도 적당하게... 즉, 크기를 조정하는 방법도 간략하게 설명하겠습니다.

블로그독 추천 버튼, 스킨에 추가하기

▼ 네이트온 블로그독에서 [마이페이지] 로 이동합니다. 자신이 작성한 글에 커서를 가져가면 [위젯] 버튼이 표시되는거 아시죠? 위젯 버튼을 클릭해 주세요 ^^ 아무 글이나 상관 없습니다.


▼ [스킨에 넣기] 메뉴를 선택하고, 자신의 블로그 서비스를 선택합니다. 저는 티스토리니까 티스토리를 기준으로 설명드릴게요.


 위 소스를 복사하여 스킨에 추가하면 처음에 보여드린 블르그독의 큰 추천 버튼 위젯이 각 글마다 자동으로 표시가 됩니다.

블로그독 추천 버튼 크기 조정 / 정렬하기

크기 상관없이 사용하실 분은 위 내용을 skin.html 의 원하는 위치에 추가하시면 됩니다. 아래 내용은 추천 버튼의 크기를 현재 제 블로그 하단에 보이는 것처럼 표시하면서 정렬하는 방법입니다.

▼ 위에서 복사한 스킨에 추가하는 블로그독 위젯 소스입니다. 노란색으로 표시한 부분이 원래 소스에는 없지만 추가한 내용입니다. class 를 부여했는데요. CSS 에서 스타일을 지정하기 위함입니다.


▼ 아래는 style.css 에 추가하면 되는 내용입니다. 현재 제 블로그 CSS 에 추가된 내용인데요. 노랗게 표시한 .blogdoc 보이시죠? class 에서 부여한 이름과 동일해야 제대로 스타일이 지정됩니다.


 위 CSS 내용은 아래 텍스트 파일을 다운로드 받아서 이용하시면 되는데요. 참고로 저처럼 블로그독의 배경을 회색톤으로 표시하지 않고 흰색 등으로 변경하시려면 background-color 와 border 의 색상을 변경하시면 됩니다.


 마지막으로, 만약 다음뷰, 마이픽업 등 추천 버튼 위치 설정하기 포스팅의 내용을 참고하거나 적용하신 분들은 skin.html 에 적용할 때 아래 이미지처럼 넣으시면 됩니다. 스킨에 적용된 일부분만 보여드릴게요 ^^;;;


 빨간색 네모 박스를 보시면 얼추 순서가 짐작되시죠? 제 블로그 하단과 비교해 보시면 바로 이해되실 듯... 참고로 view 는 예전에 소개한 웹표준(XHTML) 에러 없는 다음뷰 추천 버튼 추가하기 포스팅에서의 다음뷰 추천 버튼 소스입니다.

수정한 블로그독 추천 버튼 테스트 장면

 아래 영상은 단순히 별표 모양의 버튼만 보이게 한 후 클릭시 제대로 추천이 이뤄지는지 테스트해 본 장면입니다.

 

 제대로 잘 되는걸 확인하실 수 있죠? 제가 확인한 결과 '익스플로러8(IE8), 파이어폭스, 구글 크롬, 오페라' 에서 지정한 스타일대로 이상없이 표시되면서 추천도 되는 걸 확인했습니다. 요청에 의해 잽싸게 하느라 좀 엉성한 면도 있습니다만 관련해서는 차차 보완할게요. 네이트 블로그독 버튼을 스킨에 자동으로 추가하고 원하는 위치에, 원하는 크기로 깔끔하게 정렬해서 사용해 보세요 ^^
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 티비의 세상구경 2010.06.06 07:21 신고

    오오~ 저한테 딱 맞는 유용한 정보네요
    잘 보고 갑니다. ^^ 지금도 나쁘진 않은것 같지만
    크기 순서대로도 배치시켜 봐야겠어요 !!
    즐거운 주말보내세요 !!

  3. BlogIcon 머 걍 2010.06.06 07:42 신고

    으아~~ 드뎌 나왔군요.
    점심때 열심히 공부해서 배치해봐야 겠어요.
    항상 좋은 정보 감사히 담아갑니다^^

  4. BlogIcon 새라새 2010.06.06 07:52 신고

    스킨 수정중인데 할일이 하나 더 늘었네요..
    좋은정보를 주신 라이브렉스님 감사드려요^^

  5. BlogIcon 예또보 2010.06.06 08:16 신고

    좋은 정보 감사합니다 ^^
    보고 해야 겠어요 ㅋ

  6. BlogIcon 미스터브랜드 2010.06.06 10:22 신고

    블독은 메번 위젯을 퍼다가 붙여넣기가 불편했었는데 이제 편리하게 됐네요..좋은 정보 감사합니다.

  7. BlogIcon 돌이아빠 2010.06.06 10:59 신고

    와웅~ 드디어 나온거군요. 감사합니다~

  8. BlogIcon Mystika 2010.06.06 11:14 신고

    사이드바 버튼에 한번 넣어봐야 겠네요 ㅋ

  9. BlogIcon 형석 2010.06.06 11:29 신고

    대박입니다^^
    감사드려요^^
    주말 잘 보내세요~~ 연애 사업도.. 잘 되시길. ㅋ

  10. BlogIcon 버섯공주 2010.06.06 12:14 신고

    우와! 드디어 나왔네요! ^^ 기다리고 있었어요! +_+

  11. BlogIcon 노지 2010.06.06 13:09 신고

    매번 볼 떄마다 절망을 느끼면서 . 난 그냥 살아야지 하는 1인...

  12. BlogIcon 윤뽀 2010.06.06 13:48 신고

    블독에서 유입이 많나요? 전 어쩌다 한번 있어서 매번 해볼까? 하면서도 주저하게 되더라구요 ㅠㅠ

  13. BlogIcon 데니엘 2010.06.06 17:31

    글 중간 쯤에 "네이트오" 오타있네요. 별로 상관은 없지만 말이죠 ㅋㅋ
    블로그독은 왠지 규모는 작은 것 같은데 방문자 파급효과가 크더라고요.
    좋은 글 감사드립니다. 잘 따라해 볼께요 :)

  14. BlogIcon 이에반 2010.06.06 22:38 신고

    블로그 본문 하단을 잘 정리하셨네요..ㅎㅎ

  15. BlogIcon 바람처럼~ 2010.06.07 22:14 신고

    저도 참고해보겠습니다 ㅎ

  16. BlogIcon 닉쑤 2010.07.04 20:56 신고

    오홍.. 블로그독 추천이 저 별표였군요. 뭔지 모르고 눌르고만 다녔는데. ㅎㅎ;;
    저도 한번 해봐야겠군요.
    그리고,
    본문 내용보다 저는 다운로드 박스, 비디오 박스가 더 눈에 들어오네요.
    서식으로 만드신거 같은데 멋지네요. 뭔가 있어보임!! ㅋ
    이것도 따라해 봐야겠다능. ㅋ
    좋은글 잘 봤습니다. ^^

    아, 제 브라우져만 그런지 모르겠는데 지금 이 본문 밑에 블로그독 추천 상자가 다른거 위에 겹쳐 나오네요. 다음뷰 바로 옆에 나오긴 한데 그 밑에 다른게 깔려있다능.. 저는 익스7.0에 웹마2.0인데.. 흠..

    • BlogIcon LiveREX 2010.07.04 22:50 신고

      IE8 또는 크롬 등 타 브라우저에서는 이상없이 표시되는데 이전 버전의 IE 에서 그렇게 보이더군요
      이전부터 알았던 문제이긴 한데 그냥 패스했답니다 ^^;;

  17. BlogIcon 닉쑤 2010.07.05 00:21 신고

    아, 그런거군요;;
    저도 IE8으로 넘어가야 될려나요 ㅎ
    전에 갈아탈려는데 뭐가 문제였더라.. 여튼, 뭔가 불변하고... 안 맞는듯 해서 다운그레이드 했었다능...
    고려해 봐야겠어요.ㅎ
    제가 7.0에서 작업한 것들이 8.0에서 잘 안 보일....리도 있을지도 모르니.. 하위버전은 상관없을거 같지만.
    여튼, 답변 감사들려요 ^^

  18. BlogIcon 소품산책 2010.07.13 11:33 신고

    이런 것도 있었군요.
    저도 언능해봐야 겠네요. 좋은 정보 감사합니다.

  19. BlogIcon Geosung 2010.07.21 16:43 신고

    팁 감사합니다.
    저기 질문이 있는데요.
    블로그독 버튼이랑 블로거뉴스 버튼이랑 높이 맞추는 팁좀 부탁드릴 수 있을까요...
    전 라이브렉스님 처럼 깔끔하게 되질 않네요. ㅠㅠ

  20. BlogIcon 욕망을욕망하라 2010.10.09 23:38 신고

    좋은글입니다. 감사합니다 ^^ 저도 블로그에 적용해봐야겠네요 언어를 잘모르는통에 항상 소스적용하기 힘들어도

    글보내기버튼을 적용하고말겠어요~

  21. BlogIcon [씽씽] 2010.11.13 13:04 신고

    이어서 블독까지 보고 추가완료 ㅎㅎ ^^ㅋ

댓글을 남겨주세요 :)




submit