본문 바로가기

Life/yourjune blog

[블로그팁]RSS 및 피드버튼 아이콘 및 설정법

반응형
오늘은 사이드바에 RSS피드 버튼 및 SNS사이트의 아이콘을 설정하는 법에 대해서 설명하겠습니다. 블로그 운영에 있어 메타블로그, RSS구독자 관리, SNS연결은 매우 중요합니다. 인터넷 환경이 모바일쪽으로 이동하면서 SNS를 통해서 블로그에 접속하는 사람들이 아주 많기 때문입니다.


여기서는 사이드바에 넣는 것을 기준으로 설명합니다. 본문 하단에 넣는 방법은 따로 포스팅 하겠습니다.

1. 아이콘 설명

우선 아이콘에 대해서 설명드리겠습니다. 아래 아이콘은 제가 현재 사용하고 있는 피드버튼 아이콘으로 총8개로 90 * 90px의 투명배경의 png로 만들어져 있습니다. (요청에 따라 80*80 아이콘도 같이 올립니다.)




순서대로 트위터 2개, 피드2 (일반, 한RSS), 페이스북, 미투데이, 구글리더, 다음뷰 아이콘입니다.


2. 사이드바에 피드버튼 설정법

2-1. 아이콘 파일 업로드
우선 아이콘 파일들을 업로드 해야 합니다. 스킨 - HTML/CSS편집으로 들어가 오른쪽의 파일 업로드 탭을 누릅니다. 그런 다음 사용하고자 하는 아이콘 파일들을 업로드 시켜줍니다.



2-2. 아이콘 경로 복사하기
그 다음에는 HTML태그로 입력할 때 필요한 그림주소를 알아둬야 합니다. 오른쪽 목록에서 아이콘 파일중 하나를 클릭하면 왼쪽에 아이콘이 표시되는데 그곳에 마우스 오른클릭을 눌러 그림 주소 복사를 누릅니다.


사용자별로 다음과 같은 식별번호로 경로가 설정됩니다.

http://cfs.tistory.com/custom/blog/xx/xxxxxx/skin/images/twitter.gif

중간경로는 모든 파일이 동일하므로 메모장같은 곳에 복사해두고 맨 뒤만 바꿔가며 사용해도 상관이 없습니다.


2-3. 사이드바 설정
스킨 - 사이드바 설정으로 들어갑니다. 그런 다음에는 태그 입력기를 오른쪽으로 드래그해 줍니다. 그 다음으로는 편집을 눌러 태그입력창을 띄워줍니다.



2-4. 태그 입력
그런 다음에는 태그를 입력해줍니다. 태그는 하이퍼 링크를 생성하는 a와 img태그를 이용합니다. 태그는 아래를 참고하세요.



<a title="트위터로 연결" href="http://twitter.com/트위터계정명" target="_blank"><img src="이미지경로/twitter.png" alt="트위터로 연결" width="90" height="90"></a>

<a title="페이스북으로 연결" href="http://facebook.com/페이스북계정명" target="_blank"><img src="이미지경로/facebook.png" alt="페이스북으로 연결"  width="90" height="90"></a>

<a title="미투데이로 연결" href="http://me2day.net/미투데이계정명" target="_blank"><img src="이미지경로/me2day.png" alt="미투데이로 연결" width="90" height="90"></a>

<a href="RSS구독 경로" title="RSS 구독하기" target="_blank"><img src="http://이미지경로/rss.png" alt="RSS 구독하기" width="90" height="90"></a>

<a title="한RSS에 추가" href="HanRSS 구독경로" target="_blank"><img src="http://이미지경로/hanrss.png" alt="RSS 구독하기" width="90" height="90"></a>

<a title="다음 MY view" href="다음뷰 구독경로" target="_blank"><img src="이미지경로/daumview.png" alt="다음 MY view 구독하기" width="90" height="90"></a>

태그는 아래 파일에서 복사해서 사용하세요.



빨간색으로 표시해둔 부분은 사용자별로 수정할 부분입니다. 이미지 경로/... .png 부분은 위에서 복사해 두었던 경로를 넣으면 됩니다.

alt=" " 부분은 마우스 커서가 오버되었을 때 (이미지 위에 있을때) 나타나는 설명입니다.
width="90" height="90" 이 부분은 아이콘의 크기를 설정하는 부분입니다. 사용자의 사이드바 크기에 맞지 않을경우 이 부분으로 조정하면 됩니다. 다만 크기를 늘리는 것은 이미지가 깨질 수 있으므로 추천하지 않습니다.

-

RSS피드 및 SNS링크 설정에 도움이 되기를 바랍니다~

반응형