블로그스팟에서 작성자 이름이나 하단 "Powered by Blogger" 표시가 거슬리셨던 적 있죠? HTML을 살짝 손보면 깔끔하게 정리할 수 있어요. 처음엔 조금 어려울 수 있지만, 이 글을 따라 하다 보면 "이렇게 쉬울 수가!"라는 생각이 드실 거예요. 함께 시작해 볼까요?
왜 HTML로 작성자 정보를 숨겨야 할까요?
블로그를 운영하다 보면 "이 부분만 없애면 더 깔끔할 텐데"라는 생각이 들 때가 많죠. 특히 상단 작성자 이름이나 하단의 "Powered by Blogger" 같은 표시가 눈에 띄어요. CSS도 좋지만, HTML을 직접 편집하면 더 확실하게 제거할 수 있답니다. 제가 해보니 블로그가 한결 프로페셔널해 보이더라고요!
HTML 편집 준비하기
HTML 편집은 처음엔 살짝 겁날 수 있어요. 하지만 몇 가지 단계를 따라 하면 금방 익숙해질 거예요. 먼저 기본 준비 과정을 알아볼게요.
| 단계 | 설명 |
|---|---|
| 1 | 블로거 대시보드에 로그인합니다. |
| 2 | 왼쪽 메뉴에서 "테마(Theme)"를 클릭하세요. |
| 3 | "HTML 편집(Edit HTML)" 버튼을 누릅니다. |
| 4 | 경고 메시지가 뜨면 "계속" 또는 "확인"을 선택해 주세요. |
| 5 | 중요! "템플릿 위젯 확장(Expand Template Widgets)"에 체크합니다. |
여기까지 하면 편집 준비 완료! 이제 본격적으로 코드를 찾아서 수정해 볼게요.
상단 작성자 정보 제거하기
포스트 상단에 나타나는 작성자 이름을 없애려면, HTML에서 특정 코드를 찾아야 해요. 아래 코드를 참고해서 진행해 보세요.
| 단계 | 설명 |
|---|---|
| 1 | Ctrl+F를 눌러 <b:if cond='data:post.author'>를 검색합니다. |
| 2 | 다음 코드를 찾으세요:
<b:if cond='data:post.author'>
<div class='post-author'>
<span class='post-author-label'>
<data:messages.postedBy/>
</span>
<span class='author-name'>
<data:post.author.name/>
</span>
</div>
</b:if>
|
| 3 | 이 코드를 삭제하거나 주석 처리합니다:
<!--
<b:if cond='data:post.author'>
<div class='post-author'>
<span class='post-author-label'>
<data:messages.postedBy/>
</span>
<span class='author-name'>
<data:post.author.name/>
</span>
</div>
</b:if>
-->
|
| 4 | 미리보기로 확인 후 저장합니다. |
주석 처리는 코드를 지우지 않고 비활성화하는 방법이라 나중에 되돌리기 쉬워요. 이 부분이 특히 유용하더라고요!
하단 작성자 프로필 제거하기
포스트 아래에 작성자 프로필이 보인다면, 이 코드도 수정해야 해요. 단계별로 따라 하면 간단합니다.
| 단계 | 설명 |
|---|---|
| 1 | Ctrl+F로 <b:if cond='data:post.authorAboutMe'>를 검색하세요. |
| 2 | 다음 코드를 찾습니다:
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile'>
<b:if cond='data:post.authorPhoto.url'>
<img class='author-image' expr:src='data:post.authorPhoto.url' alt='data:post.author'/>
</b:if>
<div class='author-description'>
<data:post.authorAboutMe/>
</div>
</div>
</b:if>
|
| 3 | 삭제하거나 주석 처리하세요. |
| 4 | 저장 전 미리보기로 확인합니다. |
하단 "Powered by Blogger" 제거하기
블로그 하단의 "Powered by Blogger" 문구도 없애고 싶다면, 이 코드를 찾아야 해요.
| 단계 | 설명 |
|---|---|
| 1 | Ctrl+F로 <b:section class='attribution'를 검색합니다. |
| 2 | 다음 코드를 찾으세요:
<b:section class='attribution' id='attribution' preferred='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
|
| 3 | 이 코드를 삭제하고 저장합니다. |
꿀팁: 백업은 필수!
HTML을 수정하기 전에 반드시 템플릿을 백업해 두세요. 실수로 잘못 지우면 복구가 어려울 수 있거든요. "테마" 메뉴에서 "백업" 버튼을 누르면 간단하게 저장할 수 있어요!
주의할 점과 장점
HTML 편집은 강력하지만, 템플릿마다 코드가 다를 수 있어요. 정확한 코드를 찾으려면 Ctrl+F로 'author'나 'attribution'을 검색해 보세요. 또, 변경 후 미리보기를 꼭 확인하세요. 한 번 익숙해지면 블로그를 내 맘대로 꾸미는 재미가 쏠쏠하답니다!
자주 묻는 질문 (FAQ)
-
Q: HTML 편집 후 블로그가 깨지면 어떻게 하나요?
A: 걱정 마세요! 백업 파일을 미리 저장해 뒀다면 "테마" 메뉴에서 "복원" 버튼으로 원래 상태로 돌릴 수 있어요. 편집 전 백업은 꼭 해두시고, 미리보기로 확인하면 안전합니다.
-
Q: 코드가 안 보이면 어떻게 찾나요?
A: 템플릿마다 코드가 다를 수 있어요. Ctrl+F로 'author'나 'attribution'을 검색해 보세요. 그래도 안 보이면 "요소 검사"로 클래스명을 확인한 뒤 CSS로 숨기는 방법도 고려해 보세요!
-
Q: 모바일에서도 적용되나요?
A: 네, HTML 수정은 모바일에도 반영돼요. 다만, 모바일 화면에서 미리보기를 통해 레이아웃이 깨지지 않는지 확인하는 게 좋아요. 필요하면 추가 조정을 해보세요!
HTML로 블로그를 내 스타일로
블로그스팟에서 HTML 편집으로 작성자 이름과 "Powered by Blogger" 표시를 숨기면 블로그가 더 깔끔해져요. 상단, 하단 코드를 찾아 수정하는 이 방법을 따라 하다 보면 나만의 블로그를 만드는 재미를 느낄 수 있을 거예요. 지금 시작해 보세요!
