네이버 블로그 홈페이지형 블로그 꾸미고 위젯 등록하기_2탄

썸네일

 

홈페이지형 블로그 만들기 2탄 시작합니다

 

그리구

1탄 보지 못하셨더면 먼저 해주세요

1탄을 먼저 셋팅해야  2탄이 가능합니다!

네이버블로그 홈페이지형 투명위젯 레이아웃 적용하기

1) 미리캔퍼스로 디자인하기

디자인 플랫폼 미리캔버스

 

미리캔퍼스로 들어가서 로그인을 해주세요

 

미리캔퍼스

 사이즈는 2000 * 700px 설정해주세요

 

원하시는 크기로도 가능합니다

만드시는 분마다 조금씪 다르더라고요

 

미리캔퍼스로 배경, 텍스트, 모양, 일러스트, 그림, 사진등을 사용해서

위젯 1,2,3,4,5 부분에서 원하는 카테고리 메뉴를 모양, 그림, 텍스트로

디자인해 주시면 됩니다

 

디자인이 어려우시면 텟블릿에 가서 원하시는 디자인을

선택하셔도 될 것 같아요!!

 

저장하고 png나 jpg 로 다운로드 해주세요

 

2) 디자인한 파일을 등록하기

 

자신의 블로그에 가서

 

블로그 관리 - 꾸미기설정 - 세부디자인설정 - 스킨배경 - 직접등록 - 파일등록 으로

 

들어가서 디자인한 파일을 등록해주세요!!

 

 

이렇게 설정된 모습을 볼수 있습니다.

 

3) 직사가형를 하나씩 캡처하기

사각형(파란색)를 하나씩 캡처해 주세요. 사각형(파란색)를 하나씩 캡처해 주세요.

블로그 위부분을 마우스로 드래그를 해보면

이렇게 5개의 직사각형(파란색)이 보일 꺼예요!!(1탄을 해야 보입니다)

 

그리고 위젯 1,2,3,4,5 부분이 직사가형(파란색)안에 위치하도록

위치를 조절해주셔야되요

 

* 정중앙이 아니더라도 사각형안에 최대한 많이 들어오면 됩니다.

 

 

5개의 직사각형(파란색)를 하나씩 캡처해 주세요

 

알약 캡처 프로그램이나 웨일 브로우저를 사용하시면,

위에 캡처를 직접지정을 사용할 수 있습니다.

 

저장할떄 이름은 간단하게 숫자로 차례대로 저장해 주세요

차레대로 저장해야 나중에 편안해요

 

이부분부터는 조금 어려울수 있는 부분이니, 잘 따라해주세요!!

 

4) imapic2 다운로드하기/ 설정하기

 

imapic2.exe

0.11MB

 

 

 

imapic2 다운로드 해주세요.!!

 

 

imapic2를 열려주시고 

 

Flie - open image 들어가서 아까 캡처한 파일을 불러와 주세요.

 

 

첫번쨰에 있는 빨간색 네모 버튼을 이용해

 

자신히 만들어 놓은 아이콘(위젯1)영역을 잡아줍니다,

 

영역을 잡으면 노란색으로 되요

 

 

노란색 영역에 마우스 오른쪽 버튼을 클릭하면

 

Edit Prpperties 클릭

 

 

Links to - 링크를 연결해주는 부분이예요

블로그 카테고리에서 자신이 설정할 카테고리를 오른쪽 마우스를 클릭하면 링크주소 복사해 붙여주세요!!

 

Target - _blank는 새 창이 뜨고 _ top은 지정한 곳으로 이동한다는 뜻입니다

저는 5개 전부다 _top 클릭

 

 

이렇게 설정을 하고

 

 

 

메뉴부분에 6번쨰인 메모장 버튼을 클릭

 

 

 

클릭하면 이런 코드가 뜨게되요!!

뮈가 어려워보이는게 뜨지만 

 

밑부분창은 보지말고 위부분창만 봐 주세요

 

3개만 제대로 하면 됩니다

 

첫번쨰는

<img src="1.jpg" 부분을

<img src="" 이렇게 만드시고

 

두번째는

코드에 있는 .jpg만 다 지워주세요!!

 

원래코드

<a href=""><img src="1(1).jpg" alt="1(1).jpg" usemap="#1(1).jpg" style="border: 0;" /></a>

<map name="1(1).jpg">
    <area shape="rect" coords="0,401,159,596" href="" target="_top" alt="" />

</map>

 

수정한 코드(두번째까지)

<a href=""><img src="" alt="1(1)" usemap="#1(1)" style="border: 0;" /></a>

<map name="1(1)">
    <area shape="rect" coords="0,401,159,596" href="" target="_top" alt="" />

</map>

 

세번쨰는

위젯1 이미지를 오른쪽 마우스를 클릭하면 이미지 주소 복사를 클릭

 

<img src="" 큰따옴표 안에 붙여넣어 주세요!!

 

예시

<a href=""><img src="https://blogfiles.pstatic.net/MjAyMjEwMTJfODkg/MDAxNjY1NTU5OTM5OTEz.
duKMgq7WLnhWk_rpf-zWcovgx0G59UKBX3h84X392Uog.0AcE0rCOJYmNFblvck_H3jPRy7-Fkm3Z-9Au2Q4tZa8g.
PNG.hanna7932/%ED%88%AC%EB%AA%85%EC%9C%84%EC%A0%AF.png" alt="1(1)" 
usemap="#1(1)" style="border: 0;" /></a>

<map name="1(1)">
    <area shape="rect" coords="0,401,159,596" href="" target="_top" alt="" />

</map>

 

이제 거의 다와가요!! 끝까지 회이팅 해봐요~~

 

 

 

맨 앞쪽에 <a href="">이부분만 빼고 복사하고

 

블로그 관리로 가서

 

관리 - 꾸미기설정 - 레이아웃설정에 들어가서

 

투명한 위젯인 EDIT를 클릭해서 전에 있는 코드를 전부 지우시고

아까 복사한 코드를 붙여놓기 해주시면 완성!!

 

메인 블로그에 들어가서 설정된 카테고리로 들어가는지

확인하시면 진짜로 끝이납니다!!

 

마지막으로 이 과정을 아이콘(위젯1,2,3,4,5)에 하나씩 등록 해주시면 되요!!

 

 

1탄을 안 보셨다면 이곳으로

네이버블로그 홈페이지형 투명위젯 레이아웃 적용하기

<추천>

종로텐동맛집)저스트텐동 익선점

평택/고덕초밥무한리필맛집) 스시다이닝준 베스트원점