네이버 홈페이지형 블로그 응용편 07-1.좌표값 HTML소스코드와 위젯 버튼 직접등록

이전 글에 이어서 네이버 블로그 홈페이지형 블로그 만들기 시작합니다. 좌표값을 찾아내서 소스코드가 완료되었습니다. HTML언어로 완료된 소스코드를 가지고 위젯 버튼을 직접 등록해보도록 하겠습니다.

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

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

1. 1번째 줄 로고 HTML 소스코드 전체 복사
2. 내 블로그 레이아웃/위젯
3. logo1_1 HTML 소스코드 붙여 넣기
4. 1번째 줄 위젯 Logo이미지 등록
5. 1번째 줄 위젯 디자인 레이아웃 설명
6. 1번째줄 위젯 Logo이미지 사이즈 확인하기
7. 1번째 줄투명 위젯 사이즈 수정하기
8. 1번째 줄 위젯 최종 완성
9. 1번째줄 링크 위젯 버튼 최종 확인

유튜브 강의

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

03 / 04편

1. 1번째 줄 로고 HTML 소스코드 전체 복사

좌표값을 찾아내서 완성된 2번째 줄 HTML 소스코드와 1번째 줄 HTML소스코드를 모두 복사하여 위젯 직접 등록을 먼저 해보도록 하겠습니다. 1번째줄 로고 HTML 소스코드를 전체 복사합니다.

2. 내 블로그 레이아웃/위젯

내블로그 설정에 있는 레이아웃/위젯으로 이동합니다. 우측에 있는 위젯 사용 설정에서 logo1_1 위젯 수정(edit)을 눌러줍니다.

3. logo1_1 HTML 소스코드 붙여 넣기

위젯 소스에서 위젯 코드 입력란에 복사한 HTML 코딩소스를 붙여 넣기 해줍니다. 기존에 투명 위젯 소스로 입력되어있다면 그부분을 다 지우고 붙여넣기 해주면 됩니다. HTML코딩 소스를 붙여넣기 한 후 하단에 있는 다음 버튼을 클릭합니다.

4. 1번째 줄 위젯 Logo이미지 등록

다음 버튼을 클릭하면 아래와 같이 미리보기에 Logo이미지 보인다면 HTML 코딩 소스가 잘 등록된 것입니다. 업로드된 이미지가 잘 보인다면 하단 수정 버튼을 눌러서 위젯을 등록합니다.

5. 1번째 줄 위젯 디자인 레이아웃 설명

logo1_1에만 이미지를 넣어주고 위젯명 logo1_2~1_5까지는 투명 위젯으로 모두 처리하였습니다.  아래 블로그 스킨 디자인을 보면서 설명을 해보겠습니다. 저의 경우 디자인을 보면 좌측으로 모든 메뉴들이 구성되어 있습니다. 이 부분은 디자인마다 모두 다르기 때문에 참고만 해주시면 될 것 같습니다.

투명 위젯을 사용하는 방법 및 관련된 영상과 글은 기본 편에서 이미 설명을 했던 부분이라 따로 설명을 하지 않고 바로 작업을 진행하겠습니다.

logo1_2~1_5의 투명 위젯의 사이즈만 수정해 주면 1번째 줄 위젯들은 모두 완성이 됩니다. logo1_1에 들어간 로고 이미지의 사이즈와 동일한 사이즈로 투명 위젯의 사이즈도 모두 수정해주면 됩니다.

6. 1번째줄 위젯 Logo이미지 사이즈 확인하기

Logo1_1 위젯에 들어간 이미지의 사이즈를 알아보도록 하겠습니다. 분할해 놓은 이미지 폴더로 이동하여 그림 위에 마우스를 올리면 크기를 확인할 수 있습니다. 이렇게 확인한 사이즈를 투명 위젯 수정 버튼을 클릭하여 가로 값과 세로 값만  모두 수정해주면 됩니다. 저의 경우 이미지의 사이즈는 170px*112px입니다.

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

처음 임의로 투명 위젯을 만들었을 때 가로 값을 모두 동일하게 170px로 투명 위젯을 만들었기 때문에 가로 값은 따로 수정할 필요 없이 세로 값만 조절해보겠습니다. 세로 값을 logo1_1과 같은 112px로 모두 수정합니다.

08. 1번째 줄 위젯 최종 완성

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

9. 1번째줄 링크 위젯 버튼 최종 확인

미리보기에서는 위젯의 링크가 걸려있는지 확인을 할 수 없지만, 최종 적용 후에 마우스를 로고에 올려보면 마우스 커서가 화살표에서 손가락 모양으로 바뀌는 것을 확인할 수 있습니다. 로고를 눌러보면 HTML 코딩 소스로 입력했던 이동할 페이지 URL로 이동하는 것을 확인할 수 있습니다.

1번째 줄에 들어가는 위젯명 Logo1_1~1_5의 5개의 위젯이 이렇게 완료가 되었습니다. 이제 2번째 줄~4번째줄도 위와 같은방법으로 위젯을 등록만 시켜주면 됩니다. 다음 글에서 같이 2번째줄 위젯 등록을 해보겠습니다. 또한 3~4번째 줄에 들어가는 위젯의 경우 좌표값을 이미지맵 에디터를 활용하여 알아보도록 하겠습니다.