리뷰어위드 리뷰어위드

홈 > 지식 > 블로그 마케팅 실전 가이드 | 블로그 운영과 상위노출 전략 >

부록1. 홈페이지형 네이버 블로그 만들기 | 브랜드 블로그 꾸미기 가이드

목차

홈페이지형 네이버 블로그 만들기에 대해 설명합니다.

홈페이지형 네이버 블로그는 네이버 블로그 상단에 큰 배경 이미지를 적용하고,
이미지맵(Image Map) 기능을 활용해 메뉴를 추가하여 기업형 홈페이지처럼 꾸미는 방식입니다.

준비물

배경 이미지

투명 위젯 이미지

이미지맵 코드

상단 배경 이미지 등록

경로:

관리 → 꾸미기 설정 → 스킨 선택 → 세부 디자인 설정
→ 스킨배경 → 디자인 → 직접 등록 → 상단 영역 → 파일 등록

등록할 파일 예시:

참고 이미지

블로그내 관리 메뉴 클릭

블로그 상단 백그라운드 이미지를 위한 세부디자인 설정

직접등록 메뉴 산택후 파일 등록

블로그 상단 이미지 파일 지정

이미지 파일 지정후 적용 클릭

투명 위젯 등록하기

상단 메뉴를 클릭 가능하게 만들기 위해
투명 이미지를 활용한 위젯을 등록합니다.

비공개 포스트에 버튼 이미지 업로드

네이버 블로그 최대 위젯 크기:

가로 170px / 세로 600px

아래 이미지를 비공개 포스트에 업로드한 뒤 이미지 주소를 복사합니다.

참고 이미지

투명 위젯 업로드

위젯 설정 1

위젯 설정 2

위젯 설정 3

위젯 예시

상단 배경 이미지를 마우스를로 드래그해 선택 영역을 이미지 크기 조절기 로 위젯 부분을 캡처해 크기를 170x600 로 조절

리사이즈 예시

170x600 리사이즈

위젯 등록 경로

관리 → 꾸미기 설정 → 레이아웃 위젯 설정
→ 우측에서 두 번째 레이아웃 선택
→ 위젯 직접 등록 클릭

아래와 같이 등록합니다.

투명 위젯1 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966"/>

투명 위젯2 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966"/>

투명 위젯3 만들기

투명 위젯3~5 영역을 드래그 후 화면 캡처하여
170x600 크기로 리사이즈한 뒤 이미지맵을 생성합니다.

투명 위젯3 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966"usemap="#image-map3" />
<map name="image-map3">
  <area shape="rect" coords="2,175,149,210" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=133" target="_top" />
  <area shape="rect" coords="2,226,162,262" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=95" target="_top" />
  <area shape="rect" coords="2,275,111,312" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=137" target="_top" />
  <area shape="rect" coords="2,326,149,359" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=131" target="_top" />
  <area shape="rect" coords="2,375,167,412" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=135" target="_top" />
  <area shape="rect" coords="3,427,149,462" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=136" target="_top" />
  <area shape="rect" coords="3,477,129,511" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=129" target="_top" />
</map>

투명 위젯4 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966"usemap="#image-map4" />
<map name="image-map4">
  <area shape="rect" coords="36,174,167,209" href="https://keyword.withanyai.com/" target="_top" />
  <area shape="rect" coords="38,227,169,261" href="https://utility.withanyai.com" target="_top" />
  <area shape="rect" coords="36,278,165,313" href="https://ai.withanyai.com/" target="_top" />
  <area shape="rect" coords="37,327,167,363" href="https://reviewer.withanyai.com/" target="_top" />
  <area shape="rect" coords="37,376,168,415" href="https://cafe.naver.com/cranberrymarketing" target="_top" />
  <area shape="rect" coords="36,429,169,463" href="https://marketing.withanyai.com/" target="_top" />
  <area shape="rect" coords="37,478,168,515" href="https://www.withanyai.com" target="_top" />
</map>

투명 위젯5 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966"/>

상단 메뉴 설정

경로:

관리 → 메뉴·글·동영상 관리 → 상단메뉴 설정 → 상단 메뉴 지정

참고 이미지

상단 메뉴 설정 1

상단 메뉴 설정 2

샘플 작업 블로그

네이버 브랜드 블로그 상단 메뉴 제작 대행

관련 앱

📚 블로그 마케팅 실전 가이드 | 블로그 운영과 상위노출 전략 지식 글 목록
💬