네이버 홈페이지형 블로그 응용편 05-2.배너 위젯 등록하기

네이버 블로그 꾸미기의 시작 홈페이지형 블로그 만들기 이어서 계속 진행해보도록 하겠습니다. 저번 글에서는 분할한 이미지를 모두 글쓰기 하여 네이버 블로그 주소를 갖는 이미지 경로를 복사하여 메모장에 붙여 넣기 했습니다.

이미지의 경로와 간단한 HTML언어로 이번에는 위젯에 등록하기 위한 코딩 소스를 완성해보도록 하겠습니다. 유튜브 강의는 1~4편으로 제작되었습니다. 블로그로 보시는 게 편하다면 글을 참고하시어 제작해주시고, 영상이 편하신 분들은 유튜브 강의를 참고 부탁드립니다.

홈페이지형블로그 응용5-2편 목차

1. 위젯 logo1_1 수정
2. HTML 코딩 소스
3. HTML 코딩 소스 설명
4. 이동할 페이지 URL
5. 메모장 HTML 코딩 소스 중간 정리
6. 여러 개의 링크를 걸 때 HTML 코딩 소스
7. 버튼 이미지 URL 붙여 넣기
8. 1개의 이미지 vs 여러 개 링크
9. 둘째 줄, 셋째 줄, 4번째 줄 HTML 소스 완성
10. 여러 개의 링크를 걸어야 때 주의점
11. 링크 버튼 이미지 URL 복사/ 붙여넣기
12. 이동할 페이지 URL 메모장에 정리
13. 위젯 직접 등록 소스 80% 완료
14. 좌표값을 알아내는 방법

레이아웃/위젯 설정에서 우측 하단에 있는 위젯 직접 등록 버튼을 클릭하여 위젯을 직접 등록을 해주시면 됩니다. 저와 같이 진행해주셨다면 기존에 투명 위젯으로 이미 등록이 되어 있으실 것입니다. 투명 위젯으로 만들어 놓은 부분을 수정하여 사용하셔도 됩니다. 그럼 같이 만들어 보도록 하겠습니다.

*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 하단에 두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

유튜브 강의

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

03 / 04편

기존에 만들어 놓은 logo1_1 투명 위젯을 수정하여 등록할 예정입니다. 참고 부탁드립니다. 위젯 사용 설정에서 사용하는 위젯은 체크박스에 체크가 되어 있고 사용하지 않은 위젯은 체크가 해제되어 있습니다. 저는 logo1_1~1_5까지 사용할 예정이기 때문에 모두 체크해두었습니다.

1. 위젯 logo1_1 수정

위젯 사용 설정에서 수정할 위젯의 우측에 있는 EDIT를 눌러서 수정해 보도록 하겠습니다. 투명 위젯으로 넣었던 HTML 코딩 소스를 지우고 분할해 두었던 이미지의 경로로 위젯 코드를 완성하여 이미지를 불러오겠습니다.

2. HTML 코딩 소스

이미지를 불러오고 클릭하여 해당 페이지로 이동시킬 링크 위젯 버튼의 HTML 코딩 소스는 아래와 같습니다.

<a href="이동할페이지url"
target="_blank">

<img src="버튼이미지url"
alt="이미지설명텍스트"></a>

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 마지막에 링크를 적어두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

3. HTML 코딩 소스 설명

1개의 이미지에 1개의 링크만 걸리는 코딩 소스로 기초 편을 보시고 응용 편을 제작하는 분들이라면 크게 어렵지 않은 부분일 것입니다. "이동할 페이지 url", "버튼 이미지 url", "이미지 설명 텍스트" 따옴표 안에 들어가는 경로를 넣어주기만 하면 됩니다. 이미지 설명 텍스트의 경우는 이미지의 설명을 간단히 넣어주시면 됩니다. 즉 이미지를 불러오고, 이미지를 클릭 시 이동해야 하는 페이지 주소 그리고 이미지 설명이 되는 HTML 코딩 소스라고 보시면 될 것 같습니다.

4. 이동할 페이지 URL

그러면 이제 로고 1_1의 이미지를 누르면 이동해야 하는 페이지 주소를 알아보도록 하겠습니다. 보통 홈페이지의 로고를 누르면 메인 화면으로 가는 것과 동일하게 저도 로고 이미지를 눌렀을 때 블로그의 메인이 보이게 링크를 넣어도록 하겠습니다.

그러면 메모장에 이동할 페이지의 URL 주소는 본인 블로그 주소가 되겠지요. 메모장에 블로그 주소를 넣어둡니다. 또는 로고를 눌렀을 때 원하는 페이지의 주소를 넣어주시면 됩니다. 

이미지 주소 URL과 이동할 페이지 URL을 메모장에 다 정리를 해놓고 이 주소들은 위젯 등록 시 이 코딩 소스에 따옴표("") 안에 들어가는 해당 주소를 다 붙여 넣기 한 후에 완성된 HTML 코딩 소스를 복사하여 위젯 코드 입력란에 붙여 넣기 해주면 됩니다.

5. 메모장  HTML 코딩 소스 중간 정리

로고의 경우 이미지를 불러오는 위의 HTML 코딩 소스로 직접 등록을 하게 되면 문제없이 구현이 되지만 문제는 2, 3, 4번째 줄에 들어가는 카테고리입니다. 로고는 1개 이미지에 하나의 링크를 걸리게 하면 되지만, 다른 이미지들은 하나의 이미지에 여러 개의 링크가 걸어야 하는 상황이기 때문입니다. 그래서 이번 홈페이지형 블로그 만들기 응용 편에서는 기존의 이미지 1개당 하나의 링크를 걸어야 하는 방법 외에 이미지맵이라는 소스를 활용해서 1개의 이미지에 여러 개의 링크를 넣을 수 도 있도록 좌표값을 얻는 방법을 알아보도록 하겠습니다.

메모장에 아래와 같이 정리를 해봤습니다. 아래 소스는 위젯의 1줄 로고 HTML 소스이며 (이미지 1개당 1개의 링크를 걸 때) 필요한 HTML 소스입니다.  2, 3, 4번째 줄에 들어가는 소스는 (이미지 1개당 여러 개의 링크를 걸어야 할 때) 필요한 HTML 소스가 들어가야 합니다. 메모장에 링크명을 아래와 화면과 같이 정리를 합니다.

6. 여러 개의 링크를 걸 때 HTML 코딩 소스

이미지 1개당 여러 개의 링크를 걸 때 필요한 HTML 소스를 알아보도록 하겠습니다. 이 HTML언어 코딩 소스는 이미지 1개당 여러 개의 링크를 걸어야 할 때 필요한 이미지맵 HTML 소스입니다.

<img src="버튼이미지url” 
usemap="#Map" border="0" />

<map name="Map" id="Map">

<area shape="rect" coords="좌표값" 
href="이동할 페이지의 URL"
target="_blank" />

<area shape="rect" coords="좌표값"
href="“이동할 페이지의 URL"
target="_blank" />
</map>

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 마지막에 링크를 적어두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

HTML 소스는 메모장을 첨부했습니다. 이미 다운로드하였다면 메모장 안에 같이 들어 있습니다. 위젯에 들어갈 이미지 1개당 여러 개의 링크를 걸 때 필요한 이 HTML 코딩 소스는 이미지맵을 활용한 소스입니다. 여기서 ""따옴표 안에 들어가는 부분들을 모두 입력하고 위젯을 등록하면 됩니다. 이제부터 하나씩 채워 넣어보겠습니다.

7. 버튼 이미지 URL 붙여 넣기

분할했던 이미지(메뉴에 해당하는 이미지) URL를 위젯명으로 구별하여 2줄 1_1에 적어놓았습니다. 그 URL을 "버튼 이미지 URL"따옴표 안에 넣어주면 됩니다. 이미지를 불러오는 HTML언어의 코딩 소스입니다.

8. 1개의 이미지에 여러 개 링크를 걸 때 HTML 코딩 소스 설명

아래 화면을 보면서 나머지 ""안에 들어가 있는 소스 설명을 이어가겠습니다. 버튼 이미지 URL"은 2줄 1_1 URL 주소를 입력, area shape=”rect”는 이미지맵의 모양, 형태를 설정하는 부분입니다. “이동할 페이지의 URL”은 메모장에 붙여 넣기 한 이동할 페이지의 주소를 입력합니다.

“좌표값”의 경우 좌표값 사이트를 통해서 얻은 좌표값을 넣을 예정입니다.  좌표값을 알아내는 방법은 다음 편에서 같이 알아볼 예정입니다. target의 경우 target속성에 대해서는 기초 편에서도 설명을 했던 부분이지만 한번 더 설명하고 넘어가도록 하겠습니다.

◎target 속성: target속성으로 지정을 하면 프레임에 링크된 문서가 열 리가 됩니다. 문서를 여는 프레임을 지정하는 값을 알아보겠습니다.

_blank 이름이 없는 새로운 창을 열고, 그 창에 내용을 표시합니다.

_self 링크하는 곳과 같은 프레임에 내용을 표시합니다

_Parent 링크될 문서를 링크 전 원래의 프레임인 부모 프레임에서 나타냅니다. 부모 프레임이 없는 경우에는'_self'와 같은 결과를 나타냅니다.

_top 이미 있는 프레임을 모두 해제하여 창 전체에 내용을 표시합니다. 부모 프레임이 없는 경우에는 '_self'와 같은 결과를 나타냅니다.

9. 둘째 줄, 셋째 줄, 4번째 줄 HTML 소스 완성하기

2번째 줄~4번째 줄의 HTML 코딩 소스도 메뉴의 개수만큼 넣어주면 됩니다. 아래 코딩 소스를 보면 이미지 한 개당 2개의 링크를 걸어야 할 때와 3개의 링크를 걸어야 할 때 아래 소스만  필요한 만큼 추가를 하면 되지만 위젯 1개당 코드가 2000byte까지만 가능하다는 점을 기억해주셔야 합니다. 글자 수로 1,000자 정도 됩니다.

<area shape="rect" coords="좌표값"
href="“이동할 페이지의 URL"
target="_blank" />

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 마지막에 링크를 적어두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

이렇게 해서 4번째 줄의 위젯 코딩 소스까지 메모장에 정리를 했습니다.

10. 여러 개의 링크를 걸어야 때 주의해야 할 점

여기서 주의해야 할 점이 있습니다. 예를 들어서 아래 화면과 같이 이미지 한 개당 3개 이상의 링크를 걸어야 할 경우가 생겨서 코딩 소스를 더 추가하여 넣는다면 위젯 등록이 되지 않습니다.

네이버 위젯을 사용 시 중요한 점 3가지를 저번 포스트에서도 안내를 했던 부분이지만 한번 더 알아보도록 하겠습니다. 

- 위젯은 20개까지 등록이 가능합니다.

- 위젯의 코드는 2000byte까지 입력 가능합니다.

- 위젯의 하나 크기는 170px, 세로 최대 600px까지 지원이 가능합니다.

위의 화면과 같이 한 개의 이미지에 5개의 링크를 걸어야 한다면 해당하는 부분은 바로 2번입니다. 위젯 하나당 2000byte까지 입력이 가능하다는 것은 글자 수가 중간에 공란을 포함해서 1,000자를 넘지 못합니다. 

이건 네이버에서 정해놓은 용량이기 때문에 제가 테스트를 해봤을 때는 최대 위젯 1개당 들어가는 링크는 3개가 가장 적합했습니다. 그래서 디자인을 할 때도 이 위젯의 특징에 맞게 하나의 링크 배너 위젯(카테고리, 메뉴)을  2~3개의 링크만 넣을 수 있게 디자인 작업을 했습니다. 

이제 본격적으로 위젯 직접 등록을 해 보록 하겠습니다. 메모장에서 가장 중요한 소스는 ★위젯 직접 등록 소스입니다. 1번째 줄~4번째 줄 가지 들어가게 되는 이 소스를 가지고 위젯 직접 등록하여 블로그 스킨에 적용시킬 예정입니다. 그럼 위젯 직접 등록 소스에 ""안에 들어가는 부분들을 다 넣어보도록 하겠습니다.

11. 링크 버튼 이미지 URL 복사하여 붙여 넣기

방법1) 1번째 줄 로고 HTML 소스(이미지 1개당 1개의 링크를 걸어야 할 때) 들어가는 "버튼 이미지 URL"은 메모장 하단에 적어 두었던 로고 1_1의 URL 주소를 복사하여 붙여 넣기만 하면 됩니다.

방법2) "이미지 설명 텍스트"에는 이미지를 설명하는 내용을 적어주시면 됩니다. 저의 경우 로고 이미지라서 "로고 이미지"로 입력하겠습니다.

방법3) "이동할 페이지 URL"의 경우 이미지 버튼을 클릭했을 때 이동할 페이지의 주소를 적어주면 됩니다. 저는 로고 이미지를 클릭하면 내 블로그의 메인 화면으로 이동시킬 예정이라 아래 화면과 같이 제 블로그 주소로 넣었습니다.

방법4) 이렇게 해서 ★위젯 직접 등록 소스에서 1줄 로고 HTML 소스(이미지 1개당 1개의 링크를 걸어야 할 때)가 완료되었습니다.

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 마지막에 링크를 적어두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

12. 이동할 페이지 URL 메모장에 정리하기

위와 같은 방법으로 좌표값을 제외한 2, 3, 4번째 줄의 ""따옴표 안에 들어가는 부분을 모두 넣어주시면 됩니다. 저의 경우 하단에 이동할 페이지의 URL을 다 적어놓지 않았지만 미리 이동해야 할 페이지들의 URL 주소를 모두 적어놓고 작업을 하시는 게 좋습니다. 우선 저는 임의로 제 블로그 주소로 카테고리 개수에 맞게 넣어 놓도록 하겠습니다.

이동할 페이지 URL을 모두 정리한 후 "이동할 페이지 URL" 따옴표 안에 붙여 넣기 하여 ★위젯직접등록 소스를 완료해주면 됩니다.

13. 위젯 직접 등록 소스 80% 완료

위젯 직접 등록 소스가 80% 정도 완료가 되었습니다. 2번째 줄~4번째 줄의 위젯 경우 이미지 1개당 여러 개의 링크를 걸어야 하기 때문에 이제 좌표값만 찾아서 넣기만 하면 100% 완료됩니다.

14. 좌표값을 알아내는 방법에 대하여

좌표값을 얻는 여러 방법 중에 가장 쉬운 방법이 어떤 게 있을까 고민을 하다가 총 2가지 방법을 소개하기로 했습니다. 첫 번째 방법은이미지 맵툴, 두번째는 온라인 이미지맵 에디터라는 무료 웹사이트를 통해서 좌표값을 알아내는 방법으로 영상을 제작하고 포스팅하게 되었습니다.

HTML위젯 코딩소스 종합모음(txt파일 첨부) 파일 다운로드는 여기