홈페이지형 네이버 블로그 만들기

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

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

준비물

배경 이미지

• 이미지 편집 예1 - 배경 이미지

투명 위젯 이미지

• 이미지 편집 예2 - 투명 위젯 이미지

이미지맵 코드

• 이미지 맵 예 - 투명 위젯 이미지 맵 코드

상단 배경 이미지 등록

경로:

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

등록할 파일 예시:

• withanyai-blog-background-1920x690.png 다운로드

참고 이미지

투명 위젯 등록하기

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

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

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

가로 170px / 세로 600px

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

• transparent-widget-170x600.png 다운로드

참고 이미지

위젯 등록 경로

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

아래와 같이 등록합니다.

• 투명 위젯1
• 투명 위젯2
• 투명 위젯3
• 투명 위젯4
• 투명 위젯5

투명 위젯1 코드

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

투명 위젯2 코드

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

투명 위젯3 만들기

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

• 이미지 맵 예제

투명 위젯3 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966" width="170" height="600" usemap="#image-map3" />

<map name="image-map3">
  <area shape="rect" coords="72,96,168,152" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&amp;from=postList&amp;categoryNo=133" target="_top" />
</map>

투명 위젯4 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966" width="170" height="600" usemap="#image-map4" />

<map name="image-map4">
  <area shape="rect" coords="67,41,167,68" href="https://blog.naver.com/marketinganywhere" target="_top" />
</map>

투명 위젯5 코드

<img src="https://postfiles.pstatic.net/MjAyNTA2MzBfMjQw/MDAxNzUxMjc3ODEzMjgx.I7R7ff8sPxdwoQ62TgPWfCvpp7QGpPO44fr9EsLmj2kg.LLzOFR2sqoR8WvXOG48QOTZFlxvEGLXbYoUTqxnNGJEg.PNG/transparent-widget-170x600.png?type=w966" width="170" height="600" usemap="#image-map5" />

<map name="image-map5">
  <area shape="rect" coords="1,41,28,70" href="https://blog.naver.com/marketinganywhere" target="_top" />
</map>

상단 메뉴 설정

경로:

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

참고 이미지

샘플 작업 블로그

• 위드애니AI 블로그

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

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

관련 앱

• 버튼 이미지 생성기
• 이미지 편집기
• 이미지 맵 편집기