다음뷰 추천 버튼 옆에 다음 구독 버튼 달아 보자




다음뷰 버튼은 다음뷰에 글을 송고하는 사람이라면 꼭 꾸미는것중 하나이죠. 저는 다음뷰 추천 버튼을 크기를 작게 해두고 뒤에 무늬를 넣었습니다. 링크 : 다음뷰 버튼 꾸미기

그런데 다음추천버튼을 작게 만들어두면 구독버튼이 나타나지 않죠. 그래서 저는 구독버튼을 따로 달았습니다. 다음에서 이부분을 지원해주죠. 그런데 그냥 넣으면 구독버튼이 원하는곳에 뜨지 않습니다. 근데 제 경우에는 원하는곳에 띄울 수 있습니다.

그 방법에 대해서 알아봅시다.


다음뷰 구독 버튼을 다음뷰 추천 버튼 옆에 달아보자


아래의 코드를 skin.html 에 본문 치환자 [샵샵_article_rep_desc_샵샵] 아래에 넣습니다.
노란색 글 부분은 자신의 블로그 주소를 넣습니다 ( 예 : http://test.tistory.com )




<div class="viewonAdd"><a href="http://v.daum.net/user/plus?blogurl=http://cdmanii.com" onclick="window.open(this.href); return false"><img src='http://img-section.daum-img.net/view/widget/bt_plus_a03.gif'></a></div>



아래의 코드를 style.css 맨 하단에 넣습니다.

.viewonAdd {
margin:-228px 0 0 499px;
position:absolute;
width:33px;
}



다음뷰 구독 버튼 위치 조정을 해보자


다음뷰 구독버튼을 위와같이 달면 블로그 마다 뜨는 위치가 조금 다를것입니다. 이부분의 위치를 조절을 하는 방법에 대해서 설명합니다.

위에 코드를 정상적으로 스킨에 넣은 뒤, 파이어폭스의 플러그인인 파이어버그로 미리 구독버튼위 좌표값을 조절해서 맞춰볼 수 있습니다. 파이어폭스의 파이어버그(firebug) 가 궁금하신 분은 여기를 눌러주세요.



파이어버그(firebug) 에서 CSS 탭에서 viewonAdd 를 검색 후, margin 의 좌표값을 조절해서 자신이 원하는 곳에 나타나도록 설정을 해봅니다. -228px 0 0 499px 의 4개의 설정값은 차례대로 위,오른쪽,아래,왼쪽 의 좌표값입니다.

자신이 원하는 곳에 조절을 했다면 그 설정값을 잘 기억해두시고 위에서 스킨에 넣은 값에 내용을 변경을 해줍니다.
저장 후 재대로 뜨는지 확인을 합니다.


다음뷰 구독 버튼 설치 방법 및 위치 조절 설명 동영상




다음뷰 구독 버튼 설치 연관 링크들



이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 이전 댓글 더보기
  2. 꼬마낙타 2010.03.04 10:00 신고

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

    perm. |  mod/del. |  reply.
  3. 2010.03.04 10:07

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.03.04 10:25 신고

      #container {
      /* left:50px; */
      /* margin:0; */
      padding:0;
      position:relative;
      width:900px;
      margin:0 auto;
      }

      style.css 내용을 보시면 #container 라는 부분이 있을거에요. 블로그 전체를 묶고 있는 틀인데요. 이부분을 좀 바꿔주시면 되요.

      첫줄은 /* */ 로 되어있죠. 이건 주석이구요. 주석을 한 이유는 left:50px; 는 container 큰 틀을 왼쪽엣 50px 위치에서 띄우라는 뜻이예요. 이것때문에 일단 기본정렬이 왼쪽인 상태에서 왼쪽에 50px 띄워진것이구요. 이부분을 주석하고

      추가된 부분은 맨 하단에 margin: 0 auto; 이부분이예요. 큰 틀(container) 를 위아래는 공간을 없이 양쪽으로는 자동으로 (똑같이 분배) 하라는 뜻이되어서 가운데 정렬이 되게 됩니다. ^^

      궁금하신점 더 생기면 질문해주세요 ~

      perm. |  mod/del. | 
    • 묵? 2010.03.04 15:04 신고

      와하하
      몇일동안 안되서 고생했는데...
      씨디맨님 좀 짱인듯~
      정말 감사합니다~~~자주 놀러오겠습니다~^^

      perm. |  mod/del. | 
  4. shinlucky 2010.03.04 12:14 신고

    언제나 드는 생각이지만 추천버튼 누르고 싶을정도로 참 깔끔한 것 같아요 ^_^~

    perm. |  mod/del. |  reply.
  5. 마음의 꿀단지 2010.03.04 13:30 신고

    이번에도 좋은 팁을 알려 주시네요 ...^^

    perm. |  mod/del. |  reply.
  6. LiveREX 2010.03.04 15:28 신고

    언제나 좋은 정보~ 잘 보고 갑니다 ㅎㅎ
    요것도 어떻게 활용할지 고민해봐야겠네요 ^^

    perm. |  mod/del. |  reply.
  7. rinda 2010.03.04 17:20 신고

    드디어 공개하셨군요~ 수고 많으셨습니다 ㅎㅎ
    늘 좋은 정보 고맙습니다 ^^

    perm. |  mod/del. |  reply.
  8. 2010.03.04 18:14

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  9. 껍데기 2010.03.08 17:42 신고

    유용한 방법 정말로 감사합니다...*^^*

    perm. |  mod/del. |  reply.
  10. 잉커 2010.03.19 04:35 신고

    리트윗 버튼 설정법도 알려주심 안될까요~ 네???

    perm. |  mod/del. |  reply.
  11. NCC 2010.03.24 12:24 신고

    저도 추천버튼 잘 보이는 곳에 놓고 눌러달라고 해야겠어요 ㅋㅋㅋ

    perm. |  mod/del. |  reply.
  12. 풀칠아비 2010.04.12 00:05 신고

    좋은 정보 잘 보고 갑니다.
    감사합니다.

    perm. |  mod/del. |  reply.
  13. Hong_1998 2010.05.07 20:59 신고

    덕분에 다음뷰 구독버튼도 추가합니다~

    perm. |  mod/del. |  reply.
  14. 개떵이 2010.06.06 22:27 신고

    와우~

    너무 좋은 내용이 많아요~ 잘 활용 하겠습니다 ^^

    perm. |  mod/del. |  reply.
  15. 금융지식인 2010.07.16 09:36 신고

    좋은 정보 잘 보고 갑니다~!!

    perm. |  mod/del. |  reply.
  16. 윤뽀 2010.08.27 09:53 신고

    오늘도 멋진 팁이네요
    응용해보면 뭐든 다 할 수 있을 것 같은데
    전 뭐 하면 버벅거려서 진행이 안되네요
    아~ 소스 보다가 머리 쥐나요 ㅠㅠ

    perm. |  mod/del. |  reply.
  17. 닉쑤 2010.08.27 10:13 신고

    오늘도 하나 배우고 갑니다~~ 감사요 ^^

    perm. |  mod/del. |  reply.
  18. 열정 2.0 2010.08.27 11:21 신고

    제 스킨은 요런 버튼 만드는 데 좀 제약이 있군요. 나중에 스킨 변경하면 그때 한번 해봐야겠어요. 즐겨찾기에 추가해두겠습니다. ^^;

    perm. |  mod/del. |  reply.
  19. 명섭이 2010.08.28 01:05 신고

    좋은팁 감사합니다.
    씨디맨님 포스트 참고해서 추천버튼이라도 좀 잘 보이게 해야겠네요^^

    perm. |  mod/del. |  reply.
  20. 2010.09.24 15:59

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  21. 봉봉 2011.03.06 16:13 신고

    앗 정말 감사드려요^^
    저도 추천버튼 옆에다가 구독버튼을 달고 싶었는데,
    어떻게하는거지 찾다가 요기까지 찾아왔어요^^ㅎㅎ
    덕분에 잘 달았습니다^^

    근데, 전 파이어폭스? 그게 아니라서 좌표가 뭔지도 잘 모르고...ㅜㅜ
    그래서 구독버튼이 쌩뚱맞게 아래로 좀 아래로 내려갔네요.
    추천버튼 바로 아래다가 하고 싶었는데...ㅠ
    이 좌표 위치를 알 수 있는 법은 없을까요..?

    perm. |  mod/del. |  reply.
    • 봉봉 2011.03.06 16:17 신고

      앗, 다시 설정해서 보니까 뷰 버튼 옆에 가 있네요!!
      ^^ 헷헷 정말 감사드려요~~~~~

      perm. |  mod/del. |