네이버 홈페이지형 블로그 응용편 07_2.좌표값 소스코드 완료된 링크 위젯 버튼 직접등록

응용 편 7-1편에 이어서 네이버 블로그 홈페이지형 블로그 만들기를 해보도록 하겠습니다. 저번 시간에는 1번째 줄에 들어가는 위젯명 logo1_1~1_5의 5개의 위젯을 등록 완료했습니다.

이번 네이버 블로그 홈페이지형 블로그 만들기 7-2편에서는 2번째 줄에 들어가는 위젯을 완료해보도록 하겠습니다. 홈페이지형 블로그 만들기는 유튜브 강의 1~4편으로 먼저 제작되었습니다.

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

1. 위젯 이동
2. 2번째줄 HTML 소스코드 붙여 넣기
3. 2번째 줄 위젯 메뉴 이미지 등록
4. 2번째 줄 위젯 메뉴 이미지 사이즈 확인
5. 2번째줄 투명 위젯 사이즈 수정
6. 2번째 줄 위젯 최종 완성
7. 2번째줄 링크 위젯 버튼 최종 확인

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

유튜브 강의

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

03 / 04편

응용 편을 보기전에 기초 편을 먼저 보시고 홈페이지형 블로그를 제작해보실 추천 합니다. 기초 편에서 다루고 있는 위젯 사용방법이 익숙해지면 응용 편도 크게 어렵지 않게 제작해볼 수 있을 것입니다.

1. 위젯 이동

그럼 이제 2번째 줄 위젯을 직접등록하여 2번째줄 2줄 1_1~2줄 1_5까지 등록을 해보도록 하겠습니다. 저의 경우 영상의 강의를 위해서 제작했던 부분이라 시간을 단축하기 위해 위젯을 투명으로 모두 넣었습니다.

수정을 통해서 HTML 소스코드를 붙여 넣기 하겠습니다. 여러분들은 위젯 직접 등록 버튼을 눌러서 새롭게 위젯을 만들어주시면 됩니다.

2번째 줄 위젯을 사용 설정에서 체크하여 활성화 시켜주고 위젯을 마우스로 드래그하여 1번째줄 위젯 바로 아래로 2번째줄로 이동을 시켜줍니다.

2. 2번째줄 HTML 소스코드붙여 넣기

그럼 이제 메모장에 있는 2번째 줄 HTML 소스코드를 복사하도록 하겠습니다. 전체 복사한 후 위젯 설정에서 2줄 1_1 위젯 edit(수정)을 눌러서 위젯 코드 입력 안에 붙여 넣기 합니다. 붙여 넣기가 완료되었다면 하단에 있는 다음 버튼을 클릭합니다. 

3. 2번째 줄 위젯 메뉴 이미지 등록

다음 버튼을 클릭하면 분할했던 이미지가 업로드된 것을 확인할 수 있습니다. 수정을 눌러서 위젯을 등록합니다.

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

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

5. 2번째줄 투명 위젯 사이즈 수정하기

투명 위젯의 가로 사이즈는 170px*세로 사이즈는 166px입니다. 이제 투명으로 들어가는 위젯 버튼을 모두 이 사이즈와 동일하게 수정을 해주면 됩니다.

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

6. 2번째 줄 위젯 최종 완성

위젯 사이즈를 모두 수정 또는 새로 등록을 했다면 하단에 있는 미리 보기 버튼을 클릭합니다. 미리보기에서는 링크가 눌러지지 않습니다. 적용을 눌러야 확인할 수 있는 부분입니다. 참고 부탁드립니다. 미리보기에서는 이미지가 잘 등록이 되어 보이는지 확인을 해주면 됩니다. 2번째줄 위젯들이 잘 등록되었다면 하단에 있는 적용 버튼을 눌러서 최종 완료합니다.

7. 2번째줄 링크 위젯 버튼 최종 확인

미리보기에서 확인하지 못했던 링크 부분을 최종 확인합니다. 최종 적용 후에 마우스를 메뉴 이미지에 올려보면 마우스 커서가 화살표에서 손 모양으로 바뀌는 것을 확인할 수 있습니다. 메뉴의 경우 로고 이미지와 달리 각각 다른 카테고리로 연결이 됩니다. 이미지맵을 사용하여 좌표값을 넣었기 때문에 가능한 부분입니다. 이미지는 1개이지만 그 이미지에 여러 개의 링크를 걸어야 할 때 이미지맵을 사용하면 된다는 것을 알 수 있습니다.

홈페이지형 블로그 만들기 작업이 완료된 네이버 블로그를 [여기]에서 확인 해주세요.

블로그를 운영하고자 하는 목적과 주제가 모두 다르기 때문에 디자인은 모두 다를 수 있습니다. 참고만 하시면 좋겠습니다.

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

그럼 다음 응용 8편에서는 3번째 줄 4번째 줄 위젯의 좌표값을 찾아보도록 하겠습니다. 저번에 소개했던 이미지 맵 툴 사이트로 좌표값을 찾아봤었습니다. 다음 포스트에서는 온라인 이미지 맵 에디터를 활용해서 찾아보도록 하겠습니다.