나만의 RSS 추천버튼 달기

☆º━Design Share/Icon 2009/05/03 19:12

며칠전에 메타사이트 추천버튼과 rss버튼을 만들어 블로그에 자랑을 해었지요.
세미예님이 버튼 다는 법을 가르쳐 달라고 부탁 하셔서 이렇게 강좌 형식으로 올려 볼까 해요.
만들어 놓고 자랑 할 생각만 한 나머지 함게 공유하고 올리는 법도 알려드려야 하는데 그렇게 못했네요.
다른 블로거들을 만나러 다니면서 좋은 글을 읽고 마음의 양식도 얻고, 정보도 배워가고 하는데
전 그러지 못한것 같군요. 앞으로 고쳐야 될 점이라고 생각 하네요.

서론은 여기서 마치고 본격적으로 "메타사이트 버튼"을 만들어 볼까요?
자료는 포스트 하단에 zip파일 받으시면 그 안에 버튼이 들어 있습니다.

추천 버튼과 rss버튼 만들기

버튼 만드는 법은 포토샵이나 일러스트레이터로 만들면 됩니다.
요즘은 포토샵이 보편화 되서 굳이 버튼 만드는 법까지 설명 하지 않겠습니다.
한가지 주의 해야 될 점은 버튼은 사이즈가 동일 해야 됩니다.(정리가 되어야 되니까요.)
버튼의 최적 사이즈는 70~80px로 만들면 되는데 실제 버튼 이미지 사이즈는 50~60px로 하고
뒤 배경은 투명으로 만들어 저장 해야 합니다.
버튼 자체를 그대로 적용 하고 싶다면 이미지 사이즈(40~60px)만 그대로 잘라 저장하면 됩니다.
버튼 샘플은 며칠 전 제가 만들었던 걸로 하겠습니다. 다른 버튼을 쓰셔도 상관없어요.
버튼 사이즈는 80px * 80px로 크기만 맞춰 주시면 됩니다.
제 버튼은 60px * 60px(이미지) bg=transparent /확장자는.png 파일로 만들었습니다.

_예스비가 만든 메타사이트 추천버튼과 rss버튼_

적용할 태그(html) 분석.

【 버튼을 집어 넣을 테이블 소스입니다.】

1. 위 1번은 테두리 색깔을 바꾸는 코드입니다. 색깔 바꾸시는 것은 아시죠?
1번의 색을 스킨에 맞춰 바꾸시고 사용하세요.
①번은 테이블 타이틀 색입니다. 테두리와 같은색을 쓰시면 좀 더 통일감이 있어 깔끔해 보이겠죠?

2. 본문 사이즈에 맞추어서 바꾸어 주시면 됩니다. 제 본문이 650px로 되어 있습니다.
   버튼이 7개 들어 갈 경우 딱 맞는 사이즈 입니다.
   본문넓이650px 이상인 경우는 텍스트 1번 소스를 복사해서 쓰시고(1단형),
   본문 넓이가 650px 이하 인 경우는 텍스트 2번 소스를 복사해서 쓰시면 됩니다.(2단형)

3. 타이틀 코멘트 부분입니다. 원하는 문구로 바꾸어 넣어서 쓰세요.
예) 재미 있으셨나요? 애교로 추천 한번 주세요~등

4. 버튼의 세로 위치를 지정 하는 코드입니다. 저같은 경우는 테이블 아래쪽에 짚어 넣었습니다.
본문상단에 넣으면 이상하겠지요? 혹시 바꾸시고 싶으시다면
valign= top(상단) valign=middle(중앙) 으로 고쳐서 쓰세요.

【 버튼에 적용할 소스입니다.】

주소 입력부분에 "본인의 해당 사이트 주소나 rss주소"를 넣으시면 됩니다.
줄쳐진 부분은 마우스 오버시에 뜨는 코멘트인데요. 원하시는대로 바꺼서 작성해서 저장 하신 후 복사해서 쓰세요.
마우스 오버시 뜨는 코멘트이니 너무 길면 별로 안 이뻐요.

소스를 적용해 보겠습니다.

바로 아래에 달기

바로 위에 달기

관리자로 가셔서 스킨-HTML/CSS편집을 선택하시고, HTML넣는 부분에서 위 위치를 찾아서 붙여주세요.
그외에 원하는 적당한 위치를 찾아 붙여주기하시고 저장하시면 됩니다.
이미지는 스킨-HTML/CSS편집에서 파일업로드에 업로드 하시면 됩니다.

내 추천 사이트 주소 넣기

【 올블로그 주소 찾기 】
올블로그 메인에서 자신의 닉네임이나 자신의 블로그명을 입력하면 아래로 이동됩니다.
주소란에 나오는 주소를 복사해서 주소입력란에 붙여넣기 하시면 됩니다.
단,검색하실때 검색옵션을 블로그로 선택 한 후 검색하세요.

【 블로그 코리아 주소 찾기 】
홈 상단 우측에 보면 내글목록이 있습니다. 내글목록으로 이동해서 주소를 복사해 붙여넣기 하시면됩니다.

【 블로그뉴스 주소 찾기 】
블로거뉴스에서 자신의 글제목하나를 검색창에서 검색하면 아래처럼 자신의 글목록으로 이동됩니다.
그곳의 주소를 복사해서 붙여 넣기 하시면 됩니다.
또는 http://blogernews.media.daum.net/reporter/뒤에 자신의 다음ID를 적고 복사해서 쓰시면 됩니다.

【 믹시 주소 찾기 】
믹시는 믹시 추천 버튼을 눌러주세요. 이동한 곳의 주소를 복사해서 붙여 넣기 하시면 됩니다.

【 한RSS주소 찾기 】
1번의 블로그용 구독버튼을 클릭하면 옆의 창이 뜹니다. 2번의 HTML생성을 클릭하시면 자신의 한RSS주소를 포함한 배너코드가 생성됩니다. 코드에서 3번의 주소부분만 복사해서 붙여 넣기 하시면됩니다.

【 구글 주소 찾기 】
http://www.google.com/ig/add?source=atgs&feedurl=자신의 RSS주소가 구글 리더기 주소입니다.

【 예스비네 바로가기 】
http://www.yesbedesign.com/rss 제 주소입니다. 많이 애용해 주세요. 같이 넣어서 올려 주시시 바랍니다.
마우스 오버시 코멘은 제 블로그명 그대로 적용해주세요.

【 내 블로그 RSS주소 】
자신의 RSS주소를 넣으시면 됩니다.

여기까지 내 블로그에 메타사이트 추천버튼과 RSS버튼 적용하기를 배워봤습니다. 어렵진 않으셨죠?
버튼은 원하는 대로 골라서 소스만 가져다 쓰시면 되요.

나만의 개성있는 이쁜 버튼 만들어 달아보세요.

◀ 버튼과 소스 자료입니다. ▶

mata_button_rss_01는 본문넓이 650px 이상에 적용하세요.
mata_button_rss_02는 본문넓이 상관없이 적용 가능합니다.

mata_button_rss_01.txt