Google Blogger(블로그스팟) 테마 -> 고급 -> CCS 추가 버튼이 안보일 경우 해결 방법, Google Blogger(블로그스팟) CCS를 사용하면서 내 블로그를 더 예쁘게, 더 특별하게 만들수 있습니다 .저는 저만의 버튼 CCS를 추가하려고 해결방법을 작성했습니다. CSS 추가는 초보자도 따라할 수 있도록 Google Blogger에서 CSS를 추가하는 방법을 작성하였습니다.
 |
| Google Blogger에서 CSS 추가하는 방법 |
목차
- 테마->고급->CCS추가 메뉴에 커스텀 CCS 추가하기
- 템플릿 HTML 수정으로 CSS 추가하기
- 레이아웃의 CSS 추가 위젯 사용하기
Google Blogger(블로그스팟) 테마를 반드시 백업하고 아래 사항을 시작 하세요.
1. 테마 -> 고급 -> CCS 추가 메뉴에 CSS 추가하기 ( 추천 방식 )
테마 -> 고급 -> CCS추가 옵션을 통해서 직접 CSS를 입력하는 것입니다.
- 블로거에 로그인 후, 좌측 메뉴 > 테마 클릭
- 오른쪽 상단 맞춤설정에 맞춤설정 버튼을 클릭 ( ▼ 이 세모를 눌러 드랍다운 버튼을 누르는게 아님 )
테마 설정 Customized 화면에 접속하고 좌측에 백그라운드, 고급 , 가젯 3개의 메뉴보임고급 버튼을 클릭합니다. 저는 바로 ccs 추가 버튼이 보이지 않았음.- '아래쪽 화살표'
'CSS 추가'를 클릭합니다.
- 코드를 추가하고 오른쪽 하단에서 '저장'
을 클릭합니다.
추가 하려는 CCS 코드를 복사 붙여 넣기를 하여 추가하고 저장합니다.
우측 하단의 디스크 모양의 저장 버튼을 꼭 눌러 저장해 주세요!
2. 템플릿 HTML 수정으로 CSS 추가하기
가장 많이 사용하는 방법은 템플릿 코드에 직접 CSS를 입력하는 것입니다.
- 블로거에 로그인 후, 좌측 메뉴 > 테마 클릭
- 오른쪽 상단 ▼ 드롭다운 > HTML 편집 클릭
<head>태그 안에 아래 코드를 추가
<style>
/* 본문 글자 크기와 색상 변경 예시 */
.post-body {
font-size: 18px;
color: #333333;
}
/* 제목 꾸미기 */
.post-title {
font-family: 'Arial', sans-serif;
color: #0066cc;
}
</style>
수정 후, 상단의 저장 버튼을 꼭 눌러주세요!
3. 레이아웃의 CSS 추가 위젯 사용하기
위젯으로 CSS를 추가하면 테마를 수정하지 않고도 쉽게 적용할 수 있어요.
- 블로그 대시보드에서 레이아웃 클릭
- 원하는 위치(예: 사이드바, 본문 상단)에 ‘가젯 추가’ 선택
- HTML/JavaScript 가젯 선택
- 내용란에 아래와 같이 CSS 코드 입력
<style>
body {
background-color: #f9f9f9;
}
</style>
가젯 이름은 안 넣어도 되고, 저장만 해주면 적용됩니다!
💡 팁: CSS 적용이 안될 때 확인할 것
- CSS 코드에 문법 오류가 없는지 확인
- 기존 테마의 CSS보다 우선순위를 높이기 위해
!important사용 - 브라우저 캐시 삭제 후 새로고침 해보기
마무리
이제 나만의 스타일로 블로그를 꾸밀 수 있겠죠? 블로그에 개성을 더하고 방문자에게 좋은 첫인상을 남기고 싶다면 CSS 커스터마이징은 필수입니다. 직접 다양한 스타일을 실험해보고, 나만의 블로그를 완성해보세요!
댓글 쓰기