[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 위젯 링크 설치

네이버 블로그 홈페이지형으로 바꾸는 법

 

본 포스팅에서는 네이버 블로그를 홈페이지형으로 바꾸는 마지막 단계인 위젯에 링크를 설치해보자!

 

총 4단계: 1. 스킨 제작 → 2. 스킨 설정 → 3. 위젯 설치하고 크기 조정하기 → 4. 위젯에 링크 달기

* 만약 아직 블로그 스킨을 제작 및 스킨 설정 & 위젯 설치를 하지 못하셨다면, 아래 포스팅을 먼저 참고해주시기 바랍니다 :-)

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 제작

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 제작

 

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 설정 & 위젯 설치

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 설정 & 위젯 설치

 

---

 

4. 위젯에 링크 달기

 

1) 투명 버튼 만들기

이제 마지막 각 버튼에 링크를 달아줄 차례!

링크를 달아주기 위해서는 다시 포토샵의 도움을 살짝 받아야 한다.

 

1- 먼저 포토샵에서 새로운 캔버스를 버튼 위젯 사이즈와 동일하게 만들어준다. (170px * 150px)

투명 위젯 만들기 1

사이즈는 위젯 설치 시, 버튼 위젯 크기 였던 170px(가로) * 150px(세로)를 입력해주었다.

그리고 제일 중요한 것! 배경 내용을 꼭 '투명'으로 설정해준다.

 

1- 2가지 형태의 파일로 저장해준다.

투명 위젯 만들기 2

왼쪽에 보이는 것과 같이 네모가 반복되는 캔버스가 열리면 배경 내용을 '투명'으로 잘 설정한 것!

* 만약 흰색이라면 다시 만들어주세요 :-)

 

그리고 바로 Ctrl+Shift+Alt+S를 눌러 웹용으로 저장한다. 

이때, 오른쪽 상단에 보이는 저장 형식을 .png 와 .jpeg 두 가지 형태로 저장한다.

* 난 .png 형태 파일을 '투명 위젯'이라고 저장하고, .jpeg 형태 파일을 '투명 위젯 2'라고 저장했다.

 

 

2) 투명 버튼 이미지 주소 따기

 

1- 투명 위젯.png 파일을 블로그에 비공개 발행한다.

포토샵에서 투명 위젯.png 파일을 잘 저장했다면, 내 블로그에 들어가 새로 글쓰기를 한다.

그리고 사진을 누른 다음 본문에 사진을 넣어 비공개로 발행한다.

 

2- 투명 위젯.png 의 이미지 주소를 복사한다.

비록 눈에 보이진 않지만 투명 위젯.png 파일이

그러면 마우스 오른쪽 키를 눌러 이미지 주소 복사를 누른다.

이때 만든 이미지는 절대 삭제하면 안된다. 나중에 찾을 수 없는 위젯이라고 뜰 수 있기 때문! (그냥 비공개로 둘 것)

 

3- 복사한 이미지 주소를 메모장에 입력해둔다.

복사한 이미지 주소를 메모장에 잘 입력해두면 완료.

 

 

3) 투명 버튼 링크 주소 넣기

 

1- Imagemapic 이미지맵 제작 프로그램을 다운받는다.

이제 Imagemapic 프로그램을 활용하여 링크를 넣을 코드를 만들어줄 차례이다.

먼저, Imagemapic을 다운받고 실행한 다음, 투명 위젯 2.jpeg 파일을 열어준다.

 

→ Imagemapic: 이미지맵 제작 프로그램(네이버 소프트웨어) 

https://software.naver.com/software/summary.nhn?softwareId=MFS_120371

* 해당 프로그램은 네이버 소프트웨어에서 제공하는 프로그램으로 안심하고 다운받으셔도 됩니다 :-)

 

2- 링크를 입력한다.

 

①~② 빨간 네모 모양의 버튼을 눌러 네모 박스를 드래그 해준다. 

③ Shape Browser 박스를 열어준다.

④ Links to에 연결하고 싶은 링크를 주소를 넣고, Target에는 _top를 입력해준다.

* Target에 들어가는 _top은 해당 버튼을 눌렀을 때 새창이 열리지 않고 현재 페이지에 열라는 명령입니다. 

 

그리고 Close 버튼을 누른다.

 

3- 링크가 잘 작동하는지 확인한다.

① Preview in Browser 버튼을 누르면 링크가 잘 걸려있는지 확인할 수 있는 새창이 오른쪽과 같이 열린다. 

② 투명 위젯이기 떄문에 보이지는 않지만, 글씨 밑 부분을 클릭하면 내가 걸어둔 링크가 잘 작동하는지 확인 할 수 있다. 

 

4- 링크가 들어가 있는 코드를 복사하여 메모장에 입력한다.

① 만약 링크가 잘 걸려있다면, Generate Code Window 버튼을 눌러준다.

② 그리고 상단의 코드를 복사한다.

 

 

4) 마지막 링크 코드 만들기

1- 이미지 주소를 링크 코드에 삽입한다.

① 1- 투명 위젯.png 파일 활용에서 복사했던, 이미지 주소를 img src="여기" 에 복사해준다.

* 큰따옴표 " " 가 지워지지 않게, 투명_위젯_2.jpg만 지우고 입력해주세요.

② mapname을 어느 버튼인지 헷갈리지 않도록 다른 이름으로 입력해주세요. 이때, .jpg는 지워지지 않도록 이름만 원하는대로 변경해준다.

③ 드디어 코드가 완성! 완성된 코드를 잘 복사한다.

 

2- 네이버 블로그 레이아웃 관리자에서 위젯 코드를 입력한다.

4- 위젯에 링크 설치

드디어 블로그로 돌아왔...다!!(짝짝)

블로그 관리창에서 <꾸미기 설정> → <레이아웃·위젯 설정> → <위젯 사용 설정> 에서 링크를 넣고자하는 위젯에 Edit를 눌러준다. 그리고 기존의 위젯 코드는 삭제하고 앞서 완성된 코드를 붙여넣기 해준다음 적용 버튼을 눌러주면 완료!

 

만약 5개의 버튼이 있다면, 3. 투명 버튼 링크 주소 넣기 부분부터 반복해주면 설치가 완료된다.

그리고 마지막으로 블로그 메인으로 돌아가 위젯이 잘 작동하는지 확인해주면 진짜 끝.👏

 

비록 내용이 많지만 막상 천천히 잘 따라가다보면 그리 어렵지 않다.

그리고 한 번 해보고나면 다른 홈페이지형 블로그에 들어가서 어떻게 위젯을 설치하고 버튼을 넣었는지 볼 수 있어 다른 형태의 스킨 제작 및 버튼 삽입도 시도도 해볼 수 있을 것 같다.

 

홈페이지형 블로그 만들기 끝!

 

위젯 설치를 위해 참고했던 사이트 👍
1) 한국 관광 공사 블로그: https://blog.naver.com/korea_diary
2) 호주 유학원 블로그: http://blog.naver.com/PostThumbnailList.nhn?blogId=htedu123&from=postList&categoryNo=1