본문으로 바로가기

네이버 블로그 홈페이지형 만들기 2

category 블로그 &/네이버 2018.02.05 10:46


네이버 블로그 홈페이지형 만들기 그 이후입니다.

앞선과정은 잘 하셨나요.


이제부터는 헷깔리기 쉬운 과정입니다.

설명을 쉽게하는 것이 오히려 더 어려웠습니다.

제생각과는 또 다르게 이해할 수 있으니까요.


앞선 과정을 보시려면

2018/02/05 - [블로그 &] - 네이버 블로그 홈페이지형으로 만들기 1

참고하시고 계속하겠습니다.



이제는 투명위젯(레이어)가 제대로 적용이 되었는지 보겠습니다.

위의 화면은 블로그로 돌아와서 배경화면을 드래그하면 투명위젯(레이어)가 나타납니다.

익스플로러에서 드래그가 안되면 크롬에서 하시면 됩니다.


2018/01/17 - [팁 TIP/구글 애드센스] - 크롬 브라우즈 설치   크롬 브라우즈 설치 참고하세요.


이 화면을 캡쳐합니다.

캡쳐한 화면과 배경이미지를 같이 포토샵으로 가져와서 합칩니다.

메뉴를 투명레이어에 맞춰서 넣기 위함인데요.

메뉴를 넣은 이미지를 다시 앞선 과정에서 처럼 블로그로 업로드합니다.

그럼 아래처럼 나타나죠.



실례를 보여주기 위해 투명레이어를 그대로 둔채 올렸습니다.

포토샵에서 캡쳐화면의 눈을 꺼면 배경이미지만 남습니다.

포토샵으로 돌아갑니다.



투명레이어를 하나만 따냅니다.

투명레이어 크기는 위의 치수와 는 상관없이 170 * 520 으로 만듭니다.



포토샵 레이어 눈을 모두 꺼고 투명으로 png 파일로 저장을 합니다.

다섯개를 만듭니다.






까맣게 나온 이미지가 투명이미지입니다.

이렇게 만든 5개 이미지를 게시판에 올립니다.


이미지를 올려 놓고 이미지 주소를 가져옵니다.

위의 화면은 크롬에서 나온 화면이면

익스에서는




이 화면은 익스에서 나타나는 화면입니다.

익스플로러에서는 이미지를 올린 화면을 드래그하면 투명파일의 모습을 볼 수 있습니다.

주소가 제법 깁니다. 전체다 복사하셔야 합니다.

5개 모두 주소를 확인하고 보관합니다.

이미지 게시판은 나중에 삭제하셔도 이상없습니다.

<이미지를 삭제하시면 당장은 나오는데 한참지나면 이미지가 안보입니다. 지우시면 안되겠네요.>



게시판주소도 같이 확인해 봅니다.

이 화면은 익스에서 나오는 화면입니다.

마찬가지로 주소를 별도 보관합니다.

 


 

포토샵으로 다시 가볼까요.


 

클릭하면 이동할 수 있는 메뉴의크기를 정해주는 과정입니다.

홈으로 가기 위해서는 어디를 눌러야 되는지를 나타내는 겁니다.

위의 화면에서는 0, 470입니다. 좌상 우하 위치를 기억해 둡니다.

메뉴가 똑같은 위치에 있기 때문에 이 한가지 위치로 전체에 적용하면 됩니다.

하나의 투명레이어에서 메뉴위치를 나타내기 때문에 5개가 똑 같은 위치에 있게 되죠.





소스메모장 열면 이렇게 나와있습니다.


웹형 블로그 소스.txt


<img src="링크용투명이미지주소" width="170" height="520" usemap="#투명1" 

<map name="투명1" id="투명1">

<area shape="rect" coords="0,441,169,519" href="게시판주소" target="_top"/>

</map>

 

각각 투명1부터 투명5까지 해당되는 주소를 넣어주시면 됩니다.

처음에 투명을 만들기 위해 넣어둔 소스는 이제는 없어도 됩니다.

위의 코드만 들어가면 됩니다.

 

target="_top"는 현재창에서 열기
target="_blank"는 새 창에서 열기

 

적용해 보겠습니다.



위의 상황에서 메뉴의 위치가 다를 때는 하나하나 위치를 확인해서 넣어주셔야 하고

하나의 메뉴가 두개의 투명레이어에 걸쳐 있는 경우에는 두 개군데의 좌표값을 넣어 주셔야 합니다.


<img src="링크용투명이미지주소" width="170" height="520" usemap="#투명1"
<map name="투명1" id="투명1">
<area shape="rect" coords="0,441,169,519" href="블로그 주소" target="_top"/>
</map>

<img src="링크용투명이미지주소" width="170" height="520" usemap="#투명2"
<map name="투명" id="투명2">
<area shape="rect" coords="0,441,169,519" href="블로그주소" target="_top"/>
</map>

 

이 코드는 홈으로 돌아가는 메뉴가 투명1 과 투명2에 걸쳐있는 경우입니다.

웹페이지형은 홈으로 돌아가는 메뉴가 없어 만들어 주시면 방문객이 펀할 겁니다.

 


댓글을 달아 주세요

티스토리 툴바