블로그 디자인을 꾸미다가 디자인로그 마루 님이 예전에 올리셨던 블로그 본문 하단용 블UP 및 주요 RSS버튼 디자인 포스팅을 보고 제 블로그에 맞게 RSS 버튼을 만들어 보았습니다.
RSS버튼을 블로그 하단에 삽입한 모습
마루 님이 만드신 것과 다른 점이 있다면, 이미지 파일을 하나로 만들어서 이미지맵으로 링크를 연결했습니다. 이미지 파일이 여러개로 나뉠 경우 HTTP 요청을 여러번 하게 되어 페이지 로딩 속도가 느려진다고 합니다. 블로그 하단의 RSS버튼의 경우, 많게는 10여개 가까이 되는 작은 이미지들을 이용해 걸어놓는 분들이 많으신데요, 그럴 때는 이미지맵으로 하시면 좀더 나은 로딩 속도를 얻으실 수 있습니다. 이미지맵을 만드는 방법은 다음과 같습니다.
<img src="이미지파일" usemap="#맵이름">
<map name="맵이름">
<area shape="rect" coords="X좌표상단,Y좌표상단,X좌표하단,Y좌표하단" href="링크주소">
</map>
<map name="맵이름">
<area shape="rect" coords="X좌표상단,Y좌표상단,X좌표하단,Y좌표하단" href="링크주소">
</map>
이것을 제가 만든 RSS버튼을 예로 보여드리겠습니다.
<img src="./images/feed.gif" usemap="#feed_rss">
<map name="feed_rss">
<area shape="rect" coords="237,28,340,57" href="http://v.daum.net/user/plus?blogurl=http://moneynote.kr" target="_blank" alt="daum view">
<area shape="rect" coords="350,1,390,64" href="http://www.hanrss.com/add_sub.qst?url=http://feeds.feedburner.com/Moneynote" target="_blank" alt="한RSS">
<area shape="rect" coords="402,1,435,64" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/Moneynote" target="_blank" alt="구글리더">
<area shape="rect" coords="448,1,494,64" href="http://wzd.com/subscribe?url=http://feeds.feedburner.com/Moneynote" target="_blank" alt="위자드닷컴">
</map>
<map name="feed_rss">
<area shape="rect" coords="237,28,340,57" href="http://v.daum.net/user/plus?blogurl=http://moneynote.kr" target="_blank" alt="daum view">
<area shape="rect" coords="350,1,390,64" href="http://www.hanrss.com/add_sub.qst?url=http://feeds.feedburner.com/Moneynote" target="_blank" alt="한RSS">
<area shape="rect" coords="402,1,435,64" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/Moneynote" target="_blank" alt="구글리더">
<area shape="rect" coords="448,1,494,64" href="http://wzd.com/subscribe?url=http://feeds.feedburner.com/Moneynote" target="_blank" alt="위자드닷컴">
</map>
RSS 버튼 모음 예제
다음view 구독 버튼, 한RSS 버튼, 구글리더 버튼, 위자드닷컴 버튼 4개가 이미지맵으로 설정되어 있습니다. 좌표는 이미지에서 버튼의 왼쪽 위 X,Y좌표, 오른쪽 아래 X,Y좌표를 차례로 적어주시면 됩니다. 제가 만든 것을 그대로 쉽게 쓰시려면 다음과 같이 하세요.
1. 소스 파일을 다운받습니다.
2. feed.psd 파일을 포토샵으로 열어 사이트이름을 수정합니다. 기타 다른 문구들도 수정하셔도 됩니다.
단, 버튼의 위치를 바꾸실 경우에는 이미지맵 좌표도 수정하셔야합니다.
3. 이미지를 gif 형식으로 저장하셔서 티스토리 관리자화면에서 스킨 -> HTML/CSS편집 -> 파일업로드 에서 업로드합니다.
4. 이미지맵 태그를 수정해서 스킨의 원하는 부분에 넣습니다.
moneynote_rss.zip2. feed.psd 파일을 포토샵으로 열어 사이트이름을 수정합니다. 기타 다른 문구들도 수정하셔도 됩니다.
단, 버튼의 위치를 바꾸실 경우에는 이미지맵 좌표도 수정하셔야합니다.
3. 이미지를 gif 형식으로 저장하셔서 티스토리 관리자화면에서 스킨 -> HTML/CSS편집 -> 파일업로드 에서 업로드합니다.
4. 이미지맵 태그를 수정해서 스킨의 원하는 부분에 넣습니다.
이미지맵을 사용하면 소스가 한결 단순해지고, HTTP 요청 회수가 줄어들게 되어 페이지 로딩 속도가 빨라지게 됩니다. 작은 부분이긴 하지만 사이트 최적화에 도움이 되는만큼 사용해볼 가치가 있는 것 같습니다.
Posted by 머니노트 
