네이버 홈페이지형 블로그 응용편 05-1.배너 위젯 등록하기
응용 5편에서는 링크 배너 위젯 등록하는 방법을 본격적으로 알아보도록 하겠습니다. 네이버 홈페이지형 블로그 만들기는 위젯을 활용법은 기초 편에서도 다뤘던 내용입니다.
위젯을 활용한 블로그 꾸미기를 이전에 한번 해보셨던 분은 크게 어렵지 않게 응용 편의 배너 위젯 등록을 할 수 있을 것입니다. 아직 기초 편을 못 보신 분들은 응용 편으로 홈페이지형 블로그를 제작하기 전에 기초 편을 먼저 보고 오시는 것을 추천합니다.
홈페이지형블로그 응용5-1편 목차
1. 하단영역 패턴 색상 지정
2. 스킨 씌우기
3. 위젯을 사용하는 방법
4. 글쓰기
5. 사진 불러오기
6. 글 발행하기
7. 이미지 속성 복사
8. 메모장에 붙여넣기
9. 분할한 이미지 발행
*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.
유튜브 강의홈페이지형 네이버 블로그 만들기01 / 02편
이전 글에 이어서 잘라낸 이미지들을 스킨에 적용하는 방법을 하나씩 해보도록 하겠습니다. 응용1편부터 보신 분들은 아시겠지만 저의 경우 스킨 디자인 시안을 미리 만들어 놓았기 때문에 임의로 올렸던 스킨 배경 이미지가 디자인이 되어있는 배경으로 적용했지만 여러분들은 아직 디자인이 완료된 스킨 배경이 적용이 안되어 있는 게 맞습니다. 이제 디자인이 완료된 스킨 배경을 블로그에 적용해보도록 하겠습니다.
01. 하단영역 패턴 색상 먼저 지정하기
운영 중인 블로그에서 프로필 영역 하단의 [관리]- [꾸미기 설정]- [세부 디자인]으로 이동합니다. 또는 내 블로그 우측 상단의 [내 메뉴]-[리모컨]을 클릭해도 됩니다. 이제 리모컨 기능으로 블로그 스킨을 씌워보고 하단의 패턴 영역의 색상을 지정해서 적용해보도록 하겠습니다. 리모컨은 블로그를 구성하는 요소들을 직접 꾸밀 수 있는 기능입니다. 리모컨 메뉴 중에 아래 화면에 있는 (4. 하단 영역 패턴) 색상을 먼저 변경해보도록 하겠습니다.
예를 들어 하단 영역 패턴 색상을 흰색으로 지정을 하지 않고 아래 화면과 같이 빨간색이나 파란색으로 지정을 하게 되면 스킨의 배경 색상과 어울리지 않고 홈페이지형 처럼 보이지 않기 때문에 되도록이면 컬러는 흰색으로 지정을 하도록 합니다.
하단 영역(패턴)은 #fffff(흰색)으로 지정을 하고 이제 스킨 배경을 등록해보도록 하겠습니다. 리모콘 메뉴 중에서 [스킨 배경]-[디자인]-[직접 등록]으로 이미지를 불러와서 등록하면 됩니다.
02. 스킨 씌우기
[스킨배경]-[디자인]-[직접등록]을 눌러서 스킨 배경. jpg를 선택합니다. 이 스킨 배경은 가로 2000px로 제작하여 대부분의 모니터 해상도 환경에서 브라우저를 최대화하여도 반복 없이 보이도록 작업을 해둔 것입니다. 상단 영역의 배경은 브라우저 창을 기준으로 가운데 정렬하여 배경으로 지정이 됩니다.
블로그 스킨 배경이 잘 등록이 되었다면 그럼 위젯의 레이아웃 그리고 설정하는 방법을 알아보도록 하겠습니다.
03. 위젯을 사용하는 방법
다시 레이아웃/위젯 설정으로 와서 위젯을 하나씩 등록해보도록 하겠습니다. 위젯명의 경우 이미지의 메뉴명과 동일하게 적어주면 추후 위젯이 많아졌을 때 수정 또는 이동을 시킬 때 찾기가 쉽고 정리하기 수월합니다.
1번째 줄에 들어가는 위젯은 로고 이미지로 위젯명은 logo1_1~1_5까지 등록을 했습니다. 기본 편을 보고 위젯을 활용하여 홈페이지형 블로그를 만들어 보셨던 분들은 이미 아는 부분이지만 한번 더 설명을 하고 넘어가도록 하겠습니다.
한 줄에 5개의 위젯이 등록이 되어야지 다음 줄로 위젯이 들어갈 자리가 생깁니다. 한 줄에는 무조건 5개의 위젯이 등록이 되어야합니다.
이제 본격적으로 위젯을 하나씩 등록해보도록 하겠습니다. 위 화면 처럼 로고 부분이 logo1_1 위젯으로 들어갈 수 있게 간단한 코딩 작업을 해보도록 하겠습니다.
04. 글쓰기
버튼 이미지의 웹상 경로가 필요하기 때문에 분할해 놓은 로고 이미지를 글로 발행하여 네이버 블로그 주소를 갖는 이미지 경로를 얻어보도록 하겠습니다. 기존에 홈페이지형 블로그 만들기 기초 편에서도 해봤던 부분이기 때문에 크게 어렵지 않을 것 같습니다. 프로필 영역 하단에 있는 [글쓰기]를 클릭합니다.
05. 사진 불러오기
위젯명과 이미지와 관련된 이름으로 글쓰기 제목을 넣습니다. 저는 로고1_1로 입력했습니다. 글쓰기 상단 메뉴에 있는 사진을 눌러서 분할했던 로고 이미지를 불러옵니다.
06. 글 발행하기
이미지를 불러왔다면 우측에 있는 발행 버튼을 클릭하여 비공개로 설정한 후 [발행]을 눌러주면 됩니다.
07. 이미지 속성 복사하기
발행된 포스트에 있는 로고 이미지에 우클릭하여 나오는 메뉴 중에 [속성]을 선택합니다. 속성 중에 주소(URL)의 값을 전체 드래그하여 복사한 뒤 메모장에 붙여 넣기 합니다.
08. 메모장에 붙여넣기
메모장에 붙여 넣기 할 때는 각 링크를 구분할 수 있도록 로고 1_1 URL 주소라고 링크명을 함께 적어줍니다.
09. 분할한 이미지 모두 글쓰기로 발행하기
위와 같은 방법을 분할해 두었던 이미지들을 모두 글쓰기 하여 네이버 블로그 주소를 갖는 이미지 경로를 복사하여 메모장에 붙여 넣기 해주면 됩니다. 아래 화면과 같이 링크 위젯 버튼에 들어가는 이미지들은 모두 이미지의 경로를 적어두어야 합니다.
메모장에 붙여넣기한 이미지의 경로는 이렇게 위젯의 1번째 줄에 로고 1_1, 2번째 줄 1_1, 3번째 줄 1_1, 4번째 줄 1_1로 구분하여 저장합니다. 다음 편에서 이미지 경로를 가지고 위젯을 등록해보도록 하겠습니다.
댓글