네이버블로그 상단에 추가 이미지 카테고리 만들기

① 블로그 위젯이 뭔가요?

블로그 위젯은 시계나 날씨등을 간단하게 보여줄수 있는 Html과 Script를 포함한 배너개념으로 볼수 있습니다. 위젯에 대해서는 아래의 관련글을 보시면 되겠습니다. 

② 블로그위젯을 활용한 블로그 카테고리 메뉴 만들기

오늘은 블로그위젯 직접등록기능을 활용한 블로그 카테고리 메뉴 만들기를 설명드리도록 하겠습니다. 카테고리 메뉴가 이미 있는데 왜 별도로 만들어야 하나요? 그 이유는 다음과 같습니다.

[pe2-image src=”http://lh4.ggpht.com/-V9bpFDaaFZg/Utop4sevT0I/AAAAAAAAAi4/h7h6X5uZDKw/s144-c-o/%2525EB%2525B8%252594%2525EB%2525A1%25259C%2525EA%2525B7%2525B8%2525EC%25259C%252584%2525EC%2525A0%2525AF_01.jpg” href=”https://picasaweb.google.com/102394476629197694908/201401#5970130310022516546″ caption=”” type=”image” alt=”블로그위젯_01.jpg” ]

 최대 4개까지만 추가 가능한 카테고리 상단메뉴

1) 블로그 메인화면 노출 설정을 프롤로그로 한 경우 카테고리 리스트자체가 보이지 않아 메뉴이동에 번거롭습니다.
2) 네이버에서 기본 상단에 제공하는 카테고리 메뉴의 경우 텍스트만 보여져 시인성이 떨어집니다.
3) 네이버 블로그 기본상단 카테고리는 총 4개까지 추가할수 있어 카테고리 메뉴가 많은 경우는 누락됩니다.

하지만 위의 제약사항들도 위젯 기능을 활용하여 카테고리 메뉴를 만들어 제공한다면 모두 극복될수 있는것입니다.

③ 블로그위젯을 이용한 메뉴만들기 과정

먼저 최종 완성된 위젯을 이용한 블로그 카테고리 메뉴입니다. 프롤로그 화면에서도 쉽게 메뉴이동이 가능하도록 되어 있습니다. 또 텍스트보다 시인성이 보다 월등한 것을 알수가 있습니다. (* 처음 세팅한 이후 좀 더 디자인적인 측면에서 어울리도록 재조정해나가면 됩니다.)

[pe2-image src=”http://lh6.ggpht.com/-ngwJPt9kRzU/Utop5lolENI/AAAAAAAAAi4/oeoq670vvFo/s144-c-o/%2525EB%2525B8%252594%2525EB%2525A1%25259C%2525EA%2525B7%2525B8%2525EB%2525A9%252594%2525EB%252589%2525B4%2525ED%25258C%252590%252520%2525281%252529.jpg” href=”https://picasaweb.google.com/102394476629197694908/201401#5970130325364609234″ caption=”블로그메뉴판 (1).jpg” type=”image” alt=”블로그메뉴판 (1).jpg” ]

  가장 먼저 해주실 작업은 가로 170 픽셀 크기의 이미지 디자인 작업입니다. 세로크기는 600픽셀이내에서 조정해주시면 됩니다. 주의할사항은 가로형 블로그인 경우 한 라인에 최대 5개의 위젯이 들어간다는 점입니다. 따라서 5개 단위로 배너 위젯을 준비하셔야 공백없이 채워질수 있습니다.

이미지가 준비되었다는 전제하에 관리메뉴 – “위젯 직접등록하기” 에 입력할 기본 소스는 아래와 같습니다.

<center>
<a target=”_blank” href=” “>
<img src=” “></a>

</center>

href=” ” 의 ” ” 사이에는 배너를 클릭했을 때 이동할 페이지의 URL 주소를 입력합니다. img src=” ” 항목의 ” ” 사이에는 이미지의 URL 주소를 입력합니다. (* 2개 모두 URL 주소를 입력하는 것이므로 웹서버에 업데이트되어 있어야 한다는 것을 의미합니다.)

▶ 이동할 페이지의 URL 주소의 확인

위의 이미지를 보시면 블로그의 카테고리 메뉴에서 각 항목 메뉴에 커서를 대고 마우스 오른쪽 버튼을 누르시면 팝업 창이 나옵니다. 여기서 “속성”을 선택하면 위의 윈도우 창이 나옵니다. 여기서 주소(URL)이라고 항목을 선택-복사하여 메모장등에 저장해둡니다. 이 주소가 각 카테고리의 개별 페이지 주소입니다.

[pe2-image src=”http://lh3.ggpht.com/-5uXsFt4DD6M/Utop7kuSY2I/AAAAAAAAAi4/mcWh8dyFtMQ/s144-c-o/%2525EC%2525B9%2525B4%2525ED%252585%25258C%2525EA%2525B3%2525A0%2525EB%2525A6%2525AC%2525EB%2525A9%252594%2525EB%252589%2525B4.jpg” href=”https://picasaweb.google.com/102394476629197694908/201401#5970130359479853922″ caption=”” type=”image” alt=”카테고리메뉴.jpg” ] 

▶ 이미지의 URL 주소의 확인

[pe2-image src=”http://lh4.ggpht.com/–4ff_acKTyk/Utop1Ua8plI/AAAAAAAAAi4/Zkt0RYMzZPo/s144-c-o/%2525EB%2525B8%252594%2525EB%2525A1%25259C%2525EA%2525B7%2525B8%2525EC%25259C%252584%2525EC%2525A0%2525AF%2525EC%25259D%2525B4%2525EB%2525AF%2525B8%2525EC%2525A7%252580.jpg” href=”https://picasaweb.google.com/102394476629197694908/201401#5970130252024555090″ caption=”” type=”image” alt=”블로그위젯이미지.jpg” ]

사전에 준비한 위젯 메뉴 이미지를 블로그의 메모게시판에 업데이트 해둡니다. 위의 카테고리 URL 확인방법과 동일하게 각 이미지위치에 커서를 대고 마우스 오른쪽 버튼을 눌러 속성-URL 주소를 확인한후 역시 메모장등에 기록해 둡니다.

<center>
<a target=”_blank” href=”카테고리 URL “>
<img src=”이미지 URL “></a>

</center>

이제 소스가 완성되었습니다. 매우 간단한 코드이기 때문에 바로 타이핑을 쳐도 되겠지만 첨부파일에 코드값을 같이 등록했으므로 필요하신분은 다운로드 받아 쓰시면 되겠습니다.

이제 모든 준비가 끝났으므로 블로그 관리메뉴 – 레이아웃 위젯설정 – 위젯직접등록 beta 메뉴에 완성된 코드값을 입력하시기만 하면 됩니다.

오늘은 블로그 위젯을 블로그 카테고리 메뉴로 만드는 활용하는 방법에 대해서 설명드렸지만 만약 자사 제품이나 서비스의 홍보목적을 위한 기업 블로그라면 제품판매페이지 , 상세 상품정보 페이지등으로 연결하는 일반 배너처럼 활용하실수도 있습니다.

또 개인블로그라면 가장 인기가 많은 포스트라든가 많은 시간을 정성들여 작성한 베스트 글등과 연결시켜 사용하는 응용도 가능합니다.