네이버 홈페이지형 블로그 기초편 04.위젯 위치 변경과 투명 버튼으로 공간 만들기

네이버 블로그 꾸미기 시리즈로 글이 업로드되고 있습니다. 홈페이지형 네이버 블로그 만들기의 기초 편은 1편을 시작으로 총 7편으로 마무리될 예정입니다. 네이버 블로그 홈페이지형을 만들기 위해서는 위젯의 활용이 중요합니다.

저번 포스트에서는 홈페이지형 블로그를 만들기 위해 스킨 사이즈도 알아봤고 버튼까지 디자인 작업을 완료했었습니다. 또한 만들어 놓은 스킨까지 적용을 해봤습니다. 이번에는 홈페이지형 블로그를 만들기 위한 위젯의 위치와 간단한 html으로 투명 버튼을 만들어서 공간을 만들어서 버튼을 삽입하기 좋은 구조로 레이아웃을 만들어보도록 하겠습니다.

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

홈페이지형블로그 기초4편 목차

1. 레이아웃 위젯 설정 위젯 위치 변경
2. 레이아웃 설정
3. 위젯 위치 변경하기
4. 위젯 위치 변경 확인하기
5. 투명 위젯 버튼 만들기
6. 복사한 HTML 소스
7. 투명 버튼 위젯 등록 확인하기
8. 같은 방법으로 위젯 4개 더 만들기
9. 직접 등록한 위젯의 위치를 변경하기
10. 투명 위젯 버튼으로 공간 확보 완료

네이버 블로그 홈페이지형 블로그 만들기 1, 2, 3편을 아직 못 보셨다면  순서대로 글을 보고 오시는 걸 추천드립니다. 단락별로 만드는 방법이 되어 있는 게 아니기 때문에 순서대로 본다면 좀 더 쉽게 나만의 홈페이지형 블로그를 만들 수 있습니다. 아래 관련 글은 1, 2, 3편 바로가기 링크입니다. 영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 제작하고 글을 작성하게 되었습니다.

유튜브 강의

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

01 / 02 / 03편 영상1,2,3

1. 레이아웃 위젯 설정 위젯 위치 변경

마지막으로 작업한 상단 스킨 영역 적용된 화면입니다. 현재 화면을 보면 카테고리 및 프로필 영역이 스킨 영역에 겹쳐있는 걸 볼 수 있습니다. 이제 이 부분들을 정리해보겠습니다.

방법 1) 프로필 영역-관리-레이아웃/위젯 설정 클릭

2. 레이아웃 설정

레이아웃/위치를 클릭하면 보이는 화면입니다. 상단의 12개의 레이아웃 중에 11번째 레이아웃이 선택되어 있어야 합니다. 우측 메뉴들 중에 설정해야 하는 부분이 있습니다. 화면에서 잘 안보이기 때문에 아래 글을 참고 부탁드립니다.

우측 레이아웃 설정 메뉴에서

방법 1)  전체 정렬-중앙으로 설정합니다.

방법 2) 글 영역 -넓게 설정합니다.

우측 메뉴 사용 설정에서

방법 3) 타이틀- 체크박스를 해제하여 비활성화(사용하지 않음으로) 시켜주시면 됩니다. 

*필요한 위젯은 체크를 하면 블로그에 노출이 됩니다. 원하는 위젯이 있다면 블로그 디자인 적용 후 자유롭게 사용하시면 됩니다.

3. 위젯 위치 변경하기

레이아웃, 메뉴, 위젯의 사용 설정을 끝내고 이제는 홈페이지형 블로그를 만들기 위해서 위젯의 위치를 변경해보도록 하겠습니다. 

방법 1) 상단에 남아 있는 위젯의 위치를 변경하도록 합니다. 위젯을 클릭한 상태로 드래그하여 아래로 모두 이동시켜줍니다.

*여기서 중요한 것은 메뉴 형태와 포스트 영역 사이에 기본 위젯이 없도록 만들어 주는 것입니다. 

위젯을 드래그하여 아래로 모두 이동시켰다면 하단에 미리 보리를 클릭하여 적용이 잘 되었는지 확인합니다.

4. 위젯 위치 변경 확인하기

위젯 위치 변경이 완료되면 아래 화면과 같이 보이게 됩니다. 레이아웃을 보면 상단에는  프로필 영역, 카테고리 등 위젯 메뉴들이 사라진 것을 확인할 수 있습니다.  그럼 이제 스킨 영역과 있는 부분을 투명 위젯 버튼을 만들어서 글 영역을 하단으로 밀어내는 작업을 해보겠습니다.

5. 투명 위젯 버튼 만들기

방법 1) 프로필 영역 관리-레이아웃-위젯 설정-위젯 직접 등록을 클릭합니다.

방법 2) 위젯명은 공간을 확보하기 위한 투명 버튼이기 때문에 "공간 1"로 저장을 하겠습니다.

방법 3) 이제 중요한 위젯 코드 입력입니다. 간단한 html 코딩으로 투명한 버튼을 만들어 보겠습니다. 메모장에 아래 html 소스를 복사해주시면 됩니다.

<table border="0">
<tbody>
<tr>
<td width="170" height="328" />
</tr>
</tbody>
</table>

위 소스를 복사하여 메모장에 저장해 두고 사용하시면 추후에 다른 디자인으로 작업할 때도 편합니다. 가로 값 170px, 세로 값 328px의 투명 위젯 코딩 소스입니다. width(가로 값)와 height(세로 값)은 기본적인 홈페이지형 블로그 만들기를 제작해보고, 추후에 응용해서 사용하실 때는 값은 변경해서 자유롭게 사용이 가능합니다.

6. 복사한 HTML 소스 

방법 1) 위에서 복사한 HTML 소스를 위젯 코드 입력에 붙여 넣기 합니다.

방법 2) 확인 클릭

7. 투명 버튼 위젯 등록 확인하기

위젯 직접 등록을 하면 아래 화면과 같이 "공간 1"이라는 위젯명으로 위젯이 1개 생성된 것을 볼 수 있습니다. 아래 화면과 같이 위젯이 만들어졌다면 이제 같은 방법으로 위젯 직접 등록으로 4개를 추가 등록하면 됩니다.

8. 같은 방법으로 위젯 4개 더 만들기

위젯 직접 등록을 클릭하여 위와 같은 방법으로 4개를 더 만들어 

방법 1) 클릭해서 위젯명을 넣습니다.(공간 2 , 공간 3, 

방법 2)메모장에 붙여 넣기 했던 html 소스를 위젯 직접 등록에서 위젯 코드에 붙여 넣기 합니다.

위 화면처럼 공간 1, 위젯이 만들어졌다면 이제 위젯의 위치를 변경해보겠습니다.

9. 직접 등록한 위젯의 위치를 변경하기

방법 1) 위로 올려줍니다. 

방법 2) 순서대로 공간 2, 드래그하여 아래 화면같이 정렬시켜줍니다.

공간 위젯은 상단으로 모두 옮기고 글 영역 하단에는 다른 메뉴들의 위젯이 들어가 있다면 이제 미리보기 하여 확인해 봅니다. 미리보기를 해서 이상이 없다면 적용을 눌러서 저장합니다.

10. 투명 위젯 버튼으로 공간 확보 완료

아래 화면과 같이 보인다면 투명 위젯이 잘 적용된 것입니다. 투명 위젯의 세로 값은 328px로 그만큼 글 영역이 아래로 내려간 걸 확인할 수 있습니다. 위젯이 투명이기 때문에 스킨 이미지와 겹치지 않고 공간만 확보된 걸 알 수 있습니다.

아직 스킨과 글 영역이 겹쳐있는 부분은 저번에 같이 만들어 봤던 버튼 1, 2, 3, 4, 5를 적용하면 그만큼 또 글 영역이 아래로 내려갑니다. 제가 직접 해봤을 때 가장 적절한 사이즈로 세로 값을 지정하고 해 봤기 때문에 우선 홈페이지형 블로그를 처음 만들어 보시는 분들은 연습으로 저와 같은 사이즈로 해보시는 것도 좋을 것 같습니다. 그럼 다음 포스트에서는 메뉴 버튼까지 적용시켜보고 원하는 페이지로 이동시키는 방법을 적어보도록 하겠습니다.

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