본문 바로가기

티스토리스킨/팁.활용.확장

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




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

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

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





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

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


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


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



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

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



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

그 안에 내가 원하는 문구를 띄우는 버블 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초간격으로 반복하게 됩니다.




  • 이전 댓글 더보기
  • 통미 2019.07.04 23:17 댓글주소 수정/삭제 댓글쓰기

    안녕하세요? 오늘 스킨을 바꿨는데 헤더 부분이 이상해졌습니다 ㅠㅠ

    https://happy-table.kr

    봐주실 수 있으신가요??ㅠ

    • 스킨에 index.xml 파일이 포함되어 있습니다. 반드시 업로드해야 스킨 설정이 정상적으로 적용됩니다.

      스킨 편집기에서 해당 파일을 업로드하시면 해결됩니다.

  • 통미 2019.07.04 23:41 댓글주소 수정/삭제 댓글쓰기

    잘해결되었습니다. images폴더 안에것만 등록하면 되는 줄 알았었네요...^^;;

    그런데 헤더에 이미지 파일은 왜 안읽어지는 것인가요? 이미지 파일은 등록했었습니다.

    • 스킨편집기 들어가시면 스킨 옵션 설정항목들이 오른쪽에 보일겁니다.

      헤더 그룹 부분에 보시면 헤더이미지 표시를 켜거나 끌 수 있는 옵션 항목이 있을 겁니다.

      아마도 이게 꺼져 있어서 표시가 안되는 것일겁니다.

      스킨 설정에 필요한 어지간한 옵션 항목들은 다 있으므로 옵션을 조정해서 블로그를 꾸미면 됩니다.

  • 통미 2019.07.05 00:01 댓글주소 수정/삭제 댓글쓰기

    우와~~제 블로그가 너무 이뻐졌어요!!! 진짜 감사드립니다. 정말 좋네요!!!!!

    귀찮으실텐데 질문에 친절히 답변해주셔서 감사합니다. 제가 아직 궁금한게 너무 많아서...ㅠㅠ모아놨다가 한번에 여쭤볼게요

    1. 상단에 있는 카테고리 글 색상 변경 방법
    2. 하단의 태그 삭제 방법 (사이드바는 삭제 했습니다)
    3. 하단의 썸네일 위젯을 2열로 할 수 있나요?

    • 질문을 해주실때 어느 페이지의 어느 위치에 있는 항목을 말하는지 정확하게 알려주셔야 답변이 가능합니다.
      질문을 조금 더 상세하게 다시 해주시기 바랍니다.


      1. 상단에 있는 카테고리 글 색상 변경 방법 -> 상단 카테고리 글 이라는게 뭔지를 모르겠습니다.


      2. 하단의 태그 삭제 방법 (사이드바는 삭제 했습니다)

      태그는 글보기의 태그를 말씀하시는거 같은데 태그는 글 작성시 입력하지 않으면 표시되지 않습니다.
      그리고 입력해도 검색결과에 도움이 된다거나 하지 않습니다.
      블로그 안에서 태그 키워드 단위로 글을 분류를 해주는 역할을 할 뿐입니다.

      구지 삭제를 하시겠다면 skin.html 528~535행
      <s_tag_label></s_tag_label>
      부분을 다 지우시면 됩니다.


      3. 하단의 썸네일 위젯을 2열로 할 수 있나요?

      썸네일 위젯이 뭔가요?
      글보기 하단의 관련글을 말하는 건지?
      아니면 사이드바의 인기글 등을 말하는건지?

  • 통미 2019.07.05 00:19 댓글주소 수정/삭제 댓글쓰기

    한가지만 더 여쭤봐도 될까요??

    카테고리 글목록에서 '글제목과 날짜'만 남기고(글자 포인트 확대 하면서), 내용은 다 삭제할 수 있나요?

    • skin.html
      504행
      <span class="excerpt"></span>

      행을 삭제하면 목록의 내용 미리보기가 삭제됩니다.

      제목 글자 크기는 style.css 파일에서
      .post-item .title 을 검색하면
      (원본기준 1687행) 나오는 클래스를 수정하면 됩니다.
      원본기준 1695행에
      font-size: 1.2em;
      속성의 1.2를 조금씩 크게 늘려서 원하는 크기로 설정하면 됩니다.

      마찬가지로 날짜는
      .post-item .date
      를 찾아서 위에처럼
      font-size 속성의 값을 크게 늘려주면 됩니다.
      style.css 원본기준 1723행에 있습니다.

      수정하실때는 주의하셔야 할게 모바일에서는 또 모바일에 맞게 추가로 수정을 해줘야 합니다.

      style.css 원본기준
      모바일은
      2675행에 모바일용 제목이
      2681행에 모바일용 날짜가
      정의되어 있습니다.

  • 친절한 설명 정말 감사드립니다ㅠㅠ 너무 정성스럽게 답변해주셔서 진심으로 감사드립니다.

    1번과 3번 다시 질문하겠습니다.

    1. "카테고리 위치(사이드바 or 탑메뉴)" 설정해 놓으신 부분을 말씀드리는 겁니다. 탑메뉴로 설정했을 때, 색상을 바꿀 수 있나요?
    3. 하단의 관련글을 언급한 것입니다. 관련글이 4개 노출되는데 8개로 노출 되는가 해서요.

    • 1.
      style.css 에서

      #header .category a
      를 검색해서
      color: #000;
      으로 된 컬러값을 다른걸로 변경하면 됩니다.
      스킨 원본기준 style.css 404행에 클래스가 있습니다.

      서브 메뉴는
      #header .category > ul > li > ul > li > ul > li a
      로 검색해야 하고
      453행에 있습니다.

      마우스 오버 컬러는
      #header .category a:hover
      이고
      410행에 클래스가 정의되어 있습니다.


      3.
      관련글보기는 css로 데코레이션을 주는 것 외에 갯수 등의 설정은 불가능한 것으로 알고 있습니다.
      skin.html 537~555행이 해당 부분입니다.

  • 통미 2019.07.08 01:58 댓글주소 수정/삭제 댓글쓰기

    말씀주신대로 잘 해결했습니다~~

    <script src="./images/script.js">
    if($('.container_postbtn').length){

    구독 버튼은 이런식으로 달아야 하는건가요??

  • 통미 2019.07.08 11:40 댓글주소 수정/삭제 댓글쓰기

    말씀하신대로 코드를 넣었고 캐시를 삭제해도 말풍선이 보이지가 않습니다 ㅠㅠ

    • 잘못 붙이셨습니다.
      skin.html 끝에 코드를 붙이는게 아니라
      스킨에 포함된 script.js 파일 맨끝에 붙여넣는 것입니다.
      images 폴더에 보시면 script.js 파일이 있습니다.
      텍스트 편집기에서 script.js 파일 수정해서 저장한 후 다시 업로드하시면 됩니다.

      script.js 파일에는

      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>');
      }
      요 내용만 붙여넣는 것입니다.

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

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

  • 비밀댓글입니다

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

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

  • 비밀댓글입니다

  • 비밀댓글입니다

  • 비밀댓글입니다

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

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

      .subscription_bubble .inner
      속성중에

      padding: 10px 40px;

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

      padding: 10px 40px !important;

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

  • 비밀댓글입니다

  • 적용은 다 했으나 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는 편집해서 저장하니 잘 적용되네요.
    감사합니다 :)


닫기