네이버 홈페이지형 블로그 응용편 10.SNS배너 위젯 마무리 그리고 최종완성

드디어 마지막 편입니다. 생각보다 많은 작업을 필요로 하는 응용 편이었습니다. 홈페이지형 블로그 만들기 응용 10편에서는 SNS 배너 위젯 마무리를 하고 최종적으로 홈페이지형 네이버 블로그를 완성해보도록 하겠습니다.

블로그에 사용되는 이미지는 유튜브 영상 강의를 캡처한 화면으로 화질이 좋지 못한 점 양해 부탁드립니다.

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

1. 4번째 줄 마지막 HTML 소스코드 복사
2. 위젯 코드 입력
3. 위젯 4줄 1_2~1_5까지 투명 위젯
4. 4번째줄 위젯 직접 등록 완성
5. 4번째 줄 링크 위젯 버튼 블로그 적용
6. 링크 위젯 버튼 최종 확인

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

유튜브 강의

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

03 / 04편

1. 4번째 줄 마지막 HTML 소스코드 복사

저번 글에 이어서 마지막 4번째 줄 위젯을 등록해보도록 하겠습니다. 메모장에 좌표값까지 찾아서 적어놓았던 4줄 HTML 소스코드를 전체 복사합니다.

2. 위젯 소스코드 입력

내 블로그 설정에 있는 레이아웃 /위젯으로 이동합니다. 우측 하단에 있는 위젯 사용 설정에서 4줄 1_1 위젯을 수정합니다.  edit를 클릭하여 위젯 코드 입력란에 복사한 HTML 소스코드를 붙여 넣기 합니다.

3. 위젯 4줄 1_2~1_5까지 투명 위젯

4번째 줄 4줄 1_2~1_5까지의 위젯은 모두 투명 위젯 HTML 소스를 넣어줍니다. 이전에 등록했었던 방법과 동일합니다. 4번째 줄 1_1 이미지의 크기와 같은 사이즈로 투명 위젯버튼을 모두 수정합니다. 저의 경우 170px*109px입니다.

4. 4번째줄 위젯 직접 등록 완성

아래 화면과 같이 4번째 줄 위젯을 모두 등록하였다면 하단에 있는 미리 보기 버튼을 클릭합니다.

미리보기를 하여 이미지가 정상적으로 잘 보이는지 확인을 합니다. 마지막 4번째 줄의 이미지는 SNS 아이콘입니다. 위젯 등록이 잘되어서 이미지가 잘 보입니다. 미리보기에서는 링크가 잘 걸려있는지 확인이 되지 않습니다. 이제 블로그에 적용을 시켜보고 확인해보도록 하겠습니다.

5. 4번째 줄 링크 위젯 버튼 블로그 적용하기

미리보기를 닫고 하단에 있는 적용 버튼을 눌러서 레이아웃을 블로그에 최종 적용을 합니다.

6. 링크 위젯 버튼 최종 확인

미리보기에서는 확인할 수 없었던 링크 부분을 확인 보도록 하겠습니다. 블로그에 모든 레이아웃을 최종적으로 적용 후 마우스를 하단 4번째 줄 SNS 이미지에 마우스를 올려보면 마우스 커서가 화살표에서 손 모양으로 바뀌는 것을 확인할 수 있습니다.

- 인스타그램 아이콘을 클릭하면 HTML 코딩으로 입력했던(이동할 페이지 URL) 내 인스타그램으로 이동합니다.

- 페이스북 아이콘을 클릭하면 HTML 코딩으로 입력했던(이동할 페이지 URL) 내 페이스북 페이지로 이동합니다.

- 유튜브 아이콘을 클릭하면 HTML 코딩으로 입력했던(이동할 페이지 URL) 내 유튜브 채널로 이동합니다.

이렇게 해서 홈페이지형 블로그 만들기 응용편도 완성이 되었습니다. 모두 고생이 많으셨습니다. 처음 해보는 것이라 제작을 하면서 안 맞는 부분도 있고, 여러 어려움도 있을 수 있습니다. 모든 질문은 여러 채널에서 받을 수 없어서 유튜브 댓글로 문의하신 것만 따로 모아서 영상으로 제작하고 있습니다. 기초 편 질문 영상은 이미 유튜브에 올려놓았습니다. 응용 편은 아직 만들고 계시는 분들이 있으실것 같아서 좀 더 유튜브 댓글로 질문을 받고 정리하여 추후 응용편 질문으로 영상이 올라갈 예정입니다. 

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