네이버 블로그 설정 1탄 - 메인 상단에 투명위젯으로 커스텀 버튼 넣는 방법
- 일반 정보/꿀팁
- 2022. 4. 6.
저는 티스토리 블로그를 합니다. 물론 네이버 블로그도 운영 중인데요. 이번에 회사 네이버 블로그를 개설하면서 메인 화면을 홈페이지처럼 버튼을 만들 생각입니다. 어떻게 만드는지 알려드리도록 하겠습니다.
네이버 블로그의 메인에 메뉴를 만들어 클릭하면 원하는 곳으로 이동하게 하려고 합니다. 블로그로 검색자를 유입시키고 홈페이지로 유입하려고 할 때 많이 사용합니다.
이 작업을 할 때 위젯이라는 기능을 사용해야 하는데 어떻게 하는지 알아보겠습니다.
홈페이지형 네이버 블로그의 홈 구조
네이버 블로그의 홈 상단에 홈페이지 메인 이미지를 만들기 위해 위젯이라는 것을 생성해야 합니다.
어렵게 느껴질 수 있지만 차근차근하시면 따라 하실 수 있습니다.
지금은 비워놨기 때문에 아무것도 없는것 처럼 보이지만 투명한 이미지 5개가 자리 잡고 있습니다.
위 스크린 샷에서 상단 넓은 파란색 부분에 기업 홈페이지나 문의하기 등등의 버튼을 생성할 예정입니다. 이 부분을 마우스로 드레그 하면 평소에는 보이지 않는 투명한 이미지가 보입니다..
홈페이지처럼 버튼을 만든 네이버 블로그를 발견했다면, 마우스로 드래그해보세요. 그럼 위처럼 보이는 것을 확인하실 수 있습니다.
투명 위젯의 구조
네이버 블로그 홈에 버튼을 만들 때 아래와 같은 구조로 만들게 됩니다.
네이버의 배경 이미지 위에 투명 위젯을 사용하는 구조입니다.
- 투명 위젯 : 마우스 클릭 좌표, 사이즈
- 배경 이미지 : 버튼 등 이미지
그럼 네이버 블로그 홈에 위젯을 만들기 위해 이동하겠습니다.
투명 이미지를 사용해 글쓰기
투명 이미지를 사용하기 위해 블로그에 비공개 글에 투명 위젯으로 사용할 투명한 이미지를 만들어야 합니다.
만일 투명한 이미지가 없다면 제가 만들어 놓은 이미지를 사용하시면 됩니다.
투명한 파일이기 때문에 용량이 매우 적습니다. 해상도는 가로 170px, 세로 400px로 만들었습니다. 만일 세로 사이즈가 다른 것을 원하시면 직접 만드시면 되겠습니다.
투명 위젯 이미지 만드실 때 네이버에서 지원하는 위젯의 최대 사이즈는 가로 170px 세로 600px 이기 때문에 이미지 파일이 이 사이즈를 넘기지 않도록 제작해야 합니다.
투명 이미지 다운로드
위 파일을 다운로드 하시고 네이버 블로그에 비공개 글을 하나 작성하시면 됩니다.
비공개로 블로그 글 작성하기
비공개로 작성하는 이유는 투명 이미지 하나가 있는 글을 두면 사람들이 이상하게 생각할 수 있기 때문입니다.
글을 작성한 뒤 발행을 하고 투명한 이미지 위에서 마우스 우클릭, 이미지 주소를 복사하세요.
투명 위젯 만드는 방법
블로그 관리 - 꾸미기 설정으로 이동하세요.
오른쪽에서 두번째 레이아웃을 선택 신 뒤 아래로 스크롤하시면 위젯 사용 설정이 있습니다.
투명 위젯 등록 하는 방법
[+ 위젯직접등록 BETA]를 클릭하시면 직접 등록 창이 열립니다.
위젯명은 구분할 수 있는 이름을 지어주시고 위젯 코드 입력에는 HTML 코드를 넣어주면 됩니다.
제가 미리 작성한 코드를 넣어드릴 테니 그대로 복사해서 사용하세요.
위젯 코드 입력에 넣을 코드 내용
<img src="복사한 투명 이미지 주소" usemap="#button"/>
<map name="button">
<area shape="rect" coords="0,0,170,400" href="클릭시 이동할 URL" target="_blank" title="마우스 올렸을 때 나타나는 글씨"/>
<!-- 예시 -->
<img src="복사한 투명 이미지 주소" usemap="#button"/>
<map name="button">
<area shape="rect" coords="0,0,170,400" href="https://www.naver.com/" target="_blank" title="네이버"/>
코드에 한글로 설명을 넣었습니다. ""(큰따옴표)는 코드이니 지우시면 안 됩니다.
클릭 시 네이버로 이동한다고 했을 때 예시를 작성했습니다.
위 이미지 처럼 이렇게 총 위젯 5개를 만들어 주세요.
레이아웃에 위젯 설정
- 타이틀은 제거하세요
- 만들 위젯 5개를 메뉴 형태 아래에 나열하세요.
- 설정되었다면 아래로 스크롤해서 꼭 적용 버튼을 눌러 주세요.
여기까지 잘 따라 하셨나요? 네이버 블로그 홈에 투명 위젯을 활용한 버튼 만드는 방법에 대해 소개해 드렸습니다.
다음 글에서는 배경 이미지를 넣고 원하는 부분에 클릭할 수 있도록 설정하는 방법을 소개해 드리겠습니다.
다음 글 : 네이버 블로그 설정 - 메인화면에 이미지 넣고 버튼 넣기
네이버 블로그 설정 2탄 - 메인 화면에 이미지 넣고 버튼 넣기
앞 글에 이어서 오늘은 네이버 블로그 상단에 버튼을 만들어 넣는 방법에 대해 설명하려고 합니다. 네이버 블로그는 정해진 틀에서 만들어야 하기 때문에 조금 불편하지만 만들고 나면 뿌듯하
my-rom.tistory.com