블로그스팟(Blogger)반응형 템플릿 선택 및 커스터마이징

가나톡ganaTOK
가나톡ganaTOK

 블로그스팟(Blogger)반응형 템플릿 선택 및 커스터마이징

블로그스팟(Blogger)에서도 워드프레스처럼 모바일 인터페이스를 구축할 수 있습니다. 다음은 mesektok.com과 유사한 디자인을 블로그스팟에서 구현하기 위한 구체적인 단계입니다:

1. 반응형 템플릿 선택 및 커스터마이징

블로그스팟은 기본적으로 제공하는 템플릿을 사용하거나 커스텀 템플릿을 업로드할 수 있습니다.

① 반응형 템플릿 선택

  • 블로그스팟 대시보드 → 테마 → 맞춤 설정 → 제공되는 템플릿 중 반응형(Responsive) 템플릿을 선택합니다.
  • 기본 제공 템플릿이 부족하다면, 외부에서 무료 또는 유료 반응형 템플릿을 다운로드할 수 있습니다.
    • 추천 사이트: Gooyaabi Templates, Sora Templates

② 템플릿 업로드 방법

  1. 다운로드한 템플릿 파일(.xml)을 준비합니다.
  2. 블로그스팟 대시보드 → 테마 → 백업/복원 → 템플릿 업로드.

2. HTML 및 CSS 커스터마이징

블로그스팟의 HTML 편집기를 사용해 모바일 인터페이스를 직접 커스터마이징할 수 있습니다.

① 상단 고정 광고 (Sticky Ad)

  1. 블로그스팟 대시보드 → 테마 → HTML 편집으로 이동.
  2. <head> 태그 안에 다음 코드를 추가합니다:
html
<style>
  .sticky-ad {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
  }
</style>
  1. 광고 코드를 다음 위치에 삽입:
html
<div class="sticky-ad">
  <!-- 구글 애드센스 광고 코드 삽입 -->
</div>

② 본문 내 광고 삽입

게시글 첫 번째 문단 또는 중간에 광고를 넣으려면 다음 코드를 추가합니다:

html
<script>
  if (window.innerWidth < 768) { // 모바일 화면 조건
    document.write('<div class="adsense-mobile">구글 애드센스 광고 코드</div>');
  }
</script>

③ 사이드바 광고

사이드바에 광고를 넣으려면:

  • 대시보드 → 레이아웃 → 위젯 추가 → HTML/JavaScript를 선택하고 광고 코드를 삽입합니다.

3. 레이아웃 최적화

① 레이아웃 조정

  1. 블로그스팟 대시보드 → 레이아웃에서 위젯의 위치를 조정합니다.
    • 광고를 헤더, 본문 위, 본문 중간, 사이드바 등 원하는 위치에 배치.
  2. 특정 모바일 디바이스 전용 광고를 설정하려면 CSS 미디어 쿼리를 활용합니다:
css
@media only screen and (max-width: 768px) {
  .desktop-ad { display: none; }
  .mobile-ad { display: block; }
}

② 광고 배치 추천

  • 상단 고정 광고: 헤더 바로 아래에 배치.
  • 본문 첫 문단 광고: 포스트 중간에 삽입.
  • 사이드바 광고: 최신 포스트 목록 위에 배치.

4. 구글 애드센스 최적화

① 애드센스 코드 삽입

블로그스팟에서 애드센스 광고를 설정하려면:

  1. 애드센스 대시보드 → 광고 코드 생성.
  2. 블로그스팟 대시보드 → 레이아웃 → 광고를 추가할 영역 선택 → HTML/JavaScript에서 광고 코드 삽입.

② 자동 광고 활성화

  1. 애드센스 → 사이트 → 블로그 URL 등록.
  2. 자동 광고 코드를 블로그스팟 대시보드 → 테마 → HTML 편집에서 <head> 섹션에 추가.

5. 모바일 전용 메뉴

① 간단한 모바일 메뉴 추가

HTML 편집기에서 다음 코드를 추가합니다:

html
<nav class="mobile-menu">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/p/about.html">소개</a></li>
    <li><a href="/p/contact.html">문의</a></li>
  </ul>
</nav>
<style>
  .mobile-menu {
    display: none;
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
  @media only screen and (max-width: 768px) {
    .mobile-menu { display: block; }
  }
</style>

6. 테스트 및 수정

  • 모바일 최적화 확인: 사이트를 모바일에서 확인해 배치가 적절한지 확인합니다.
  • 구글 애널리틱스: 광고 성능을 추적해 배치를 수정합니다.
  • PageSpeed Insights: 모바일 속도를 점검하고 필요한 최적화 작업을 진행합니다.

Related Posts

로드 중…

댓글 쓰기