[티스토리 블로그 꾸미기] 댓글 마우스 오버 효과 주기 (3탄)

안녕하세요! 댓글 섹션을 꾸미는 데 관심이 있는 분들께 유용한 팁을 하나 더 준비했습니다. 이번에는 댓글 섹션에 마우스를 올렸을 때 나타나는 효과를 주는 방법을 알려드리겠습니다.

이번 작업은 마우스 오버 효과에 일부이니, 다양하게 꾸며보실 수 있습니다. 따라 하기 쉽게, 코드를 붙여 넣기만 하면 되도록 준비했으니, 천천히 진행해 보세요!

잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요!

이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

 

댓글 등록 버튼 마우스 오버 효과

 

이전 글에서 수정한 댓글 버튼 색상 변경 코드 아래 '.tt-comment-cont .tt-btn_register:hover' 코드와 '.tt-comment-cont .tt-btn_register:focus'를 아래 코드로 변경합니다.

.tt-comment-cont .tt-btn_register:hover /* 댓글 등록 버튼 */ {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #0000ff;
}

.tt-comment-cont .tt-btn_register:focus {
  background-color: #fff;
  border-color: #fff;
  color: #0000ff;
}

댓글 등록 버튼 마우스 오버 효과 코드로 교체합니다.

미리보기로 확인할 수 없으니, 게시글로 이동하여 댓글 등록 버튼에 마우스를 올려 변경된 것을 확인합니다.

게시글로 이동하여 댓글 등록버튼에 마우스를 올려 확인합니다.

 

댓글 등록 박스 마우스 오버 효과 제거

 

방금 수정한 댓글 등록 버튼 마우스 오버 효과 코드 아래에 엔터를 눌러 빈칸을 마련합니다.

아래 코드를 복사하여 댓글 등록 박스 마우스 오버 효과를 제거하는 코드를 새로 추가하여 넣습니다.

.tt-box-textarea:hover .tt-inner-g:hover {
  border: none;
}

댓글 박스 마우스 오버 효과 코드를 복사하여 새로 추가하여 넣습니다.

미리보기로 확인할 수 없으니, 게시글로 이동하여 댓글 등록 박스에 마우스를 올려 변경된 것을 확인합니다. (기본 설정은 연한 회색 테두리에서 살짝 진한 회색 테두리로 변경됩니다.)

댓글 등록 박스 마우스 오버 효과를 확인합니다.

 

답글 마우스 오버 효과

 

방금 추가한 댓글 등록 박스 마우스 오버 효과 드 아래에 엔터를 눌러 빈칸을 마련합니다.

아래 코드를 복사하여 새로 추가하여 넣습니다.

.tt-link-comment .tt_txt_g:hover {
  color: #0000ff !important;
}

답글 마우스 오버 효과 코드를 복사하여 새로 추가하여 넣습니다.

미리보기로 확인할 수 없으니, 게시글로 이동하여 답글에 마우스를 올려 변경된 것을 확인합니다.

답글 마우스 오버 효과를 확인합니다.

 

팁! 자물쇠 색상 변경

방금 추가한 답글 마우스 오버 효과 코드 아래에 엔터를 눌러 빈칸을 마련합니다.

아래 코드를 복사하여 빈칸에 새로 추가하여 넣습니다.

.tt-box-write .tt-xe-input-helper {
  filter: invert(1) brightness(0);
}

자물쇠 색상 변경 코드를 복사하여 새로 추가하여 넣습니다.

미리보기로 자물쇠 색상이 변경된 것을 확인합니다.

자물쇠 색상이 변경된 것을 확인합니다.

 

결론

이번 글에서는 댓글 섹션에 마우스 오버 효과를 주는 방법에 대해 알아보았습니다. 이 과정을 통해 블로그에 포인트를 줄 수 있고, 방문자가 포인트를 찾는 재미도 줄 수 있습니다. 필요한 부분만 적용해도 괜찮습니다.

지난 글과 마찬가지로 주의할 점은 '!important'를 사용하면 페이지 성능이 낮아질 수 있다는 점입니다. 적절하게 사용하여 페이지 성능도 유지하면서 이쁘게 꾸미시길 권장드립니다.

다음 글에서는 페이지 성능을 최적화하면서도 수익을 극대화할 수 있는 본문 상단 광고 삽입 팁을 소개해드리겠습니다.

궁금한 점이나 문제가 있으면 댓글로 알려주세요!