정보/블로그 운영팁

티스토리 공감 구독 버튼 꾸미기: 가운데 정렬, 말풍선 강조

아미넴 2020. 12. 11.

오늘은 공감 버튼과 구독하기 버튼을 강조하기 위해 꾸며보도록 하겠습니다. 북 클럽에서 적용한 내용이므로 다른 스킨에서 적용 시 다른 부분이 있을 수 있으니 안 되시면 댓글 남겨 주세요.

 

목차

     

    공감 구독 버튼 가운데 정렬

    다음과 같이 왼쪽 정렬되어 있는 버튼들을 가운데로 이동시켜 보겠습니다.

     

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭 합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데 CSS 탭을 선택합니다.

     

    아래 CSS코드를 붙여넣기만 해주시면 됩니다.

    .container_postbtn {
    	text-align: center;
    }
    .container_postbtn button {
    	vertical-align: top !important;
    }
    .container_postbtn .postbtn_like {
    	float: none !important;
    	display: inline-block;
    }

     

    적용하면 다음과 같이 가운데로 이동을 합니다.

     

     

    공감 구독 버튼 말풍선으로 강조하기

    시선을 사로잡는 멘트를 이용하여 공감 구독 버튼을 클릭하도록 유도할 예정입니다.

    가만히 놔두는 것 보다는 효과가 있을 것으로 기대해 봅니다.

    위치 찾기

    빨간 박스 영역에 말풍선을 넣어보겠습니다.

     

    본문 내용 및 공감 구독 버튼은 치환자로 생성되므로 생성 이후 말풍선을 끼워 넣는 방법을 사용해야 합니다.

    $('.container_postbtn').children().eq(0);

    container_postbtn 클래스로 찾은 엘리먼트 하위에 첫번째 자식 엘리먼트를 가져오면 됩니다.

     

    그럼 다음과 같이 공감 구독 버튼이 선택됨을 알 수 있습니다.

     

    말풍선 끼워 넣기

    jQuery의 insertBefore 메서드를 이용하여 말풍선 태그를 끼워넣는 코드를 작성해 보겠습니다.

    $('말풍선 태그').insertBefore($('.container_postbtn').children().eq(0));

    이런 식으로 작성하면 될 것 같네요.

     

    HTML 탭으로 이동합니다.

     

    body 태그 안쪽 맨 하단에 좀 더 구체적으로 작성해 보겠습니다.

     

    그럴듯한 멘트와 함께 말풍선 태그를 작성하였습니다.

    <script>
      $(document).ready(function() {
        var pleaseComment = "의미있게 보셨다면<br>하트 한 번만<br>꾹 눌러주세요 :)";
        var bubbleTag = '<div class="like_bubble"><span class="bubble_image"></span><div class="inner">'+pleaseComment+'</div></div>';
        $(bubbleTag).insertBefore($('.container_postbtn').children().eq(0));
      });
    </script>

    아직 CSS 스타일을 먹이기 전이라 모양이 나오진 않겠죠.

     

    하나하나 보도록 하겠습니다.

     

    CSS 스타일 적용하기

    먼저 말풍선 위치를 잡기 위한 박스를 만듭니다.

    .like_bubble{
        width: 152px;
        height: 165px;
        margin: auto !important;
    }

     

    가운데 정렬된 사각형 박스가 만들어 졌습니다.

     

    다음으로 말풍선을 위한 태그입니다.

     

    먼저 말풍선 폰트가 필요합니다.

    fa-solid-900.zip
    0.51MB

    위 폰트를 다운 받아서 적절한 위치에 압축을 해제 합니다.

    무료 폰트이므로 안심하고 사용하셔도 됩니다.

     

    관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동합니다.

     

    추가 버튼을 클릭합니다.

     

    압축 해제한 4개 파일을 선택합니다.

     

    다음과 같이 추가되었으면 성공입니다.

     

    이어서 CSS 코드를 작성해 보겠습니다.

    @font-face{
        font-family:"Font_Awesome_5_Free";
        font-style:normal;
        font-weight:900;
        src:url(./images/fa-solid-900.woff2) format("woff2"),
            url(./images/fa-solid-900.woff) format("woff"),
            url(./images/fa-solid-900.ttf) format("truetype"),
            url(./images/fa-solid-900.svg#fontawesome) format("svg");
    }
    @keyframes blinker {
        50% {
            opacity: 0.4;
        }
    }

    말풍선 아이콘으로 사용할 폰트를 임포트 하였고 애니메이션 효과를 주기 위한 코드도 작성했습니다.

    CSS 탭으로 이동하여 복사 붙여넣기 하시면 됩니다.

     

    이를 활용하여 말풍선 코드를 작성해 보겠습니다.

    .like_bubble span{
        color: #ff4d12;
        position: absolute;
        font-size: 10em;
        font-weight: 900;
        z-index: 0;
        animation: blinker 3s linear infinite;
        display: flex;
    }
    .bubble_image {
    	display: inline-block;
    	font-style: normal;
    	line-height: 1;
    	font-family: "Font_Awesome_5_Free";
    }
    .bubble_image:before {
        content: "\f27a";
    }

    Font Awesome 5 Free 폰트에서 유니코드 \f27a가 말풍선입니다.

    이 말풍선 아이콘 크기를 10em으로 키우고 애니메이션 효과를 부여했습니다.

     

    적용하면 다음과 같이 말풍선이 자리가 잡히게 됩니다.

    이제 내부에 멘트만 수정하면 되겠네요.

     

    계속 작성해 보겠습니다.

    .like_bubble .inner{
      position: absolute;
      z-index: 1;
      padding: 22px 20px;
      font-size: 1em;
      line-height: 1.7em;
      color: #fff;
    }

    이번에는 간단합니다.

    포지션을 absolute로 하고 적절히 패딩을 주면 됩니다.

    그리고 글자색과 글자 크기, 줄 높이 등도 조절해 주었습니다.

     

    최종적으로 보시는 바와 같이 잘 적용된 것을 확인할 수 있습니다.

     

     

    결과 및 마무리

    깔끔하게 잘 적용된 것 같습니다.

    애니메이션도 잘 동작하네요.

     

    궁금하신 점 있으시면 댓글로 남겨 주세요 :)

     

    다음 기능도 한 번 추가해 보세요 ㅎㅎ

    티스토리 공감 클릭 시 고마움 표시하기

     

    티스토리 공감 클릭 시 고마움 표시하기

    공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다. 복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다. 목차 토스트 기능 만들기 사실 토스트 기능을 좀 더 전파하고

    sangminem.tistory.com

     

    반응형

    댓글43

    • 이전 댓글 더보기
    • 어나더머머 2020.12.12 00:39 신고

      좋습니다~~
      답글

    • 이웃언니 2020.12.12 09:25 신고

      이거 보고 나도 해봐야게 했다가~~
      내리면 내릴수록~읭????읭????😟😕😥😵
      뭔가 어렵다~~
      답글

    • 카누라떼 2020.12.12 09:42 신고

      오 이거 저도 해보고싶네요 ㅎㅎ
      답글

    • 카누라떼 2020.12.12 09:45 신고

      음 너무어려운데...ㅠㅠ
      답글

    • 감사합니다. 잘 적용했습니다.
      그런데 개발자님처럼 글씨를 흰색으로 바꾸려면 어디를 건드려야 할까요?
      답글

      • 아미넴 2020.12.12 12:48 신고

        아 죄송합니다 ㅠㅠ .like_bubble .inner에 내용을 조금 빠뜨렸었네요!
        수정했으니 다시 확인해보세요 ㅎㅎ

      • 아미넴 2020.12.12 12:59 신고

        파파엘님 블로그 방문해서 확인해 보니 버튼과 약간 겹치네요!
        그럴 때는 .like_bubble의 height를 175px 정도로 바꿔보세요~ 그럼 좀 괜찮아 질거예요 ㅎㅎ

        근데 반응형 스킨이라서 너비가 바뀌면 포지션도 좀 바뀌네요..
        @media (max-width: 767px) 와 같은 구문 넣어서 너비마다 따로 설정해 줄 필요도 있어 보입니다 ㅠ

    • 요즘아빠 :) 2020.12.12 13:28 신고

      정말 감사합니다~이렇게 따로 포스팅 올려주셔서 많은 도움이 되네요 ㅎㅎ 앞으로도 좋은 정보 많이 올려주세요 :)
      답글

    • 달고나™ 2020.12.12 14:17 신고

      기억하고 있다가 시간날 때 적용해볼게요^^ 감사합니다.
      답글

    • yeah님 2020.12.19 15:56 신고

      티스토리 한지 얼마안되서 이런거 잘모르는데.. 역시 꿀정보 감사합니다 ㅎㅎ
      답글

    • Danny' 2021.02.15 17:15 신고

      #1 스킨 CSS가 적용이 안되네용 센터로 안옴겨 집니다.
      그리고 글쓴이 님의 초록 글씨체와 종모양은 어떻게 변경 하는건가요 ㅠㅠ
      답글

      • 아미넴 2021.02.15 21:46 신고

        방금 #1 스킨에서 테스트 해 본 결과 가운데로 잘 옮겨집니다. 아마 잘못하셔서 그런 걸 수도 있으니 차근차근 읽어 보고 다시 해 보세요~

        종 모양으로 변경하는 작업은 단순하게 설명이 불가능하여 댓글로 알려드리기 어려운 점 양해 부탁드립니다 ㅠ

    • Danny' 2021.02.16 13:30 신고

      #1 스킨에서 공감 부분이 가운데로 움직여 지지는 않고 말풍선이 움직이는데요?
      답글

      • 아미넴 2021.02.16 19:46 신고

        https://armynem.tistory.com/2
        #1 스킨에서 적용한 테스트 블로그입니다. 혹시 다른 문제가 있나 해서 처음부터 끝까지 다시 적용해 보았는데 잘 되네요.

        도움을 받고 싶으시면 구체적으로 질문 부탁드릴게요.

    • Danny' 2021.02.17 11:08 신고

      먼저 구독하기 버튼부터 다르게 생겼는데;; 이상합니다. 목차라던지 기타 다른 것들은 순서대로 따라하면서 완료 했는데 #1스킨의 공감박스 부분이 안움직여 지는 것도 있고 아미넴님 테스트 블로그에 있는 공감박스 옆에 구독하기 버튼은 제게는 없는 구성입니다.
      답글

      • 아미넴 2021.02.17 19:12 신고

        본인 블로그에 로그인 한 상태면 구독하기 버튼이 보이지 않는 것이 정상이에요. 저도 제 블로그에는 구독하기 버튼이 보이지 않습니다.

        제가 게시물 그대로 복사 붙여넣기 해서 적용한 것이

        https://armynem.tistory.com/2

        이 게시물이거든요. 어느 부분을 놓치신 건지는 지금 말씀만 듣고는 알기가 어려운데 데니님도 테스트 블로그 따로 하나 만드셔서 적용 후 알려 주시면 잘못하신 부분을 확인해 볼 수는 있을 것 같아요~

    • Danny' 2021.02.17 22:39 신고

      네 알겠습니다. 번거롭게 해드려 죄송합니다 ㅠ
      답글

    • ( ˃ᴗ˂ ) 2021.03.25 19:48 신고

      질문있습니다. 공감버튼을 https://bssow.tistory.com/241 여기 블로그처럼 수정하는 방법을 알수있을까요. 해당 블로그에 코드가 나열되있지만 적용을 시켜보니 블로그가 깨져버리내요... 코드가 잘못되있는거 같은데.. 북클럽 스킨에는 맞지 않는것 같기도 하고... 이미지 넣는 아무리 읽어도 이미지 넣는방법이나 그런게 이해가 되지 않는글이라...
      답글

      • 아미넴 2021.03.25 22:26 신고

        https://miniminem.tistory.com/1

        말씀하신 포스팅 참고하여 그대로 복붙하니까 잘 적용되네요 ㅎㅎ 글에서 제공하는 이미지 파일명도 다시 한 번 확인해 보세요~

    • ( ˃ᴗ˂ ) 2021.03.25 23:11 신고

      저도 일단 하긴 했는데 구독하기 버튼이 사라지고, 하트이미지를 어떻게 넣는지 모르겠어요. 해당 블로그에서 그냥 스샷으로 이미지를 따서 파일 업로드 했는데.. 적용이 안되내요.. 그리고 중앙배치되었던게 왼쪽으로 쏠려버렸내요.. 하 어렵내요..


      https://sadvqe13.tistory.com/11

      도와주세요;; 쓰신분한테 여쭤보려해도 글을 못적게 해놓으셔서...
      답글

      • 아미넴 2021.03.25 23:24 신고

        스샷으로 이미지 뜨는게 아니라 이미지 자체를 다른 이름으로 저장하셔야 하구요.
        .container_postbtn 에 margin: auto; 넣으시면 중앙배치 됩니다.
        참고하세요~

    • ( ˃ᴗ˂ ) 2021.03.25 23:29 신고

      구독하기버튼은 왜사라졌는지 알수있을까요
      답글

      • 아미넴 2021.03.25 23:31 신고

        아 착각하고 계신거 같은데 원래 로그인 된 상태에서 본인 블로그 구독하기 버튼은 보이지 않습니다. 로그아웃 하신 뒤 확인해 보세요.

    • 부자파파 2021.05.02 22:01 신고

      좋은 내용 감사합니다. 근데 여기 블로그 내용 글자가 웨일 브라우저에는 검정색으로 나오는게 꽤 있습니다.
      전 크롬을 주로 쓰긴하는데 크롬에서는 정상인데 웨일 브라우저에서는 글을 제대로 보기 어렵네요.
      답글

      • 아미넴 2021.05.03 19:10 신고

        티스토리 자체 문제이긴 한데 에디터에서 색깔 지정을 하지 않았는데도 가끔 #333333 또는 #000000 HEX 코드에 해당하는 글자색을 직접 먹여버리더군요.
        다크 모드 시 이 글자색을 강제로 흰색으로 바꾸면 다른 글자색까지 영향을 미쳐서 고민이 좀 있습니다.
        해결책은 글마다 색상 HEX 코드를 다 삭제하는 것인데 현재 인기 많은 글을 우선순위로 작업 중에 있습니다.

        그냥 다크모드 시 모든 글자색을 흰색으로 바꾸고 싶다면 dark-mode 클래스의 color 속성에 !important 값을 주시면 됩니다

    • 대단하십니다. 좋은 정보 고맙습니다. 일단은 간단한 중앙 정렬만 시켜놓고 나중에 멘트도 넣어봐야겠네요. 고맙습니다. ^^
      답글

    • 디어영 2021.07.23 11:11 신고

      안녕하세요! 그럼 혹시 다른 모양으로도 가능할까요?! 유니코드 부분만 바꾸면 되는건가요..?!!!
      답글

      • 아미넴 2021.08.02 20:19 신고

        안녕하세요~ 네 다른 모양으로 바꾸셔도 무방합니다 ㅎㅎ

        https://fontawesome.com/v5.15/icons?m=free

        유니코드는 위 링크 참고하세요 :)

    • 걍교쥬 2021.09.24 10:52 신고

      좋은 정보 공유해 주셔서
      정말 감사합니다. ~:->
      답글

    • 소금상식 2022.01.20 03:06 신고

      적용했는데, 북클럽 스킨을 손댄상태라 그런지 하트위에 말풍선꼬리가 위치하지 않는데, 조정가능한가요?! 유니코드는 어떻게 바꾸는걸까요ㅠ_ㅠㅎㅎ너무 어렵습니다.

      답글

      • 아미넴 2022.01.20 18:40 신고

        제가 볼 땐 지금 위치도 괜찮아 보이는데 그래도 위치를 조절하고 싶으시면 .like_bubble 클래스에서 width 사이즈를 조금 늘려보세요.
        적용 가능한 아이콘 유니코드는 아래 사이트에서 확인하실 수 있습니다~
        https://fontawesome.com/v5.15/icons?m=free

    💲 추천 글