네이버 블로그에 위젯달기

 화려하게 디자인된 다른 기업들과 사장님들의 블로그를 보고 많이 부러웠습니다.

홈페이지형 블로그 제작을 해주시는 곳도 많아서 크몽이나 숨고 같은데서 구경도 많이 했구요. 

 

정말 전문가들은 다르구나 싶었습니다. 

그렇게 멋지고 편리하게 제작해주는데도 비용은 제 생각보다 비싸지도 않았구요. 

 

그런데, 저는  많은부분이 필요한게 아니라 위젯에 카테고리 연동만  하고 싶었던지라...

 

여기저기 찾아보고 직접해봤습니다. 

 

네이버에는 현재 문서작성 툴을 두가지 방식을 혼용하고 있는데요  

 

1. 첫번째로 제가 해본 방법은  스마트에디터 one을 사용한 것이었는데  어찌 어찌 성공은 했습니다만, 

 

2. html을 잘 모르는 제가 느끼기에는 스마트에디터 one 보다는 스마트에디터 2.0를 이용한 방식이 훨씬 편했습니다. 

 

 

문제는 스마트 에디터 2.0 은  두달 있으면 사라진다는 겁니다.

 

(뭐....어쩌겠어요. )

 

글 작성할때 에디터 변경은 블로그 관리 → 기본설정 → 기본에디터설정   경로로 들어가서 하시면 됩니다. 

 

11월에 종료되는 스마트에디터2.0

 

 

---

 

(아직은 사용 가능한) 스마트에디터 2.0 를  활용한 위젯은 아래 방식으로  만들었습니다. 

 

1. 위젯 디자인을 합니다.  네이버 위젯은 크기에 제한이 있어요. 세로 600px, 가로 170px 이니까 위젯을 그릴때 크기 조절을 잘 해야 합니다. (이것만 해놓으면 절반은 다한거에요) 

→ 저는 포토샵으로 캔버스 크기를 조정해서 만들었지만 

→ 사무실에는 포토샵을 설치할 수 없어  파워포인트를 사용해서 만들었던 적도 있습니다

→ 저같은 경우에는 그냥 네모에  글자만 들어간 상당히 단순한 모양이기 때문에 파워포인트로 만드나 포토샵으로 만드나 크게 차이는 없었습니다. 

 

   2. 디자인한 그림을 비공개글로 저장을 하려고 합니다. 

 

 

 

글작성을 누르고 사진을 첨부합니다. 

 

그리고 인터넷 창을 하나 더 띄워서 블로그에 다시 접속합니다. 

왔다갔다하려구요 

 

그럼 글 작성중인 인터넷 창과  내 블로그 메인화면이 열린 인터넷 창  두개가 있지요?

방금  새로 열었던 인터넷 창  블로그 메인 화면에서  저 위젯을 눌렀을 때 내가 연결하고 싶은 곳을 찾습니다.

 

저는 외국인 고용관리라는 위젯을 누르면 해당 카테고리로 바로 이동하게 만들고 싶습니다. 

그럼, 외국인 고용관리라는 카테고리의 주소를 복사합니다. 

 

 

 

외국인 고용관리 제목옆에서 마우스 우클릭, 링크 주소를 복사합니다. 

 

이제 옆에 글을 작성중이던 인터넷 창으로 다시 돌아갑니다. 

 

3. 첨부한 사진을 선택처리 합니다. 

사진을 선택을 해서 영역지정 블럭을 잡습니다. 

 

 

사진에는 영역처리 되어 있는 상태에서 우측 상단의 url 버튼을 누르고 

아까 복사한 카테고리의 주소를 url 안에 붙여넣기 합니다. 그리고 적용을 눌러요 

 

4. 그리고  우측 하단의 HTML 으로 이동합니다. 

 

 

그러면 이렇게 위 사진처럼 코드가 작성된 것이 있는데요 , 그냥 이걸 복사해서 메모장이나 한글 등에  따로 다시 저장합니다. (솔직히 하다보면 굳이 이렇게 따로 복사 안해놓아도 되는데 처음할때는 복사 해놓는게 덜 헷갈릴 것 같아서  적어봤습니다.) 

 

저는 메모장보다는 한글이나 워드가 시각적으로 조금더 편하기에 워드에 코드를 복사 붙여넣기 한 사진을 올리겠습니다. 

 

word에 복사된 상태

 

5. 이제 작성중이던 글을 마무리 합니다. 

네, 작성중이던 글은 사진하나 달랑 등록한게 다입니다. 

저거 html  코드 몇 줄 따자고 사진 등록하고 url 입력하고 한겁니다. 

무사히 html 항목에서 복사를 다 마치고 나면  글을 비공개로 저장합니다. 

남들이 볼 필요는 없으니까요 

(내가 할줄 알면 그냥 입력하고 말지....모르니까  이 고생을)

 

 

이제 위젯관리로 넘어갈 차례입니다. 

 

6. 관리  →꾸미기 설정 → 디자인 설정 → 레이아웃, 위젯 설정으로 이동합니다. 

 

 

 

7. 저기에 눈에 띄게 + 위젯직접 등록 BETA  라고 되어 있는걸 누릅니다. 

 

 

 

 

8. 그리고 위젯 이름을 입력하고 , 위젯코드에 아까 메모장이나 한글 워드에 복사해놓은 html 코드를 붙여넣어요 

 

다음을 누르고 

 

미리보기 해서 크기랑 잘 들어가나 확인하고 

 

 

등록을 누릅니다. 

 

9.  위젯을 이동시켜서 내가 원하는 위치에 배치해 줍니다.  글 영역을 "넓게"로 설정하면  170px 기준 5개 위젯이 한줄에 배치 됩니다. 

 저는 나중에  글 영역을 " 보통"으로 바꿨고 이런 경우에는  한줄에 최대 4개가 들어가게 되었습니다. 

제가 선택한 스킨에서는 위젯을 한줄에 두개나 세개만 배치하는 것이 불가능했습니다. (이건 스킨을 변경하거나 코드를 변경하는 등 연구를 해봐야 하는데  html 처럼 간단한 것도  할 줄 몰라서 그게 언제가 될지는 모르겠습니다.) 

 

글 영역이 (넓게)로 설정되어 있을때 위젯 배치

 

 

10. 적용을 누르고 빠져나와 확인해 봅니다. 

 

 

 

 

잘 붙어 있네요.  이제 저 위젯을 누르면 관련되는  카테고리 영역으로 이동합니다. 

딱 제가 필요한 만큼은 완성이 되었어요. 

 

---

 홈페이지형 블로그 제작은

전문가에게 맡기는게 더 깔끔하고 제대로 갖춘 티가 나겠죠. 시간과 노력도  소요되지 않으니 훨씬 좋겠습니다. 

...너무 당연한 말이지만 

 

하지만 개인 취향에 따라 저처럼 작은 부분만 필요하신 분들이라면 이래저래 만들어보는것도 재미는 있을 듯 합니다. 

 

 

끝.