태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.



며칠전에 메타사이트 추천버튼과 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는 본문넓이 상관없이 적용 가능합니다.




 

 

 

'Design Share > Icon' 카테고리의 다른 글

메타버튼과 rss버튼 달기_2탄  (13) 2009.10.27
나만의 RSS 추천버튼 달기  (19) 2009.05.03

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • 최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool