네이버 홈페이지형 블로그 응용편 09.좌표값 소스 완료된 배너 위젯 등록하기

좌표값을 찾아내서 완성된 HTML 소스로 홈페이지형 블로그 만들기 네이버 블로그 제작을 완료해보도록 하겠습니다. 블로그에 사용되는 이미지는 유튜브 강의를 캡처한 화면으로 화질이 좋지 못한 점 양해 부탁드립니다.

홈페이지형 블로그 만들기 응용 편은 영상으로 먼저 제작되었으며 유튜브에서도 영상으로 만나보실 수 있습니다.

홈페이지형블로그 응용9편 목차

1. 3번째 줄 위젯 직접 등록
2. 3번째줄 위젯 이동시키기
3. 위젯 코드 입력
4. 3번째줄 메모장 HTML 소스코드 복사
5. 2번째 줄 위젯 메뉴 이미지 불러오기
6. 3번째 줄 위젯 메뉴 이미지 사이즈 확인
7. 3번째 줄 투명 위젯 사이즈 수정
8. 3번째 줄 위젯 최종 완성
9. 3번째줄 링크 위젯 버튼 최종 확인

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

유튜브 강의

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

03 / 04편

1. 3번째 줄 위젯 직접 등록하기

저번 시간에 이어서 계속 진행을 해보겠습니다. 우선 메모장에 모든 소스코드가 완성되었기 때문에 다기 내 블로그 관리에 있는 레이아웃/위젯 설정으로 이동하여 3번째 줄 위젯을 직접 등록해보겠습니다. 저의 경우 영상을 촬영해야 했기 때문에 시간 단축을 위해서 투명 위젯으로 3번째 줄 위젯을 모두 만들어 놓았습니다. 여러분들은 하나씩 하단에 있는 위젯 직접 등록 버튼을 눌러서 등록해주시면 됩니다.

저는 미리 투명위젯으로 만들어 놓았던 3번째 줄 위젯 버튼 3_1~1_5까지의 위짓을 수정해서 사용하도록 하겠습니다.

2. 3번째줄 위젯 이동시키기

우선 만들어 놓은 3번째 줄 위젯들을 모두 마우스로 드래그하여 2번째 줄 위젯 바로 아래로 모두 이동시키겠습니다. 아직 3번째 줄 위젯을 모두 만들어 놓지 않은 분들은 모두 등록 후에 위젯을 이동시켜 주면 됩니다.

3. 위젯 코드 입력하기

모두 이동시킨 3번째 줄 위젯을 이제 하나씩 수정을 해서 HTML 코딩 소스를 입력해보도록 하겠습니다. 우측 위젯 사용설정에서 3번째 줄 1_1의 위젯의 우측에 있는 edit를 클릭하여 수정하도록 합니다. 여러분은 새롭게 위젯 직접 등록을 통해서 위젯명을 입력하고 하나씩 새롭게 만들어 주셔도 됩니다.

4. 3번째줄 메모장 HTML 소스코드 복사하기

메모장에 있는 2번째 줄 HTML  소스코드를 전체 복사하도록 하겠습니다. 복사한 HTML 소스코드를 위젯명 3줄 1_1 위젯 코드 입력란에 붙여 넣기 합니다. 붙여 넣기가 되었다면 하단에 있는 다음 버튼을 클릭합니다.

5. 2번째 줄 위젯 메뉴 이미지 불러오기 확인

다음 버튼을 누르면 아래 화면과 같이 분할했던 이미지가 업로드된 것을 확인할 수 있습니다. HTML 코딩 소스에 이미지를 불러오는 HTML 태그가 있기 때문에 아래와 같이 이미지가 불러와서 보이는 것입니다. 하단 수정 버튼을 눌러 위젯을 등록합니다.

6. 3번째 줄 위젯 메뉴 이미지 사이즈 확인하기

이제 3번째 줄 3줄 1_2~1_5의 투명 위젯 사이즈를 조절합니다. 방법은 저번 시간에 같이 해봤던 2번째 줄 위젯 수정하는 방법과 동일합니다. 먼저 분할 했던 이미지 폴더에서 2번째줄 1_1에 들어간 메뉴 이미지를 선택하여 마우스 우 버튼을 클릭하여 이미지의 크기를 확인합니다.

7. 3번째 줄 투명 위젯 사이즈 수정하기

위의 방법으로 통해 알게 된 이미지의 사이즈와 동일한 사이즈로 투명 위젯의 사이즈를 수정합니다. 이미지의 사이즈는 가로사이즈는 170px* 세로 사이즈 213px이었습니다. 이 사이즈와 동일하게 3번째 줄 1_2~1_5까지의 투명 위젯 버튼의 사이즈를 모두 수정해주세요.

※참고: 투명 위젯의 사용방법과 투명 위젯 코딩 소스 관련해서는 기초 편에서 다뤘던 부분이라 설명 없이 진행을 하고 있습니다. 만약에 투명 위젯 버튼을 사용을 해보지 않았다면 기초 편을 먼저 보시고 응용 편을 해보는 것을 추천합니다. 투명 위젯의 HTML 소스코드를 메모장에 정리하여 첨부파일로 포스트 해두었습니다. 글 마지막에 링크를 걸어두었습니다.

8. 3번째 줄 위젯 최종 완성

위젯 사이즈를 모두 수정 또는 새로 등록을 했다면 하단에 있는 미리 보기 버튼을 클릭합니다. 3번째 줄 위젯이 잘 등록되었다면 하단에 있는 적용 버튼을 눌러서 최종 완료합니다. 미리보기에서는 링크가 잘 걸렸는지 확인을 할 수 없습니다. 적용 후에 확인이 가능합니다. 미리보기에서는 이미지가 잘 출력이 되고 있는지 확인만 해주시면 됩니다. 3번째 줄 위젯의 이미지가 잘 출력이 되고 있다면 하단에 있는 적용버튼을 눌러서 레이아웃을 블로그에 적용합니다.

09. 3번째줄 링크 위젯 버튼 최종 확인

미리보기에서는 확인을 할 수 없었던 메뉴별 링크 부분을 최종 확인합니다. 최종 적용 후에 마우스를 메뉴 이미지에 올려 보면 마우스 커서가 화살표에서 손 모양으로 바뀌는 것을 확인할 수 있습니다.

메뉴마다 각각 다른 카테고리로 연결이 됩니다. 이미지 맵을 사용 하여 좌표값을 넣었기 때문에 가능한 부분입니다. 이제 카테고리(맛집, 일상적인)마다 클릭을 하면 이동할 페이지 URL로 이동하는 것을 알 수 있습니다. 이렇게 응용 편에서는 좌표값을 활용하여 1개의 이미지에 여러 개의 링크를 걸 수 있는 방법을 알아보는 것이 핵심입니다.

이제 마지막 줄의 SNS 영역 부분만 등록하면 완성됩니다. 좌표값을 알아내고 적용하는 방법은 처음 해보는 작업들이라 어려울 수 있지만 한 번만 해보면 여러 방법으로 다양한 나만의 홈페이지형 네이버 블로그 만들기가 가능합니다. 아래 네이버 블로그는 주소는 지금 만들어 보고 있는 홈페이지형 네이버 블로그 주소입니다. 블로그를 운영하는 목적과 주제가 모두 다르기 때문에 디자인 부분은 참고만 해주시면 좋을 것 같습니다.

HTML위젯 소스코드 종합모음(txt파일 첨부) 파일 다운로드 [바로가기]

그럼 다음 마지막 응용10.마지막 편에서는 SNS 영역 부분을 마무리해보도록 하겠습니다.