본문 바로가기

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

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




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

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

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





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

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


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


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



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

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



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

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



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


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



스킨 자바스크립트 파일(보통 일반 스킨과 제가 배포하는 스킨은 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> 안에 아래 링크를 적당히 붙여넣으면 됩니다.


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




현재 보고 있는 블로그에 적용한 말풍선 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를 보면 


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


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

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


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

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


위에 추가한 css 아래에 


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



을 추가로 넣습니다.

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


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


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




  • 비밀댓글입니다

    • ie에서 안보이는게 맞습니다.
      정확하게는 배경으로 붙인 폰트어썸 말풍선만 안보이는 것입니다.
      마우스로 긁어보면 텍스트는 제자리에 붙어 있는게 보입니다.
      가상클래스로 텍스트를 붙이는게 ie스펙에는 지원되는 것으로 나오는데 실제로는 화면에 안보입니다.
      ie의 고질병인 스펙을 지원하지만 지원되지 않는 뭐 그런 것이고, 저도 이번에 처음 알았습니다.

      호환성 개선을 해서 ie에서도 잘보이는 버전으로 포스트 내용을 패치했습니다.

      자바스크립트와 css 모두 수정되었으므로 다시 적용하면 정상적으로 잘 보일 것입니다.

    • 감사합니다!!! 수정해주신걸로 다시 했더니 잘 적용됐습니다!!!! :)

    • =^^=/