By aPOST in 티스토리스킨 — 2023년 12월 23일

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

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

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

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

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

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

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

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

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

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

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

그 안에 내가 원하는 문구를 띄우는 버블 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" 으로 검색해서 아래와 비슷한 인클루드 행이 있으면 이미 링크가 포함되어 있는 것입니다.

현재 보고 있는 블로그에 적용한 말풍선 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초간격으로 반복하게 됩니다.