티스토리-공감 박스 크기 변경, 가운데 정렬 및 문구 추가

 

티스토리 하단의 ♥공감은 여러 SNS나 유튜브 ‘좋아요’와 같은 형식으로 일정 비율로 추천을 받게 되면 내 포스팅이 유용한 정보로 포털 사이트에서 유리한 위치를 얻어낼 수 있게 해주는 효과를 나타냅니다. 그러나 이 공감 박스는 기본으로 작게 설정되어 있어 그냥 지나치기 쉬워 크기를 늘리고 가운데로 정렬하는 방법에 대해서 알아보겠습니다.

 

 

티스토리 CSS 편집

• 티스토리 관리자 페이지 → 꾸미기 탭 → 스킨편집 → html 편집 → CSS 탭으로 이동

• CTRL+F를 클릭해 ‘.container_postbtn’가 있는 위치를 찾아줍니다.

• 적용 전 코드를 참고하여 추가(◀)된 코드를 입력합니다.

• 모든 코드를 입력하였다면 우측 상단 ‘적용’을 클릭 후, 좌측 창 ‘글’ 선택, ‘미리 보기’ 클릭으로 원하는 크기와 위치가 맞는지 확인하시면 됩니다.

 

 

CSS 코드 입력

❏ 적용 된 이미지

 

❏ 적용 전 코드

.container_postbtn {
  margin: 53px 0 55px;
  padding: 0 !important;
}

 

 

❏ 적용 후 코드

.container_postbtn {
  margin: 53px 0 55px;
  padding: 0 !important;
  display:flex; ◀
  justify-content:center; ◀
  align-items:center; ◀
  transform: scale(1.1); ◀ 숫자=박스 크기
} ◀
.container_postbtn:before { ◀
  content:"♥ 클릭은 포스팅 제작에 큰 힘이 됩니다.☺"; ◀ 추가 문구 입력
  position:absolute; ◀
  top:-40px; ◀ 문구의 높낮이 위치 변경
} ◀
.wrap_btn { ◀
  transform:scale(1.1); ◀ 숫자=하트 크기
} ◀

 

※ 추가 문구에 색을 넣고 싶다면 ' .container_postbtn:before' 코드 제일 아래에 'color: #333;'을 입력 후 숫자 부분을 원하시는 컬러로 변경하여 사용합니다. 박스 크기에 비해 하트 크기 비율을 늘리면 다른 옵션들이 안 보일 수 있으니 박스 크기와 하트 크기의 비율을 적절히 조절하여 사용하시면 됩니다.

 

 

❏ 컬러변경 방법

 

티스토리 블로그 배경 색상 바꾸는 방법, CSS 편집으로만 간단하게

 

❏  CSS 코드 파일

티스토리-공감 박스 크기 변경, 가운데 정렬 및 문구 추가 코드.txt

0.00MB

 

---

 

 

티스토리-글 목록 사이에 인피드 광고(애드센스) 삽입 방법

 

 

Google AdSense 광고 차단 회복 메시지 만들기

 

썸네일