블로거(구글 블로그) 템플릿 적용, HTML수정하는 방법

  블로거(구글 블로그, 블로그스팟) 템플릿 적용하고 수정하는 방법입니다.


 구글 블로그 스킨 변경 방법은 인터넷에 많이 나옵니다. 구글 블로그 스킨, 블로그 스팟 스킨, 블로거 스킨 등으로 검색하시면 됩니다. 저도 인터넷을 따라서 다운 받았습니다.

 추천해드리는 사이트는 아래 두 곳입니다.

 Free Download 버튼이 있는 스킨을 받으면 됩니다. 적당히 깔끔한 걸로 추천 드려요. 완전 괜찮은데? 싶은 것들은 거의 유료더라구요...ㅋㅋ
 다운로드 버튼 밑에 스킨 수정 방법도 나와있으니 참고하시면 됩니다.

 이 곳도 찾기 좋습니다. 전부 무료 다운로드 가능한 것 같고 인기있는 테마를 따로 볼 수 있습니다. 마음의 드는 테마의 Download 버튼을 누르시면 됩니다. Buy는 구매하기인데 아마 구매하면 지속적으로 피드백을 주지 않을까 싶네요.


 무료 스킨은 기본적으로 하자가 있는 것들도 존재하고 더 이상 업데이트되지 않습니다. 문제가 있어서 개발자에게 메일을 보내도 답이 안 오는 경우가 많다고 하네요. 또한 제가 직접 적용해본 결과 몇 가지 템플릿은 HTML수정 시에 광고 사이트가 잠깐 뜨더라구요. 개인적으로 마음에 드는 템플릿이었는데 찝찝해서 다른 걸로 바꾸었습니다. 이게 가능한 일인지 모르겠는데 다른 템플릿을 사용하니 더 이상 나오지 않았습니다. 이게 불편하신 분들은 유료 스킨을 구매하는 걸 추천합니다.


 다운 받은 zip파일의 압축을 풀면 xml 파일을 확인하실 수 있습니다.
 블로거에 들어와서 테마로 들어갑니다.

 오른쪽 위에 있는 메뉴를 눌러 복원을 클릭합니다. 안내가 뜨면 업로드를 클릭하여 xml파일을 불러옵니다.

이렇게 하면 블로그에 테마가 적용됩니다. 근데 정말로 똑같이 적용되기 때문에 몇 가지를 직접 수정해주어야 합니다.

※ 수정 전에 임시글을 두 세개 정도 올려놓는 것이 확인하기 편합니다 ※
※ 블로거는 블로그를 마음대로 만들고 삭제할 수 있으니 임시로 만든 블로그로 시도하면 좋습니다. ※

 ABOUT ME인데 제가 모르는 사람 사진이 있네요.
 저 나무 사진과 이상한 글은 제가 임시로 작성한 글입니다.

 다시 블로거 설정에서 테마로 갑니다.
 빠른 확인을 위해 새 창으로 들어가시길 바랍니다. 그럼 설정 창 하나와 블로그 창 하나가 남겠죠.

 오른쪽 위에 있는 메뉴를 눌러 이번에는 HTML 편집으로 들어갑니다.

※ HTML 편집 전에 레이아웃 메뉴에서 수정할 수 있는 건 미리 수정하면 좋습니다. ※

 그럼 html을 직접 수정할 수 있습니다. 블로그스팟을 이용하려면 많이 익숙해져야 하는 화면입니다.

 우선 처음 부분에 있는 lang='en-US' 를 lang='ko' 로 언어를 바꿔줍시다. 블로거는 주로 외국에서 많이 사용하다보니 영문이 기본으로 되어있는 경우가 많습니다.

 저장하고 본인 블로그 창을 켜세요.


 이제 개발자 도구를 이용해 html 소스를 확인하는 방법입니다.

 인터넷 설정에서 개발자 도구를 켭니다. 크롬의 경우 F12를 누르면 됩니다.


 개발자 도구 위에 있는 화살표를 누릅니다.

 이 도구로 원하는 부분의 html 소스를 확인할 수 있습니다.

 바꾸고 싶은 부분을 찾아 클릭하세요.

 전 저 부분이 필요 없어서 없애려고 합니다. 레이아웃에도 뜨지 않아 없앨 수가 없었습니다.

 소스를 보니 widget blog_way_widget_author네요.
 복사해서 html 편집기로 갑니다.


 Ctrl + F를 눌러 widget blog_way_widget_author를 검색합니다.

 이 때 중요한 건 html 코드 내에서 Ctrl + F를 누르셔야합니다.
크롬 자체에서 생기는 검색창 말고 블로거 html 편집기 내의 검색창을 이용하세요!!

 저 부분이 어디서부터 어디까지인지 찾으셔야 합니다. 전 저 노란색 부분부터 빨간줄까지였습니다. 보통은 템플릿 사용자가 코드를 빠르게 찾을 수 있도록 1691번째 줄의 <!-- .profile-wrapper -->처럼 제작자가 따로 주석을 달아 놓기 때문에 찾기 어렵지 않습니다.

 확신이 가지 않을 경우 완전히 지우지 말고 주석으로 만드시면 됩니다. 코드 양 옆에 <!---->를 입력하면 그 사이에 있는 코드가 주석이 됩니다.
 (위 사진의 1691번째 줄과 1692번째 줄에 주석이 쓰여있으니 참고하시면 됩니다)


  수정하면서 오른쪽 아래에 있는 눈 버튼을 클릭하면 미리 볼 수 있습니다. 코드가 잘못되었을 경우 경고 메시지가 뜹니다.


 저는 이런 방법으로 폰트 크기나 모양, 색 등과 여백의 크기를 변경했습니다. 블로거를 처음할 때는 많이 혼란스러웠는데 이제는 좀 익숙해졌네요.

 블로거는 한국인들이 별로 없어서 템플릿도 다 영어라 진입장벽이 더 높은 것 같습니다. 특히 네이버 블로그에 익숙해진 분들은 굉장히 귀찮고 어려워하실 것이라 생각이 듭니다. 좀 더 꾸미기 편하게 만들 수 있었을텐데 뭔가 구글답네요. 기본 템플릿도 예쁘고 수정하기 쉽게 나와주었으면 좋겠습니다.

댓글 쓰기

0 댓글