6/21/2019

구글 블로그 다루기 #기본적인 블로거 템플릿

현재 이 블로그에서 사용하고 있는 템플릿(스킨, 테마)의 기본형입니다. 블로거가 자동으로 저는 여기에 추가 스타일(CSS)와 자바스크립트(JavaScript)를 추가해서 사용하고 있습니다.

구글 블로거에서 제공하는 템플릿의 기본형에서 스타일을 모두 제거하고, 불필요하다고 생각하는 코드를 빼거나 변경한 뒤 약간의 스타일만 추가했습니다.

보편적인 블로그 레이아웃인 2단형 레이아웃(블로그 내용, 사이드바)을 사용했으며, 스타일이나 자바스크립트에 따라 취향대로 변경할 수 있습니다.

미디어쿼리가 적용되어있으므로 브라우저 크기에 따라 블로그도 같이 바뀌며, 모바일기기도 지원되므로 모바일용 템플릿을 따로 사용할 필요가 없습니다.

템플릿 코드 보기

적용하는 방법은 두가지 방법이 있습니다.

# 첫번째 방법

위의 템플릿 코드 페이지로 이동하여, Raw 버튼을 클릭합니다.

그러면 코드만 볼 수 있는데, 전체선택(Ctrl+A)후 복사(Ctrl+C)를 합니다.

구글 블로거의 관리자 메뉴에서 테마 → HTML 편집을 클릭합니다.

코드를 붙여넣기(Ctrl+V)하고 테마 저장 버튼을 클릭하면 템플릿이 적용됩니다.

마지막으로 모바일 템플릿을 사용하지 않도록 설정합니다.

# 두번째 방법

Raw버튼을 클릭하지 않고, 마우스 오른쪽 버튼을 클릭한 뒤 다른 이름으로 저장을 선택합니다.

적당한곳에 템플릿 파일을 다운로드 받습니다.

블로거의 관리자 메뉴에서 테마를 선택한 뒤, 우측 상단에 있는 백업/복원 버튼을 클릭합니다.

파일을 선택한 뒤 업로드 버튼을 클릭하면 템플릿이 적용됩니다.

마지막으로 모바일 템플릿을 사용하지 않도록 설정합니다.

게시물 수정
  1. 작성자가 댓글을 삭제했습니다.

    답글삭제
  2. 작성자가 댓글을 삭제했습니다.

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      말씀하신 블로그 코드에서
      <meta content='width=1100' name='viewport'/> 부분을
      <meta content='width=device-width, initial-scale=1, user-scalable=no' name='viewport'/> 로 바꿔주시기 바랍니다.

      삭제
    2. 작성자가 댓글을 삭제했습니다.

      삭제
  3. 블로그스팟 사용하는 초보입니다. 템플릿을 다운받아 설치한후에 슬라이드가 작동되지 않는데, 슬라이드 작동은 어떻게 해야되나요? 메모장에 간단하게 자바스크립트폴더의 파일을 업로드 하라고 하던데, xml파일만 업로드되고 다른 파일들은 업로드가 되지 않는데요.

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      블로그스팟 자체적으로는 템플릿 파일(xml) 1개만 지원이 되고
      css나 javascript를 호스팅하여 사용하려면 다른곳에 업로드하여 사용해야합니다.

      xml에 넣어서 업로드할 경우, </body> 태그 바로 위에 작성하시면 되겠습니다.
      (위에 다른 코드들) ~
      <script>
      console.log("여기에 js를 추가");
      </script>
      </body>


      이런 식으로요

      삭제
  4. 해당 템플릿을 활용해 저만의 템플릿을 만든 후, 배포를 해도 괜찮을까요? 물론 유료로 배포할 생각은 없습니다.

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      블로그 어바웃에 있듯이, 이 블로그에 있는 모든 게시물은 어떠한 조건없이 자유롭게 사용하실 수 있습니다.

      삭제
  5. 템플릿 공유 감사합니다. 심플한 스킨을 찾고 있었는데, 정말 필요한 기능만 있고 페이지 스피드도 굉장히 빨라서 좋은 것 같습니다. 잘 쓰겠습니다. 감사합니다.

    답글삭제
  6. 익명5/24/2023

    이제 막 시작 준비하는 구블 사용자입니다. 깔끔하고 심플한 무언가 찾고 있었는데 찾던 템플릿 이네요 . 좋은 템플릿 공유 감사합니다.
    한가지 궁금한게 있는데요, html 코드 편집기 안에 애드센스 펍 넘버 넣는 공간이 2군데 있는데 두 군데 다 넣어야 하는 건가요?
    내가 원하는 곳에 광고 달 수도 있는지요? 예를 들면(위젯 형식)
    애드센스 광고 삽입과 구현 방식에 대해 궁금해서 여쭤봅니다.
    이제 막 배우며 알아가는 게 재미있습니다.
    템플릿 잘 쓰겠습니다

    답글삭제