티스토리 공감버튼 수정하기(가운데정렬, 크게, 유도문구)

안녕하세요. 2023년 3월 10일, 경제적 자유 프로젝트 중인 무월입니다.
블로그 글을 보기만 할 때는 몰랐었는데, 포스팅을 직접 작성하다 보니 공감하트 한 개가 실제로 큰 힘이 됩니다. 그래서 공감버튼을 좀 더 잘 보이게 수정하면서 공감하트를 눌러달라는 유도문구를 스킨 자체에 심어보았습니다. 아래는 해당 내용입니다.

 

티스토리 공감버튼 수정하기

1. 블로그관리 홈 > 꾸미기 > 스킨 편집을 클릭합니다.

2. 스킨 편집 아래의 html 편집을 클릭하고 CSS 탭을 클릭합니다. 제일 하단부에 아래의 CSS코드를 추가하고 적용을 클릭합니다.

/* 공감버튼 가운데 정렬, 크기 1.1배 */ .container_postbtn{     display:flex;     justify-content:center;     align-items:center;            transform: scale(1.1); } /* 하트 크기 1.1배 */ .wrap_btn{       transform: scale(1.1); } /* 공감버튼 유도문구 */ .container_postbtn:before {     content: "+++ ❤️공감과 댓글은 큰 힘이 됩니다! +++"; /* 유도문구 */     position: absolute;     top: -25px; /* 유도문구 위치: 위는 -, 아래는 + */ }

3. 적용된 화면입니다. 공감버튼이 가운데 정렬되었고, 크기는 1.1배 커졌으며, 공감버튼 위에 유도문구가 삽입되었음을 확인할 수 있습니다.

적용 전

적용 후

 

가운데정렬

공감버튼 가운데 정렬은 CSS 코드 중 아래의 굵은 부분에 해당합니다.

.container_postbtn{
    display:flex;
    justify-content:center;
    align-items:center;   
        transform: scale(1.1);
}

크게

공감버튼 크기와 하트 크기는 CSS 코드 중 아래의 굵은 부분에 해당합니다.

.container_postbtn{
    display:flex;
    justify-content:center;
    align-items:center;   
        transform: scale(1.1);
}
.wrap_btn{  
    transform: scale(1.1);

유도문구

공감과 댓글 유도문구는 CSS 코드 중 아래의 굵은 부분에 해당합니다.

.container_postbtn:before {
    content: "+++ ❤️공감과 댓글은 큰 힘이 됩니다! +++"; /* 유도문구 */
    position: absolute;
    top: -25px; /* 유도문구 위치: 위는 -, 아래는 + */
}

공감하트를 기대합니다~ ^^