다음뷰 추천 버튼 상단으로 자동으로 올리기

이 글을 적기 전에 고민을 많이 했습니다. 정말 이렇게 까지 해야하나 싶어서요. 다음뷰는 가장 큰 메타사이트라고 봐도 과언이 아닙니다. 그런데 랭킹이라는 것에 수익이 연결되다보니 조금은 과열이 된 부분이 분명 있습니다. 그리고 이것에는 추천을 눌러주느냐 안눌러주느냐도 엄청난 연관이 있기 때문에 이것으로 괜히 욕먹기도하고 시기를 받기도 하고 문제가 생기기도 합니다. 예전에 음식 관련 이벤트가 있었는데 다음뷰 버튼을 퍼가기 해서 추천을 받는것 때문에 엄청난 파문이 있기도 했었죠.

개인적으로는 다음뷰 버튼이 딱 고정된 위치에서만 뜨고 다른곳에 뜰 수 없어야 한다고 생각하는데요. 그래야 그나마 공정하기 때문입니다. 다만, 다음뷰 관리자도 퍼가기에 대해서는 관대하고 문제가 전혀 없다는 입장이기 때문에 다음뷰의 변화를 기대하긴 어렵습니다.

블로그의 글의 첫 문단에 추천을 해달라는 다음뷰 버튼들을 심심치 않게 볼 수 있는데요. 이 버튼을 여기 둘 수 밖에 없는 상황이 되었습니다. 좋은글도 알리지 않으면 읽히지 않아서 필요없는 글이 될 수 있습니다. 사람들이 볼 수 없다면 의미가 없다는 것 이죠.

자 그렇다면 다음뷰 추천 버튼을 퍼가기를 해서 본문에 상단에 올려보도록 하겠습니다. 이것은 굳이 설명하지 않더라도 대부분 아실겁니다. 다음뷰 사이트에 가서 자신의 글의 퍼가기를 눌러서 코드를 글에 넣으면 됩니다. 물론 이것을 설명하려고 지금 글을 적는것은 아닙니다.

이런 일련의 과정을 자동화 하겠습니다. 아래 내용을 따라하면 자동으로 모든글에 다음뷰 추천버튼이 일정한 위치에 모두 뜨게 됩니다. 물론 이제는 추천은 양심에 맡겨야 합니다. 정말 괜찮은 글에만 판단하여 추천을 해줘야하기 때문이죠. 그래서 배경으로 글도 하나 넣어보았습니다.

"좋은 글이면 추천해주세요" 라고 넣어보겠습니다. 좋은글이면 추천 그게 아니라면 그냥 넘어가는 것이죠.

제 경우에 본문 맨 하단에 다음뷰 버튼을 가장 작게 해서 한쪽 구석에 두었는데 글을 잘 보신분들도 이 버튼을 찾지 못해서 추천해주고 싶어도 추천을 못해줬습니다. 실제 제가 이렇게 적는 이유는 추천버튼이 어디에 있냐고 어느분이 물어본적이 있기 때문입니다. 이제 상단에 올려두었으니 아무래도 추천의 갯수에 변화가 있을겁니다.

실제로 이것을 적용하고 이번달 (지금 2월 2일) 에 추천이 10개였던것이 86개로 갑자기 확 늘어낫네요. 이렇게 다음뷰 추천 수라는게 부질없는것이기도 합니다.

이 팁을 적용하는것이 껄꺼럽거나 이렇게 까지 해야하나? 라고 생각하는분도 분명 있을겁니다. 저역시도 그랬기 때문 입니다. 이것은 모든 블로거들이 마찬가지 일겁니다. 하지만 좋은글은 알려야한다는것과 추천을 하고 싶은데 찾기 어려운 위치에 놓아서 추천을 할 수 없는것을 보호하기 위해서 하는 조취이니 필요하신분만 적용하시기 바랍니다.

다음뷰 추천 버튼, 자동으로, 옮기기, 블로그팁, IT, blog, tips, 팁,이 글을 적기 전에 고민을 많이 했습니다. 정말 이렇게 까지 해야하나 싶어서요. 다음뷰는 가장 큰 메타사이트라고 봐도 과언이 아닙니다. 그런데 랭킹이라는 것에 수익이 연결되다보니 조금은 과열이 된 부분이 분명 있습니다. 그리고 이것에는 추천을 눌러주느냐 안눌러주느냐도 엄청난 연관이 있기 때문에 이것으로 괜히 욕먹기도하고 시기를 받기도 하고 문제가 생기기도 합니다. 예전에 음식 관련 이벤트가 있었는데 다음뷰 버튼을 퍼가기 해서 추천을 받는것 때문에 엄청난 파문이 있기도 했었죠.  개인적으로는 다음뷰 버튼이 딱 고정된 위치에서만 뜨고 다른곳에 뜰 수 없어야 한다고 생각하는데요. 그래야 그나마 공정하기 때문입니다. 다만, 다음뷰 관리자도 퍼가기에 대해서는 관대하고 문제가 전혀 없다는 입장이기 때문에 다음뷰의 변화를 기대하긴 어렵습니다.  블로그의 글의 첫 문단에 추천을 해달라는 다음뷰 버튼들을 심심치 않게 볼 수 있는데요. 이 버튼을 여기 둘 수 밖에 없는 상황이 되었습니다. 좋은글도 알리지 않으면 읽히지 않아서 필요없는 글이 될 수 있습니다. 사람들이 볼 수 없다면 의미가 없다는 것 이죠.  자 그렇다면 다음뷰 추천 버튼을 퍼가기를 해서 본문에 상단에 올려보도록 하겠습니다. 이것은 굳이 설명하지 않더라도 대부분 아실겁니다. 다음뷰 사이트에 가서 자신의 글의 퍼가기를 눌러서 코드를 글에 넣으면 됩니다. 물론 이것을 설명하려고 지금 글을 적는것은 아닙니다.  이런 일련의 과정을 자동화 하겠습니다. 아래 내용을 따라하면 자동으로 모든글에 다음뷰 추천버튼이 일정한 위치에 모두 뜨게 됩니다. 물론 이제는 추천은 양심에 맡겨야 합니다. 정말 괜찮은 글에만 판단하여 추천을 해줘야하기 때문이죠. 그래서 배경으로 글도 하나 넣어보았습니다.  "좋은 글이면 추천해주세요" 라고 넣어보겠습니다. 좋은글이면 추천 그게 아니라면 그냥 넘어가는 것이죠.  제 경우에 본문 맨 하단에 다음뷰 버튼을 가장 작게 해서 한쪽 구석에 두었는데 글을 잘 보신분들도 이 버튼을 찾지 못해서 추천해주고 싶어도 추천을 못해줬습니다. 실제 제가 이렇게 적는 이유는 추천버튼이 어디에 있냐고 어느분이 물어본적이 있기 때문입니다. 이제 상단에 올려두었으니 아무래도 추천의 갯수에 변화가 있을겁니다.  실제로 이것을 적용하고 이번달 (지금 2월 2일) 에 추천이 10개였던것이 86개로 갑자기 확 늘어낫네요.  이 팁을 적용하는것이 껄꺼럽거나 이렇게 까지 해야하나? 라고 생각하는분도 분명 있을겁니다. 저역시도 그랬기 때문 입니다. 이것은 모든 블로거들이 마찬가지 일겁니다. 하지만 좋은글은 알려야한다는것과 추천을 하고 싶은데 찾기 어려운 위치에 놓아서 추천을 할 수 없는것을 보호하기 위해서 하는 조취이니 필요하신분만 적용하시기 바랍니다.


제 블로그의 상단을 보면 이미지 바로 위에 다음뷰 추천버튼이 올려져 있고 배경으로 "좋은 글이면 추천해주세요" 라는 글을 볼 수 있습니다. 이것은 다음뷰 추천 위젯 퍼가기를 통해서 넣은것이 아닙니다. jquery 로 자동화되어서 올라갑니다. 코드를 넣어주면 모든글에 이렇게 추가가 되며, 코드를 제거하면 모든글에서 다시 제거가 됩니다.

이제부터 본문의 맨 첫번째 이미지 바로 위에 다음뷰 추천버튼과 배경을 자동으로 표기하는 부분을 적용해보겠습니다.



다음뷰 추천 버튼, 자동으로, 옮기기, 블로그팁, IT, blog, tips, 팁,이 글을 적기 전에 고민을 많이 했습니다. 정말 이렇게 까지 해야하나 싶어서요. 다음뷰는 가장 큰 메타사이트라고 봐도 과언이 아닙니다. 그런데 랭킹이라는 것에 수익이 연결되다보니 조금은 과열이 된 부분이 분명 있습니다. 그리고 이것에는 추천을 눌러주느냐 안눌러주느냐도 엄청난 연관이 있기 때문에 이것으로 괜히 욕먹기도하고 시기를 받기도 하고 문제가 생기기도 합니다. 예전에 음식 관련 이벤트가 있었는데 다음뷰 버튼을 퍼가기 해서 추천을 받는것 때문에 엄청난 파문이 있기도 했었죠.  개인적으로는 다음뷰 버튼이 딱 고정된 위치에서만 뜨고 다른곳에 뜰 수 없어야 한다고 생각하는데요. 그래야 그나마 공정하기 때문입니다. 다만, 다음뷰 관리자도 퍼가기에 대해서는 관대하고 문제가 전혀 없다는 입장이기 때문에 다음뷰의 변화를 기대하긴 어렵습니다.  블로그의 글의 첫 문단에 추천을 해달라는 다음뷰 버튼들을 심심치 않게 볼 수 있는데요. 이 버튼을 여기 둘 수 밖에 없는 상황이 되었습니다. 좋은글도 알리지 않으면 읽히지 않아서 필요없는 글이 될 수 있습니다. 사람들이 볼 수 없다면 의미가 없다는 것 이죠.  자 그렇다면 다음뷰 추천 버튼을 퍼가기를 해서 본문에 상단에 올려보도록 하겠습니다. 이것은 굳이 설명하지 않더라도 대부분 아실겁니다. 다음뷰 사이트에 가서 자신의 글의 퍼가기를 눌러서 코드를 글에 넣으면 됩니다. 물론 이것을 설명하려고 지금 글을 적는것은 아닙니다.  이런 일련의 과정을 자동화 하겠습니다. 아래 내용을 따라하면 자동으로 모든글에 다음뷰 추천버튼이 일정한 위치에 모두 뜨게 됩니다. 물론 이제는 추천은 양심에 맡겨야 합니다. 정말 괜찮은 글에만 판단하여 추천을 해줘야하기 때문이죠. 그래서 배경으로 글도 하나 넣어보았습니다.  "좋은 글이면 추천해주세요" 라고 넣어보겠습니다. 좋은글이면 추천 그게 아니라면 그냥 넘어가는 것이죠.  제 경우에 본문 맨 하단에 다음뷰 버튼을 가장 작게 해서 한쪽 구석에 두었는데 글을 잘 보신분들도 이 버튼을 찾지 못해서 추천해주고 싶어도 추천을 못해줬습니다. 실제 제가 이렇게 적는 이유는 추천버튼이 어디에 있냐고 어느분이 물어본적이 있기 때문입니다. 이제 상단에 올려두었으니 아무래도 추천의 갯수에 변화가 있을겁니다.  실제로 이것을 적용하고 이번달 (지금 2월 2일) 에 추천이 10개였던것이 86개로 갑자기 확 늘어낫네요.  이 팁을 적용하는것이 껄꺼럽거나 이렇게 까지 해야하나? 라고 생각하는분도 분명 있을겁니다. 저역시도 그랬기 때문 입니다. 이것은 모든 블로거들이 마찬가지 일겁니다. 하지만 좋은글은 알려야한다는것과 추천을 하고 싶은데 찾기 어려운 위치에 놓아서 추천을 할 수 없는것을 보호하기 위해서 하는 조취이니 필요하신분만 적용하시기 바랍니다.


1. 먼저 다음뷰를 먼저 보이도록 활성화 합니다. 기본형을 하셔도 되고 버튼형을 하셔도 상관은 없습니다.




<head>

     <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

</head>

2. 노란색으로 표기한 코드를 skin.html의 <head></head> 사이에 넣어 줍니다. (라이브리를 쓰고 계시다면 이부분은 생략해도 됩니다.)




</s_t3>

<script type="text/javascript">
    $('.article img:first').before($('.blogger-news-widget'));
</script>

</body>
</html>

3. 노란색으로 표기된 코드를 복사 한 뒤 skin.html 의 </body> 바로 앞에 붙여넣기 합니다.






.blogger-news-widget {
    background: url("http://cfile10.uf.tistory.com/image/123440504F2A62A6294E89") no-repeat scroll center -4px transparent;
    padding: 47px 0 20px 0;
}

4. 위 코드를 복사 한 뒤, style.css 의 맨 하단에 추가해 줍니다. 스타일은 원하는 스타일이 있다면 수정하셔서 쓰셔도 됩니다.





추가 팁//

만약에 이미지 2번째나 3번째 위에 나와야 한다면 아래 내용을 따라 주세요.


$('.article img:eq(1)').before($('.blogger-news-widget'));


위 설명한 코드에서 </body> 위에 넣어야하는 코드를 위와 같이 바꿔주세요. 노란색 부분 숫자는 떠야하는 이미지의 순번입니다. 참고로 순번은 0 부터 시작합니다. 두번째 이미지 앞에 다음뷰 추천버튼이 나타나야 한다면 위 코드에 숫자를 1을 넣어주면 되겠죠.

신고

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

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

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

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 아린. 2012.02.03 07:25 신고

    멋지십니다... 역시 씨디맨님;;; ㄷㄷㄷㄷ

    perm. |  mod/del. |  reply.
  2. 핑구야 날자 2012.02.03 08:14 신고

    요건 고민해봐야 겠어요 ㅋㅋ

    perm. |  mod/del. |  reply.
  3. RHYTHM|동글이 2012.02.03 09:53 신고

    다음뷰가 수익을 주나요?ㄷㄷ

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.02.12 22:48 신고

      순위에 들면 좀 줍니다. 근데 순위가 뒤로밀리면... 좀 적지요. ㅋ;

      perm. |  mod/del. | 
  4. 최준범 2012.02.03 19:44 신고

    씨디맨님 블로그에 들어오면 습관적으로(?) 손가락을 클릭하곤 하는데 앞으로는 좋은글에만 추천해야겠네요 ㅋㅋㅋㅋㅋㅋ

    perm. |  mod/del. |  reply.
  5. Jogohome 2012.02.04 18:37 신고

    적용완료했습니다. ^^ 오~ 감사합니다.
    엔돌슨님꺼 보면서 궁금했는데...
    쉽게 잘 적용했습니다.
    노펫.

    perm. |  mod/del. |  reply.
  6. 노지  2012.02.04 20:25 신고

    두번째 이미지 위에 오도록 설정은 못하나요...?

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.02.12 22:58 신고

      $('.article img:eq(1)').before($('.blogger-news-widget')); 이렇게 넣어주시면 2번째에 뜹니다. ^^

      perm. |  mod/del. | 
  7. 연애가중매 2012.02.08 19:57 신고

    안녕하세요. 언제나 좋은내용 잘보고 갑니다.
    씨디맨님 혹시 이런 부분을 활용해서 애드센스도 응용이 가능할까요?

    perm. |  mod/del. |  reply.
  8. lbyjhk 2012.02.13 21:17 신고

    저는 이런 부분에 문외한인지라 ..
    애드센스 운용을 어찌해야할지 꼭좀 알려주시면 .. 도움이 될 것 같습니다^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.02.14 03:08 신고

      애드센스를 div로 감싸서 스킨의 본문 상단이나 하단 아무곳에나 일단 둡니다.

      <script type="text/javascript">
      $('.article img:first').before($('.blogger-news-widget'));
      </script>

      위 설명부분에서 이 부분을

      <script type="text/javascript">
      $('.article img').after($('.애드센스가있는div이름'));
      </script>

      이렇게 바꿔주시면 됩니다. 애드센스가 있는 div이름 부분은 스킨에 넣어주신 그 애드센스의 div 이름을 넣어주시면 되구요.

      이렇게 하면 모든 이미지 바로 아래에 구글광고가 나오게 됩니다.

      perm. |  mod/del. | 
  9. 연애가중매 2012.02.15 11:46 신고

    좋은정보로 도움을 주셔서 너무나 감사합니다.
    잘적용했습니다.
    중간에 문제가 있어서 많이 버벅였지만, ID가 아니라 CLASS로 적용하니 잘되네요.
    다시한번더 감사의 말씀 드립니다.

    perm. |  mod/del. |  reply.
  10. 하얀잉크 2012.02.17 13:52 신고

    생각해보면 저 역시도 글에 집중하느라 좋은 글인데도
    클릭하지 않고 나온 경험이 많네요. 괜찮은 툴인데요 ^^

    perm. |  mod/del. |  reply.
  11. 백마탄환자 2012.03.11 11:38 신고

    저는 적용하니까 위젯의 위치는 정상적으로 나옵니다.
    LightTT 설정한 상태로 파폭에서 위젯을 클릭하니까
    추천이 안 되고 아래 나오는 이미지가 팝업으로 떠버리는데요?

    해결방법 좀 가르쳐주세요.

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.03.11 16:25 신고

      이미지 확대보기나 이미지 관련된 플러그인을 적용해두셨다면 해지하셔야해요.

      perm. |  mod/del. | 
    • 백마탄환자 2012.03.11 16:51 신고

      이미지 확대 뿐만 아니라 파일 업로드 링크 바로 위에
      단추가 생기면 추천이 안 되고 파일이 다운로드가 되거든요 -_-;

      perm. |  mod/del. | 
    • 씨디맨 2012.03.11 17:01 신고

      페이지 주소를 알려주실 수 있나요 ?

      perm. |  mod/del. | 
    • 백마탄환자 2012.03.11 18:32 신고

      http://mame32plus.tistory.com/246

      위 페이지 주소이고
      파이어폭스 10에서 그런 현상이 있고
      크롬 17이나 익스에서는 추천은 되는데
      마우스를 다음뷰 버튼에 오버하면 첫번째 파일에
      배경색이 바뀌면서 선택되는 현상이 있습니다.

      perm. |  mod/del. | 
    • 씨디맨 2012.03.11 18:39 신고

      원인은 알아냈는데요. 해결하려면 좀 생각을 해봐야겠네요.

      이렇게 되는 이유는

      파일 다운로드 하는 부분도 하나의 div 내에 있는데요.

      그림 바로 위에 뷰추천 버튼이 오게 하는 이 코드는 그림을 구분해서 위로 올립니다.

      근데 그 그림이 하나의 div 내에 있으니 그 div 내로 들어가버리네요.

      뷰추천

      파일다운로드


      이런식으로 되어야하지만


      파일다운로드 div

      뷰추천

      파일다운로드 링크


      이런식으로 걸쳐져 버려서 뷰추천을 누를 때 파일 다운로드 링크도 함께 눌리게 되네요.

      이걸 구분하려면 jquery 에서 대상을 구분해서 상위에 파일이나 이미지링크가 걸려 있는 경우 그 위로 다시 올리는 작업을 해줘야할듯해요.

      실험을 좀 해봐야해서 이건 나중에 해결방법을 올려보겠습니다. 일단은 아래쪽 팁인 이미지 순번을 바꾸는 방법에서 다른 방법을 써야할듯합니다. 또는 안보이는 흰색이미지를 본문에 추가해주셔서 임의로 뷰추천 버튼의 위치를 변경할 수 있습니다.

      perm. |  mod/del. | 
    • 백마탄환자 2012.03.11 18:44 신고

      흐흐, 어느정도 예상은 했지만 제가 손을 댈 수 없는 분야네요. ^^;
      일단은 뭐, 그냥 있는대로 이미지를 추가하는 방식으로 쓰고
      차후에 수정되길 기대하겠습니다~
      답변 고맙습니다.

      perm. |  mod/del. | 
  12. 모피우스 2012.08.27 00:39 신고

    요런 멋진팁이 있는 줄 몰랐습니다.

    잘 응용하고 갑니다. 감사합니다.

    perm. |  mod/del. |  reply.
  13. 신진대사 2012.11.05 21:59 신고

    고맙습니다~ 덕분에 달았습니당 ㅎㅎㅎ

    perm. |  mod/del. |  reply.
  14. 감사합니다.! 2012.11.17 13:43 신고

    감사합니다 ㅋㅋ..

    그런데요 그 좋은글이면 추천해주세요 그

    http://cfile10.uf.tistory.com/image/123440504F2A62A6294E89

    소스 코드 보고서 들어가봤는데

    좋은 글이면 추천해주세요 있더라고요.. 이거 말고 다른걸로는 못하는건가요??,

    예를들어서 보기전에 추천해주세요 라등가... 직접 만들어야하나요? 만든다면 대강 포토샵이나 그림판으로하고.. 사이트는.. 어떻게하는것인지??

    perm. |  mod/del. |  reply.
  15. 감사합니다.! 2012.11.17 13:59 신고

    저기.... 글보다 위에 있게 할려고하면어떻게하나요..

    이미지 맨 위에가아닌

    포스트의 완전 맨위.

    그 포스트의 글자들의 맨위..

    letter:first 해봣는데 안돼요 ㅋㅋㅋㅋㅋ

    perm. |  mod/del. |  reply.
  16. 묘한오빠 2012.12.05 02:09 신고

    저도 씨디맨님 덕분에 다음뷰 위젯을 상단으로 옮기는 것을 적용해 봤습니다.
    저의 경우는 두번째 그림 위에 보이도록 했습니다.

    그런데 두번째 이미지가 전체 크기에 맞지않게 그림 하나만 옆으로 밀리는 현상이 있습니다.
    2번째와 3번째 그림에서 정렬이 안되고 나머지는 정렬이 잘되는데 제가 성격이 그런가 거슬려서 여쭤봅니다. ^^

    여러장의 이미지중 하나만 앞으로 밀리니 참 웃기긴 합니다 ^^

    perm. |  mod/del. |  reply.
  17. 스타플래닛 2013.10.22 13:53 신고

    블로그에 적용해 봤는데 너무너무 신기하네요.
    이런 방법을 쉽게 적용할 수 있다니 감사합니다.
    들어와보니 예전에 레뷰 사이트에서 많이 보던 블로그네요.^^:D

    perm. |  mod/del. |  reply.
  18. ITblogger 2014.04.24 10:04 신고

    :D

    이런 방법이 있었구낭... 핫..!!
    블로그에 적용해보고 댓글 남겨 드립니다.
    유용한팁 잘 보고 갑니다. 감사해요 ^^

    perm. |  mod/del. |  reply.
  19. 2014.12.21 15:21

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2014.12.21 17:40 신고

      id 값으로 되어있어서 위 코드 내용으로 위치 옮기는것으로는 해결이 안되구요.

      다음에서 코드를 제공을 해줘야만 가능 합니다. 지금 제가 알기로는 건의는 많이 들어간걸로 아는데 아직 코드를공개하지 않은터라 그부분이 안되는걸로 압니다.

      즉 위치를 아예 조정하는것은 가능하지만, 아래것을 두고 위에도 넣는것을 위와같은 방법으로 자동화는 안됩니다. 코드가 공개되면 그부분을 상단에 일일이 넣어줘야만 합니다.

      perm. |  mod/del. | 
    • 2014.12.21 20:31

      비밀댓글입니다

      perm. |  mod/del. |