본문 바로가기

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

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




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

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

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





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

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


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


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



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

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



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

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



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


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



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

(잘 모르면 아래 3줄을 전부 복사해서 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>');
}



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

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


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

위치는 겹쳐지기 때문에 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.02 01:37 댓글주소 수정/삭제 댓글쓰기


    귀하의 블로그를 열심히 보고 있습니다. 그런데 제게는 너무 어려워서 힘든 점이 많네요^^;;

    오늘은 정말 간절하게 따라하고 싶은 것이 있는데 잘 안되어 질문드립니다.

    제 html은 이렇게 되어있는데 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="./images/script_core.js" ></script>

    첫번째 언급하신 이 코드는 if($('.container_postbtn').length) 어디에 넣어야 할까요??

    도움을 부탁드리겠습니다.

    • 초보자들에게는 쉽지 않은 팁입니다.

      설명을 한줄 한줄 꼼꼼하게 확인하셔야 합니다.

      1. 위에 자바스크립트 코드 3줄 전체를 복사.*if($('.container_postbtn').length) 를 포함 3줄 전부)

      스킨의 script.js 를 열어서
      맨 끝에 새줄을 만들어서 붙여넣습니다.

  • 비밀댓글입니다

  • 통미 2019.07.03 17:25 댓글주소 수정/삭제 댓글쓰기

    제가 위에 질문했던데로 하면 헤더 위에, 다시 말하면, 최상단 위에 text대로 입력이 됩니다.

    스킨은 tovida로 사용하고 있어서 script.js파일이 없는것인가요??

    • 스킨은 스킨 제작자마다 제작하는 방식이 모두 다릅니다.

      tovida 스킨이면 해당 스킨 제작자에게, 또는 해당 제작자 블로그에 문의를 해보시기 바랍니다.

      스킨에 따라서는 script.js 파일이 없는 경우도 있을 수 있습니다.
      javascript를 아얘 안써서 일수도 있고,
      skin.html 파일 안에 javascript 코드를 포함하고 있어서일 수도 있습니다.

      최근 배포되는 스킨들은 대부분 script.js 와 같은 자바스크립트 파일을 포함하고 있는 경우가 대부분이고, 제가 배포하는 스킨은 모두 script.js 파일을 포함하고 있습니다.

    • 아니면
      텍스트 편집기로 script.js 파일을 만들어서 붙여넣는 내용을 붙여넣은 후
      저장하고
      파일을 스킨 편집기에서 업로드하시고

      skin.html 파일 맨 밑줄에

      <script src="./images/script.js"></script>

      요렇게 스크립트 링크를 넣으면 script.js 파일이 로딩됩니다.

      이렇게해서 script.js 파일을 새로 끌어다 써도 됩니다.

      스킨에 따라서는 자바스크립트를 구현해서 쓰는 파일이 script.js 가 아닌 경우도 있습니다.
      자바스크립트 파일명은 위에 처럼 링크를 걸때 스킨을 제작하는 제작자가 마음대로 정한 파일명을 써도 무방하기 때문입니다.

      해당 스킨에 .js 파일이 포함되어 있는지부터 확인을 해보시기 바랍니다.

      파일이 있으면 해당 파일에 내용을 붙여넣으면 됩니다.

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

    가장 아래 코드가 </script>인데

    이 아래다가 <script src="./images/script.js"></script> 이것을 붙일까요?

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

    잘안되네요!!

    이렇게 친절히 설명해주셔서 감사합니다.

    결론지었습니다.

    사장님의 블로그를 사용하기로 했습니다. 친절히 설명해주셔서 너무 감사합니다^^

  • 네~~내일 스킨변경하고 말씀드리겠습니다. 정말 감사합니다. 구독했습니다. gonggamdo hat u yo(규정상)

  • 혹시 "하꼬 블로거"님께서 지금 사용하는 이 블로그 스킨도 배포중이신가요??

    • 민트페이퍼 2단 스킨입니다.

      https://blogpack.tistory.com/299

      이 스킨을 조금 손봐서 사용하고 있습니다.(거의 그대로 입니다.)

      기본적으로 스킨에 큰 업데이트가 있게되면, 추가된 기능이나 사용하는 스킨은 다 공개해드리고 있습니다.

  • 통미 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 를 추가) 모바일에서 밀리는 현상이 사라질겁니다.

  • 비밀댓글입니다


닫기