구글 블로그 동적뷰 템플릿 댓글 옆 말풍선 색상 변경

구글 블로그의 동적뷰(Dynamic View) 템플릿에서 댓글달기 옆 말풍선 이미지의 색상과 그 안의 숫자 색상을 변경하는 방법입니다.

대쉬보드의 [템플릿 → 맞춤설정 → 고급 → CSS추가] 에서 다음의 코드를 삽입합니다.


.bubble.comments-count{
background-color: blue !important;
border-color: blue !important;
color: red !important;
}
.bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
border-color: blue transparent transparent !important;
}

삽입하면서 색깔 처리되어 있는 부분만 자신이 원하는 색상으로 변경하면 되는데, 이때 코드에서 2, 3, 7번째 줄의 색상은 말풍선의 색상을, 4번째 줄의 색상은 말풍선 안 숫자의 색상을 나타냅니다. 색상은 텍스트로 직접 입력해도 되고, 블로그나 홈페이지를 꾸밀 때 쓰이는 6자리 Hex 코드를 사용해도 상관없습니다.

제 블로그가 우클릭/드래그 방지가 되어 있어서 아마 복사가 안될 것인데요.

코드를 구글 Docs에 따로 올려두겠습니다.