북클럽 스킨 | 티스토리 '공감 버튼' 꾸미기 #2

 

 

목차 ▴ 닫기

• 북클럽 스킨 '공감 버튼' 꾸미기 #2
  • '공감 버튼'을 중앙으로 이동
    • '공감 버튼'을 중앙으로 이동 CSS 적용
    • '공감 버튼'을 중앙으로 이동 CSS 코드
  • '공감 버튼' 위쪽에 말풍선 애니메이션
    • '공감 버튼' 위쪽에 말풍선 애니메이션 CSS 적용
    • '공감 버튼' 위쪽에 말풍선 애니메이션 CSS 코드
  • 광고창과 공감버튼의 간격 조정하기(2025.02.18 추가)
    • CSS 코드 수정
  • 마무리
  • 관련글 바로가기

북클럽 스킨 '공감 버튼' 꾸미기 #2

다음은 간단한 CSS 편집을 통해 '공감 버튼'을 꾸미는 4가지 방법입니다. 각 방법은 #1과 #2로 나누어 설명하겠습니다.

'공감 버튼' 꾸미기 #1

1. '공감 버튼'의 하트에 애니메이션 효과를 적용하는 방법.

2. '공감 버튼' 위쪽에 말풍선 모양을 추가하고 애니메이션 효과를 주는 방법.

'공감 버튼' 꾸미기 #2

3. '공감 버튼'을 중앙으로 이동하는 방법.

4. 중앙으로 이동한 '공감 버튼' 위쪽에 말풍선 모양을 추가하고 애니메이션 효과를 주는 방법.

 

참고로, 제가 사용하는 스킨은 북클럽 스킨이지만, 다른 스킨에서도 충분히 따라 할 수 있으니 참고해주세요!

---

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

728x90

 

'공감 버튼'을 중앙으로 이동

 

※ '공감 버튼'의 하트 애니메이션 효과는 '공감 버튼' 꾸미기 #1를 참고하세요!

---

 

'공감 버튼'을 중앙으로 이동 CSS 적용

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

 

2) 아래의 CSS 코드를 복사 후 CSS 탭 하단에 넣어줍니다.

3) 미리 보기를 통해 적용된 변경 사항을 확인한 후 [적용]을 클릭하여 '저장'>합니다.

---

 

'공감 버튼'을 중앙으로 이동 CSS 코드

css

닫기 줄바꿈

/* 	공감박스 가운데 정렬하기 */
.container_postbtn {
‌display:flex;
‌justify-content:center;
‌align-items:center;
}
/* 	공감박스 가운데 정렬하기 끝 */

 

'공감 버튼' 위쪽에 말풍선 애니메이션

---

 

'공감 버튼' 위쪽에 말풍선 애니메이션 CSS 적용

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

2) 아래의 CSS 코드를 복사 후 CSS 탭 하단에 넣어줍니다. 

3) 미리 보기를 통해 적용된 변경 사항을 확인한 후 [적용] '저장'합니다.

---

 

'공감 버튼' 위쪽에 말풍선 애니메이션 CSS 코드

기존 '공감 버튼 꾸미기 #1'의 말풍선 CSS 코드를 사용하고 계신 분들은, 기존 코드를 삭제하시고 아래 코드로 교체해 주시기 바랍니다.

css

닫기 줄바꿈

/* 중앙 공감박스 상단 말풍선 */
.container_postbtn::before {
​​​​content: '이 글이 유용하셨다면... 🧡'; /* 말풍선 문구 */
​​​​position: absolute;
​​​​center: 0; /* 말풍선 중앙 */
​​​​top: -45px; /* 말풍선 세로 위치 */
​​​​background: #f6a40a; /* 말풍선 배경색 */
​​​​color: #000; /* 글색 */
​​​​font-size: 16px; /* 폰트크기 */
​​​​padding: 8px 12px; /* 내부 여백 */  
​​​​border-radius: 50px; /* 테두리 라운드 */
​​​​animation: scalingPostBef 4000ms ease infinite; /* 애니메이션 속도 */
}

.container_postbtn::after {
​​​​position: absolute;
​​​​left: 43%; /* 말풍선 꼬리 위치 */
​​​​top: -10px; /* 꼬리 세로 위치 */
​​​​border-top: 7px solid #f6a40a; /* 꼬리 모양, 크기 */
​​​​border-bottom: transparent;
​​​​border-right: 7px solid transparent; /* 꼬리 모양, 크기 */
​​​​border-left: 7px solid transparent; /* 꼬리 모양, 크기 */
​​​​animation: scalingPostAft 4000ms ease infinite; /* 애니메이션 속도 */
}
/* 말풍선 애니메이션 크기 */
@keyframes scalingPostBef {
​​0% {
​​​​transform: scale(1);
​​}
​​14% {
​​​​transform: scale(1.1);
​​}
​​28% {
​​​​transform: scale(1);
​​}
​​42% {
​​​​transform: scale(1.1);
​​}
​​70% {
​​​​transform: scale(1);
​​}
}
/* 말풍선 꼬리 애니메이션 크기 */
@keyframes scalingPostAft {
​​0% {
​​​​transform: scale(1);
​​}
​​14% {
​​​​transform: scale(1.9);
​​}
​​28% {
​​​​transform: scale(1);
​​}
​​42% {
​​​​transform: scale(1.9);
​​}
​​70% {
​​​​transform: scale(1);
​​}
}
/* 중앙 공감박스 상단 말풍선 끝 */

728x90

 

광고창과 공감버튼의 간격 조정하기(2025.02.18 추가)

공감버튼 애니메이션을 적용해 보니, 아래처럼 특정 광고 유형에 따라 말풍선과 광고가 바짝 붙어 보기가 불편할 때가 있습니다.

이 문제를 해결하기 위해 공감버튼의 상하 여백을 조정해 수정해 보겠습니다.

---

 

CSS 코드 수정

1) CSS 탭에서 [Ctrl] + [F]를 이용해 .container_postbtn {를 찾아줍니다.

2개 또는 3개의 코드가 검색되면 그중 첫 번째 코드를 수정해야 합니다.

---

 

2) 아래처럼 코드를 수정 후 [적용]을 눌러 '저장'합니다.

---

 

3) 상하 여백은 미리보기로 확인하며 취향대로 조정하면 됩니다.

53px 0 55px는 (상 / 좌우 / 하)를 말합니다.

css

닫기 줄바꿈

.container_postbtn {
‌margin: 63px 0 45px !important; /*53px 0 55px*/
‌padding: 0 !important;
}

---

 

마무리

'공감 버튼'을 중앙으로 이동하면 말풍선 하단의 꼬리 부분의 위치가 달라질 수 있으니, 이 점 참고하시기 바랍니다.

말풍선의 꼬리 부분은 테그를 수정하여, 위치를 변경할 수 있습니다.

▲ PC 버전

▲ 모바일 버전

 

관련글 바로가기

2025.01.20-북클럽 스킨 | 티스토리 '공감 버튼' 꾸미기 #1

북클럽 스킨 | 티스토리 '공감 버튼' 꾸미기 #1

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"