태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.



며칠전에 메타사이트 추천버튼과 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로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. 2009.05.03 23:31 수 정 댓 글

      비밀댓글입니다

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 08:16 수 정

        태그에 관해서는 유요한 정보 사이트가 많아서 올리지 않았어요. 알고보면 아주 쉬워요.
        초반에는 익숙치 않은 단어들이라 외워야 되는데, 금방 익히실 거에요.
        최대한 쉽게 풀어서 쓴건데ㅋ 똑같이 따라 하시면 금방 하실 거에요.

    2. Favicon of http://2proo.net BlogIcon 2Proo 2009.05.04 01:14 수 정 댓 글

      하나씩 하나씩 잘해나가고 계시군요.
      음.. 전 웬지 버튼보다 테이블 태그가 탐나는디유;;;

      참 시키신대로 잼난거 (챙피한거..) 하나 올렸어요. 책임지시죠?

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 08:17 수 정

        테이블 태그가 왜여?ㅋ
        곰방 만들자나여~ㅋㅋㅋ

    3. Favicon of http://lelocle.tistory.com BlogIcon 악랄가츠 2009.05.04 10:24 수 정 댓 글

      저도 초반에 블로그 만들때 이거 만드는거 궁금해서 이리저리 찾아댕겼는데~
      쉽게 잘 설명되어있네요 ^^!

      잘보고가요!
      좋은 하루되세요~!

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 11:15 수 정

        도움이 되셨다니 다행이네요.
        강좌들을 보면 자신은 알고 있기에 자신의 글이 이해하기 쉽다고 생각하는데 막상 배우는 위치에서는 이해가 안되고 어려운 부분이 있더라구요.
        쵀대한 배우는 입장에서 쓰려고 노력했는데 이해가 되셨다니 다행이예요.

    4. Favicon of http://hypervandervilt.tistory.com BlogIcon 반 더 빌 트 2009.05.04 10:28 수 정 댓 글

      유용한 태그 정보 잘 보고 가네요!^^

      오늘도 즐거운 하루 시작하세요!^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 11:16 수 정

        포스팅하는데 시간이 많이 걸려서 강좌는 자주 못올리겠지만... 앞으로 하나씩 차근차근 올릴까해요.
        자주 놀러오세요~

    5. Favicon of http://oravy.tistory.com BlogIcon 하수 2009.05.04 10:59 수 정 댓 글

      ㅋㅋ 전 추천 사이트를 링크로 처리했다는...^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 11:19 수 정

        이 글은 다른 블로거님의 부탁으로 올렸어요.
        버튼 달고 싶으신데 방법을 모르신다기에~
        링크가 편하긴한데...
        저야 이쪽 분야에 진로를 잡고 있는사람이라 이미 알고 있던 부분이지만...
        처음 하시는 분이나 메타 사이트에 대해 잘 모르시는 분들은 헤메시더라구요.
        그래서 되도록 쉽게 풀어서 올려봤어요.
        오늘도 즐거운 하루 되세요~

    6. Favicon of http://dreamnet21.tistory.com BlogIcon 김명곤 2009.05.04 17:39 수 정 댓 글

      와, 저같은 초보는 무슨 말인지 하나도 모르겠네요. 댓글 다는 거 시험해보려 방문했다가 겁먹었어요. 앞으로 가르침을 많이 받아야겠네요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.04 19:58 수 정

        야호~!아버지께서 방문 해주셨네요~감사해요 ㅋㅋ
        분야가 다르다 보니 처음엔 뭐가 먼지 잘 모르실거에요^^
        차츰 배우시면 되요. 너무 겁먹지 마세요~
        하시다보면 쉽답니다~

    7. Favicon of http://labyrint.tistory.com BlogIcon labyrint 2009.05.05 05:56 수 정 댓 글

      버튼이 참 예쁘네요. 근데... 저는 추천 버튼보다 조회수에 더 관심이 많아 오리지날이 더 좋은 것 같아요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비 2009.05.05 19:00 수 정

        사람마다 차이겠죠?
        아직 스킨이 완성형이 아니라 딱히 내세울 건 없지만...
        일단 제 블로그에 오시면~
        "디자인 감각이 있구나"라고 느끼게 꾸미고 싶어요.
        다른건 다 필요 없어요~ㅋㅋ
        아직 그렇게 다듬어 가려면 멀었지만...조금씩 한발 한발 앞으로 전진 해 나가겠죠?

    8. Favicon of http://nermic.tistory.com BlogIcon 용짱 2009.08.02 00:15 수 정 댓 글

      아... 아무리 봐도 이해가..

      내 반드시 정복하리라!! ㅠㅠ

    9. Favicon of http://toyvillage.net BlogIcon 라이너스 2009.10.27 19:18 수 정 댓 글

      이쁘게 만드셨어요^^
      저도 요즘 rss버튼을 어떻게 아기자기하게
      만들어볼까 고민중인데. 힌트 얻고갑니다^^

    10. Favicon of http://eczone.tistory.com BlogIcon Zorro 2009.12.20 13:57 수 정 댓 글

      예스비님~ 방문하신분이 추천버튼 다는거 문의를 해서.. 예스비님 사이트 가르쳐 드릴려고 하는데 괜찮겠죠?^^;; 아주 설명을 잘하셔서요~
      항상 좋은정보들 많이 얻고 있습니다.. 즐거운 휴일 되세요~

    11. JIKMO™ 2010.03.19 22:32 수 정 댓 글

      도대체 버튼 어떻게 다는건지, 정말 궁금했는데, 이미지소스까지 친절하게!
      완전 감사히 잘쓰겠습니다!

    12. Favicon of http://demun.tistory.com BlogIcon demun 2010.05.25 15:54 수 정 댓 글

      좋은글 잘 봤습니다. 초보자분들이 많은 도움이 되겠어요.

    최근 댓글

    최근 트랙백

    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