다음뷰가 서비스 종료되면서 그 자리를 '공감'이 차지하게 되었습니다.


    이제 슬슬 다음뷰 버튼들도 공감버튼으로 대체가 될텐데요, 손가락은 구걸했었는데 공감이라고 못할 것 없습니다!

     - 티스토리 다음뷰 손가락 버튼 자리 옮기는 방법 (손가락 구걸 방법이 소개되어있습니다.)



    초기에는 공감버튼에 선택자를 부여해주지 않아서 CSS로 공감버튼 구걸을 하기에 조금 어려움이 있었는데, 언제부턴가 선택자가 부여가되어서 편하게 적용할 수 있게 되었습니다.


    다만 블로그 분위기를 위해 손가락 구걸보다는 점잖은 스타일로 해봤습니다.


    반응형 스킨 모바일에서는 아래와 같이 나타납니다.




    .


    공감 구걸하기

    간단히 HTML/CSS편집에서 CSS아래쪽에 아래 내용을 붙여넣으시면 됩니다.

    .daum_like_wrapper {

    float: right;

    width: 320px;

    position: relative;

    margin-right: 30%;

    }

    .daum_like_wrapper:before {

    white-space: pre;

    content: '잘 보셨나요? 도움이 되셨다면 \a공감 한번 부탁드립니다. ▶';

    position: absolute;

    top: 1.2em;

    left: -6em;

    text-align: right;

    }

    @media screen and (max-width:620px) {

    .daum_like_wrapper {

    float:none;

    width:100%;

    position: relative;

    margin-right:0;

    padding-top:3.5em;

    }

    .daum_like_wrapper:before {

    white-space: pre;

    content: '잘 보셨나요? 도움이 되셨다면 \a공감 한번 부탁드립니다. ▼';

    position:absolute;

    top: 0;left: 0;right:0;

    text-align: center;

    padding-top:1em;

    }

    }


    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 가온누리™
      2014.08.09 08:43 신고

      좋은 팁이네요.
      제 블로그에도 적용했습니다.
      유익한 정보가 많아서 제 블로그가 알차지는 느낌입니다.
      감사합니다.^^

    • BlogIcon 이바구™
      2014.08.20 14:58 신고

      선택자가 부여되었다는 것은 이동할 수도 있다는 것인가요?
      애타게 기다리고 있습니다.

      • BlogIcon 뭐하라
        2014.08.20 15:06 신고

        네 이전과 같은방식으로 이동가능합니다. 그런데 공지블로그 댓글중에 공감버튼은 사용자경험때문에 정책상으로 이동은 하면 안된다고하네요

    • BlogIcon 티슈페이퍼
      2014.09.09 22:37 신고

      저엉말 죄송합니다만~ ㅜㅜ
      css 아래에 넣으라는...말을 도저히...이해를 못하고 있습니다.
      조금만 더 자세히 설명해주시면 안될까요? ^^

      • BlogIcon 뭐하라
        2014.09.09 22:47 신고

        말그대로 HTML/CSS 편집에 들어가셔서

        CSS부분의 맨 아랫줄에 추가로 붙여넣으시면됩니다.

    • BlogIcon 티슈페이퍼
      2014.09.10 01:41 신고

      ^^* 감사합니다! 방금 해봤는데 잘되요 ~~

    • BlogIcon Antirust
      2014.10.05 19:56 신고

      잘 보았습니다. UX때문에 공감버튼 이동이 안된다면, 아예 안 보이게 할 순 없나요?
      발행을 하고도 공감버튼을 안 보이게 할 수 있는 방법이 있는지 궁금합니다.

      • BlogIcon 뭐하라
        2014.10.05 20:57 신고

        css에 다음줄을 추가하시면 됩니다.
        .daum_like_wrapper {display:none;}

    • BlogIcon 오렌지수박
      2014.10.23 01:18 신고

      혹시 기존에 본문에 새로 추가했던 다음뷰 버튼을 일괄적으로 나타나지 않게 하는 방법도 있을까요? 일반적으로 글 맨 하단에 나오는 다음뷰 손가락 버튼은 지금 모두 공감하트로 바뀌었는데, 본문에 따로 추가했던 다음뷰 손가락 버튼은 그대로라 모두 일일이 수정을 해야 해서요. 댓글을 보다 혹시나 방법이 있지 않을까 해서 여쭈어봅니다.

      • BlogIcon 뭐하라
        2014.10.23 09:10 신고

        다음뷰를 수동으로 추가하셨을때 id값이나 class값이 있을겁니다.
        전 그값이 뭔지를 모르겠지만..
        예를들어 <div id="daum_view">~~~</div>
        이런식으로 추가하셨다면
        #daum_view {display:none;}
        를 css에 추가하시면 되고,
        <div class="daum_view">~~~</div>였다면
        .daum_view {display:none;}
        이렇게 추가하시면됩니다

      • BlogIcon 오렌지수박
        2014.10.23 09:32 신고

        아..제가 추가한 값은 조금 다르네요.

        <iframe src="http://api.v.daum.net/widget2?nid=53487126" frameborder="no" width="76" allowtransparency="" scrolling="no"></iframe>

        이거인데 이건 어떻게 해야 할까요?

      • BlogIcon 뭐하라
        2014.10.23 09:57 신고

        iframe[src="http://api.v.daum.net/widget2?nid=53487126"]{display:none ;}
        하면 될 것 같네요 ^^

        확인해보니 글마다 nid가 다른것 같네요iframe[src^="http://api.v.daum.net/widget"]{display:none ;}
        하시면 될겁니다

      • BlogIcon 오렌지수박
        2014.10.23 10:18 신고

        안 그래도 각 글마다 nid 숫자가 달라서 지금 글마다 들어가서 nid숫자 보고 다시 나와서 css에 일일이 추가하고 있었는데ㅎㅎ 우와 알려주신 방법으로 하니까 따로 추가한 다음뷰 위젯이 전부 다 안나오네요. 네모난 손가락 버튼 말고, 더 작은 추천 문구만 있던 위젯도요. 정말 감사합니다!^^

    • BlogIcon 케일럽
      2015.01.20 15:49 신고

      저도 하트 구걸좀 시작해 봐야 겠네요~

      근데 진작 소개해주신 뭐하라 님은 사용안하시네요... 특이한 이유라도 있으신지요?

      • BlogIcon 뭐하라
        2015.01.20 15:55 신고

        아 애드센스에서 컨텐츠와 혼동되는광고 경고를 받아서 혹시나하고 내렸었네요~
        공감구걸때문같지는않지만..
        구걸한다고 그닥 공감해주는거같지도않고..해서 필요성을 못느껴 다시달지 않고있습니다

    • BlogIcon 빅보스.
      2015.11.09 17:57 신고

      안녕하세요. 포스팅 보고 문구를 잘 적용할 수 있었습니다. 감사합니다.
      문구 바로 위에 이미지를 넣고 싶은데요. 혹시 방법이 있나요?

      • BlogIcon 뭐하라
        2015.11.09 22:29 신고

        content:부분에
        '내용' 대신 url('이미지주소') 넣으시면됩니다.

        예: content:url("/favicon.png")

    • BlogIcon 빅보스.
      2015.11.10 12:37 신고

      말씀하신 대로 했더니 이미지가 공감버튼을 가려서 실패했네요. 그래도 친절하게 답변해주셔서 고맙습니다. 즐거운 하루 보내세요 :)

    • BlogIcon Hilda&Alex
      2016.01.04 11:08 신고

      처음 해보는데 설명 해 주신대로 하니 잘 되었어요. 감사합니다

    • BlogIcon 소주랑
      2016.02.17 15:05 신고

      허허허 구걸 관련 포스팅인데 정작 본인은 구걸은 안 하시네요. 공감 한번 눌렀습니다. 허허허허허허.
      예전에 티스토리 할 때에는 스크립트랑 css 많이 만졌는데, 요즘은 그거 귀찮더군요. :^)

    • BlogIcon 엄지아빠
      2016.08.02 09:54 신고

      감사히 잘 사용했습니다~

    • BlogIcon veneto
      2016.12.25 16:39 신고

      감사합니다~ 제스킨에서는 위치를 조금 수정해야했는데 추가할수 있어서 다행이네요!

티스토리 툴바