블로그에 contact me 배너달기, 소스첨부합니다.

블로그에 contact me 배너달기, 소스첨부합니다.

외국의 블로거들은 자신의 블로그와 소통할 수 있는 방법들을 여러 가지로 링크를 해두었는데...

국내 블로거들은 그런 부분에 소월한 듯 합니다.

그래서 나름 많이들 사용하는 메신저와 SNS 배너를 만들어 보았습니다.

 


위의 이미지는 그냥 첨부한 것으로 그 아래 이미지는 이미지에 맵을 정하고 링크를 달아본 것입니다.


이것은 만들어 본 배너입니다..  저기 각각의 이미지에 마우스를 올리면 마우스가 손가락으로 변하면서 링크를 걸게하고 싶으면...

<IMG border=0 hspace=0 src="https://t1.daumcdn.net/cfile/tistory/195F3C454D6BA01E05" width=189 height=340 useMap=#ImageMap1><MAP name=ImageMap1><AREA href="http://nateonweb.nate.com/" shape=rect target=_blank coords="9, 54, 69, 83"><AREA href="http://www.skype.com" shape=rect target=_blank coords="10, 88, 92, 116"><AREA href="http://explore.live.com/" shape=rect target=_blank coords="10, 120, 156, 139"><AREA href="http://talk.kakao.com/" shape=rect target=_blank coords="10, 142, 106, 174"><AREA href="http://twitter.com/widereading" shape=rect target=_blank coords="10, 214, 105, 241"><AREA href="http://www.facebook.com/widereading" shape=rect target=_blank coords="10, 246, 107, 272"><AREA href="http://gmail.com" shape=rect target=_blank coords="9, 307, 159, 327"></MAP>

이런 소스를 사용하시면 됩니다.   여기선 이게
https://t1.daumcdn.net/cfile/tistory/195F3C454D6BA01E05

자신의 블로그에 올린 이미지가 되겠습니다. 그 이미지에 맵을 주어서 링크를 걸어주시는 것인데... 저기보이는 숫자
"><AREA href="http://gmail.com" shape=rect target=_blank coords="9, 307, 159, 327"></

여기 블랭크 옆의 숫자들은 픽셀정보기에게 자신이 만든 이미지마다 다를 수가 있습니다.

나모웹에이터로 쉽게 편집이 가능합니다.

저기 이미지맵이란 기능이 있습니다.   그 기능으로 원하는 아이콘을 사각형으로 드래그하면 링크를 달 수 있는 팝업창이 뜨게됩니다. 거기에 링크를 걸면됩니다.

vash_contact_me_20110228.psd

위에 첨부한 것은 포토샵 소스입니다.   적당히 편집하셔 자신의 블로그에 삽입을 해보시면 되겠습니다.