본문 바로가기

티스토리스킨/스킨 활용&패치

티스토리 글보기 공감과 구독 안내 말풍선 문구 넣기

반응형




블로그 글보기 하단에 "공감과 구독은 블로거에게 큰 힘이 됩니다" 버블을 달아놓은걸 어떻게 구현하는지 궁금해하는 붙이 있어서 붙이는 방법을 안내해 드립니다.

생초보에게는 조금 번거로운 작업들이 있습니다.

코드 전체를 붙였으니까 잘 모르면 아래 설명 보고 색상과 문구 정도만 바꿔서 붙여쓰면 됩니다.





구독 버튼이 생기면서 네이버 블로그처럼 블로그 이웃을 만들 수 있게되었지만

이 버튼들이 크기가 작아도 너무 작아서 노안인 나한테는 초저녁 하늘의 금성만해 보입니다.


공감 버튼도 작아서 어디 있는지 찾기도 힘든데 그 옆에 구독버튼까지 붙여놓고 알아서 해결해라 뭐 그런...


방문자 없는 하꼬 블로그는 공감과 구독 구걸... 아니 안내라도 해야 눌러주기 때문에...



기본적으로는 공감, 구독 버튼 근처에 붙이는 것이 좋습니다.

동떨어진데 붙여봐야 귀찮게 스크롤해서 눌러줄리가 만무하기 때문에...



붙이는 기본 규칙은 글보기상태, 또는 공감과 구독 버튼이 있는 화면인지를 판단해서

그 안에 내가 원하는 문구를 띄우는 버블 html 코드를 붙여넣고, css로 배치를 잡는 것입니다.



자바스크립트를 사용해야 합니다.


글 내용 출력, 그 아래에 공감과 구독 버튼, 그 아리에 다른글 출력 하는 출력단 전체가 티스토리 시스템에서 치환자 한개([샵샵_article_rep_desc_샵샵])로 출력되기 때문에 skin.html이나 css로 이 근처 이디엔가에 안내 문구를 붙여넣기가 거의 불가능합니다.



스킨 자바스크립트 파일(보통 일반 스킨과 제가 배포하는 스킨은 script.js 파일) 끝에 

(잘 모르면 아래 3줄을 전부 복사해서 script.js 파일 끝에 새줄을 만들어서 붙여넣으면 됩니다.)



* 자바스크립트 코드를 붙일 때 주의사항(2019-10-10 추가된 내용)

-------------------------------------------------------

제가 배포하는 스킨들은 script.js 가 skin.html 하단에 붙어있어서 자바스크립트 코드가 무조건 페이지 로딩 후 실행되기 때문에 script.js 파일 위치에 무관하게 말풍선이 잘 붙지만, 레퍼런스 스킨이나 기타 일부 스킨의 경우 script.js(common.js) 파일이 skin.html 상단에 붙은 경우가 있습니다. 

상단에 붙은 경우 자바스크립트 코드가 html 페이지 로딩 후 실행되도록 


$(function() {

}


로 자바스크립트 실행 코드들이 감싸져 있습니다.


또는, 구 스킨들은 


$(document).ready(function(){

})


요 코드로 감싸져 있습니다.


이런 경우

아래 말풍선 코드를 생성하는 자바스크립트 코드를 위의 즉시 실행함수 안에 ( "{", "}" 사이 ) 넣어주어야 정상적으로 html 코드가 로딩된 후 아래 자바스크립트 코드가 실행되게 됩니다.


위 함수로 감싸져 있는 경우 

맨 아래 "}" 앞에 코드를 붙여넣어주면 됩니다.

-------------------------------------------------------




if($('.container_postbtn').length){
  $('.container_postbtn').prepend('<div class="subscription_bubble"><i class="fas fa-comment-alt"></i><div class="inner">"공감"과 "구독"은<br/>블로거에게<br/>큰 힘이 됩니다.</div></div>');
}



요 코드를 붙여넣고 업로드 합니다.

(업로드 후 웹브라우저 캐시 소거는 필수입니다.)


이렇게 하면 공감과 구독 버튼 앞에 안내 문구 버블이 붙게 됩니다.

위치는 겹쳐지기 때문에 css로 조정해야 합니다.


말풍선 이미지는 배경 이미지를 구해서 "subscription_bubble" 클래스 배경 이미지로 깔아도 되고

제 블로그는 폰트어썸 벡터 아이콘 프리버전을 쓰기 때문에 폰트어썸 벡터 아이콘 중에 말풍선 모양인 아이콘을 배경으로 깔았습니다.

(아래 css에서 :before 가상클래스로 정의한 부분이 폰트어썸 말풍선 아이콘을 배경으로 까는 코드입니다.)



뭘해도 무관합니다.

그냥 사각 박스로 배경색만 주는게 좋으면 그렇게 해도 무방합니다.



아래 css 코드를 그냥 쓰려면

폰트어썸 cdn 링크를 skin.html에 붙여줘야 합니다.

skin.html 상단의 css 링크들이 모여있는 <head></head> 안에 아래 링크를 적당히 붙여넣으면 됩니다.

제 블로그 배포 스킨의 경우 대부분 폰트어썸을 기본으로 쓰기 때문에 skin.html 에서 "fontawesome" 으로 검색해서 아래와 비슷한 인클루드 행이 있으면 이미 링크가 포함되어 있는 것입니다.


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">




현재 보고 있는 블로그에 적용한 말풍선 css 입니다.

(잘 모르면 아래 블록 전체를 복사해서 style.css 맨끝줄에 추가해서 붙여넣으면 됩니다.)


.subscription_bubble{
  width: 220px;
  height: 160px;
  padding: 25px 0 0 0 !important;
  font-size: 1.05em;
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
}
.subscription_bubble i{
  color: #f44336;
  position: absolute;
  font-size: 9em;
  z-index: 0;
  left: 34px;
  top: 38px;
  animation: blinker 4s linear infinite;/*반투명 애니메이션 효과 주기*/
}
.subscription_bubble .inner{
  position: absolute;
  z-index: 1;
  padding: 10px 40px;
  box-sizing: border-box;
}



여기까지 되면 일단 말풍선이 공감과 구독 버튼 위에 적당히 자리를 잡게 됩니다.

문구를 바꾸려먼 위의 자바스크립트 코드의 텍스트 내용을 변경하면 됩니다.




CSS 내용을 추가로 설명하자면 


위 css를 보면 


  animation: blinker 4s linear infinite;/*반투명 애니메이션 효과 주기*/


요게 애니메이션 효과를 주는 css 속성입니다.

"blinker" 라는 이름을 가진 애니메이션 키프레임을 4초간격으로 무한히 반복한다.


제 블로그에서는 50% 반투명이 되었다 돌아오게 해서 심장뛰는거 같은? 느낌이 나게 했습니다.

구글링해서 위아래로 살짝살짝 움직이는 애니메이션을 붙여도 되고 그렇습니다.


위에 추가한 css 아래에 


@keyframes blinker {
50% {
opacity: 0.5;
}
}



을 추가로 넣습니다.

애니메이션 키프레임 정의 코드입니다.


"blinker" 라는 이름을 위에 있는 css에서 가져다 쓰는 것입니다.


이렇게 하면 "subscription_bubble" 클래스를 가진 html 요소가 50% 반투명이 되었다가 돌아오는 과정을 무한히 4초간격으로 반복하게 됩니다.




반응형

Comments

  • 이전 댓글 더보기
  • 통미 2019.07.08 22:15 댓글주소 수정/삭제 댓글쓰기

    오호~~잘해결했습니다!!! 완벽합니다!!!! 너무 감사드립니다!!!

  • 익명 2019.08.04 17:40 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • css 추가하는 내용은 스킨에디터 들어가서 css 편집창 맨밑에 붙여넣으면 됩니다.
      whatever 스킨도 style.css 파일이 있고 style.css 끝에 붙여넣으라는건 붙여넣은 걸 전체 복사해서 스킨 에디터 css 창에 붙여넣으라는 뜻입니다.

      블로그 주소를 알려주시면 문제가 어떤건지 확인해드리겠습니다.

  • 익명 2019.08.04 18:05 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 익명 2019.08.04 18:24 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 익명 2019.08.04 21:06 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 제가 배포하는 스킨들은 해당이 없고, whatever 스킨의 경우 모바일 화면에서 말풍선 css를 whatever 스킨 css가 덮어쓰는 현상이 생깁니다.

      위에 말풍선 css 붙여넣은 것중에
      맨끝 스타일인

      .subscription_bubble .inner
      속성중에

      padding: 10px 40px;

      를 whatever 스킨 css가 덮어써서 여백이 줄어들어서 밀리는 것입니다.

      padding: 10px 40px !important;

      로 변경을 하시면(끝에 ; 앞에 !important 를 추가) 모바일에서 밀리는 현상이 사라질겁니다.

  • 익명 2019.08.05 00:50 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 적용은 다 했으나 css가 깨지네요...
    pickyblog.tistory.com

    • 해당 블로그에 적용해서 깨지보이는 부분을 확인할 수 없습니다.

      적용해야되는 부분중 하나라도 누락되면 정상적으로 동작하지 않습니다.

      초보자에게는 조금 어려운 부분입니다.
      적용해서 쓰는 분들이 꽤 있기 때문에 기능 자체는 표준 스킨 룰을 따르는 경우 잘 동작합니다.

  • 스킨은 티스토리 기본스킨인 Portfolio이고
    스크립트는 common.js에 넣었고
    Css부분도 나온대로 다 넣었습니다.
    왜 깨지는지 알수가 없네요...

    • 아마도 페이지가 다 뿌려지기 전에 자바스크립트 로딩되면서 말풍선 버튼 객체를 찾지 못해서 풍선이 뿌려지지 않는 것으로 보입니다.

      레퍼런스 스킨은 common.js 가 상단에서 선로딩되는데 위에 설명은 하단에 후로딩되는걸 기준으로 설명이 되고 있습니다.

      common.js 파일을 여시고
      위에 자바스크립트 코드 붙이는 것을
      수정전 원본 맽끝에 보면
      }
      가 있습니다.

      요거 윗줄에 넣어주면 후로딩이 되므로 처리가 말풍선 붙이는 처리가 될 겁니다.

      정확하게는
      common.js 최외곽의
      $(function() {
      }
      요걸로 감싸서 페이지 로딩후 자바스크립트가 실행되되도록 합니다.
      말풍선 코드도 그 안으로 넣어주어야 하는 것입니다.

    • 글에 추가 내용을 붙여서 관련된 이슈에 대해서 대응이 가능하도록 추가 설명을 달았습니다.

      위에 빨강색으로 추가한 글내용을 읽어보시기 바랍니다.

  • 이젠 아예 아무것도 안뜨네요....

    • 글보기 하단에 말풍선 내용은 정상적으로 붙어있습니다.(안보이면 브라우저 캐시 소거 한번 해야 합니다.)

      관련된 코드들은 다 정상적으로 붙어있는데
      로딩된 css가 적용이 안되고 있습니다.
      원인을 찾아서 알려드리겠습니다.

    • css 를 잘못 붙여넣으신거 같습니다.

      스킨편집기에 들어가서

      공감말풀선 css 붙인걸 모두 지우시고
      위 글에 있는 공감말풍선 코드를 블록으로 잡아서 복사한 후
      스킨 편집기 화면의 css 편집창 최 하단에 그대로 붙여넣고 저장 해보시기 바랍니다.

      레퍼런스 스킨에 위 샘플코드를 그대로 적용하면 말풍선이 잘 붙는 것으로 확인했습니다.

  • 4번 정도 계속 반복하니 어느순간 됬습니다!
    감사합니다.

    • 티스토리 블로그는 시스템 특성상
      자바스크립트 파일 업로드시 브라우저 캐시를 한번 소거해줘야 즉시 반영이 되는 특징이 있습니다.

      시간이 지나면 자바스크립트가 반영되면서 업데이트 된 내용이 보이게 되지만 기다려야 하는 문제가 있습니다.

  • 잘 적용했습니다.
    굿!! 엄청 이쁘네요

  • 반응형 2단 풀커버 스킨에 적용해보았습니다. ( https://sarangmisul.tistory.com )
    아무런 변화가 없습니다. 말풍선이 나타나지 않는데, 어떻게 해야 할까요?

  • 글을 볼때마다 공감과 구독 메시지가 눈에 띄어서 궁금했었는데 실제로 적용하니 너무 이쁘네요
    script.js는 업로드하고, style.css는 편집해서 저장하니 잘 적용되네요.
    감사합니다 :)

  • 익명 2020.03.01 19:06 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 폰트어썸 cdn 링크를 skin.html에 붙이셔야 합니다.
      위에 설정 방법 다시 보시고
      폰트어썸 css 링크를 헤더 영역에 붙여넣으면 배경 아이콘이 붙어 보일겁니다.

  • 감사합니다. 해결 되었습니다. 말풍선 위치도 하나씩 숫자 변경해보니 자리를 잘 잡았습니다.
    도움 주셔서 다시한번 감사드려요.

  • 재미있게 보여서 한번 시도해보겠습니다. 감사합니다.

  • 감사합니다 잘 쓰겠습니다

  • unD 2020.11.11 01:32 댓글주소 수정/삭제 댓글쓰기

    공감버튼 위에 이미 만들어둔 이미지를 넣고 싶은데 CSS로 할 방법은 없을까요?

  • 찾던기능이었는데 쉽게 잘 설치했습니다. 감사합니다.

  • 익명 2021.03.23 19:36 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 아마도 스킨을 바꾸면서 script.js 파일 로딩 위치가 위로 올라간거 같고, 페이지 컨텐츠 로딩 완료전에 스크립트가 실행되면서 공감 버튼이 붙지 않는 것으로 보입니다.

      script.js 끝에 보면 다음과 같을 텐데

      setInterval(autoScrollSlider, 4000);

      })(jQuery);
      if($('.container_postbtn').length){
      $('.container_postbtn').prepend('<div class="subscription_bubble"><i class="fas fa-comment-alt"></i><div class="inner">"공감"과 "구독"은<br/>블로거에게<br/>큰 힘이 됩니다.</div></div>');
      }

      다음처럼 맨끝의 if문 블록을
      })(jQuery);
      윗줄로 넣어보시기 바랍니다.

      setInterval(autoScrollSlider, 4000);

      if($('.container_postbtn').length){
      $('.container_postbtn').prepend('<div class="subscription_bubble"><i class="fas fa-comment-alt"></i><div class="inner">"공감"과 "구독"은<br/>블로거에게<br/>큰 힘이 됩니다.</div></div>');
      }

      })(jQuery);





❌ 닫기