본문 바로가기

Design study/네이버블로그

네이버 홈페이지형 블로그 링크걸기 - 두번째 -

네이버 홈페이지형 블로그 링크걸기 -두 번째-

 

네이버 블로그 투명 위젯을 사용한 링크걸기 두 번째 내용은 다수의 링크 방법입니다.

앞서 진행했던 내용과 크게 차이는 없으니, 쉽게 적용할 수 있을 겁니다.

 

 

위의 스킨을 확인해보면 이전 강좌와는 다른 점이 있을 겁니다.

바로 버튼이 한 줄 더 추가되어 있는데요.

이전 강좌에선 링크가 가능한 부분마다 하나의 버튼이 들어가 있어 해당 부분 또는

투명 위젯 전체에 링크를 연결시켰었는데요, 이번 내용에선 두 가지 버튼에 각각 따로

링크를 연결시킬 겁니다.

 

이전 강좌와 크게 다르진 않으니 소소한 부분은 그냥 넘어가겠습니다.

 

스킨을 제작하고 나서, 우리가 필요한 이미지맵 좌표값을 찾기 위에 이미지를 잘라줍니다. (170x600px)

 

 

이미지를 잘라내고 다음으로 필요한 건 버튼 각각에 대한 좌표값이겠죠?

위 버튼과 아래 버튼의 픽셀 좌표값을 각각 확인해주세요.

 

자 이제 투명 위젯을 수정하여 링크를 연결해볼 겁니다. 

복잡한 거 없이 딱 한 줄만 더 복사해줍니다.

 

<img src="이미지 주소.jpg" usemap="#map_name1" />  

<map name="map_name1">  
<area shape="RECT" coords="0,424,170,489" href="링크 주소 A" target="_top" />

<area shape="RECT" coords="0,504,170,570" href="링크 주소 B" target="_top" />  <- 추가!

</map>


이미지맵 영역 내용을 복사해서 한 줄 추가하고 버튼의 각각 좌표값을 넣어 주면 끝입니다.

투명 위젯을 수정하고 적용시킨 후 확인을 해보시면 위 버튼과 아래 버튼이 각각 다른

링크가 연결되었을 겁니다.

 

이와 같이 응용을 한다면 링크 2개가 아니라 10개, 그 이상도 가능하니 한번 적용을 해보세요!

반응형