리뷰어위드홈 > 지식 > 블로그 마케팅 실전 가이드 | 블로그 운영과 상위노출 전략 >
부록1. 홈페이지형 네이버 블로그 만들기 | 브랜드 블로그 꾸미기 가이드
홈페이지형 네이버 블로그 만들기에 대해 설명합니다.
홈페이지형 네이버 블로그는 네이버 블로그 상단에 큰 배경 이미지를 적용하고,
이미지맵(Image Map) 기능을 활용해 메뉴를 추가하여 기업형 홈페이지처럼 꾸미는 방식입니다.
준비물
배경 이미지
투명 위젯 이미지
이미지맵 코드
상단 배경 이미지 등록
경로:
관리 → 꾸미기 설정 → 스킨 선택 → 세부 디자인 설정
→ 스킨배경 → 디자인 → 직접 등록 → 상단 영역 → 파일 등록
등록할 파일 예시:
참고 이미지
투명 위젯 등록하기
상단 메뉴를 클릭 가능하게 만들기 위해
투명 이미지를 활용한 위젯을 등록합니다.
비공개 포스트에 버튼 이미지 업로드
네이버 블로그 최대 위젯 크기:
가로 170px / 세로 600px
아래 이미지를 비공개 포스트에 업로드한 뒤 이미지 주소를 복사합니다.
참고 이미지
상단 배경 이미지를 마우스를로 드래그해 선택 영역을 이미지 크기 조절기 로 위젯 부분을 캡처해 크기를 170x600 로 조절
위젯 등록 경로
관리 → 꾸미기 설정 → 레이아웃 위젯 설정
→ 우측에서 두 번째 레이아웃 선택
→ 위젯 직접 등록 클릭
아래와 같이 등록합니다.
- 투명 위젯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="2,175,149,210" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=133" target="_top" />
<area shape="rect" coords="2,226,162,262" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=95" target="_top" />
<area shape="rect" coords="2,275,111,312" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=137" target="_top" />
<area shape="rect" coords="2,326,149,359" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=131" target="_top" />
<area shape="rect" coords="2,375,167,412" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=135" target="_top" />
<area shape="rect" coords="3,427,149,462" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=136" target="_top" />
<area shape="rect" coords="3,477,129,511" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=129" 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="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" width="170" height="600" />
상단 메뉴 설정
경로:
관리 → 메뉴·글·동영상 관리 → 상단메뉴 설정 → 상단 메뉴 지정
참고 이미지
