사이드바에 메뉴를 만들때 통일감있게.


처음 사이드바 버튼에 구독버튼을 넣을때는 최대한 사이드바 메뉴들과 비슷하게 만들어주는것
이 보는 사람입장에서도 보기 편하고 정돈이 잘되보이고 깔끔해보이는것 같습니다.


아쉬운점은.. 롤오보효과로..

보기에는 깔끔해 보였지만 아래 그림처럼 공지사항, 카테고리같은 단순한
메뉴바와  다음뷰, 한RSS구독버튼이 잘 구분이 되지 않아서  먼가 좀 아쉽고 답답해보였습니다. 
 


그럴때는 다음뷰와 한RSS구독버튼에 롤오버효과를 주어서 마우스를 가져갈때마다 색이 약간
바뀌는 효과를 주면 공지사항과 카테고리 메뉴판와는 쉽게 구분이될수 있을것 같아서 해보니
조금은 더 개성도 있어보이고 깔끔해 보였습니다.   

 
구독해주실꺼죠 ^^;;




간단하게 만드는 방법



■ 사이드바 픽셀이 200px일때 

 
1. 준비물 : 다음뷰구독주소, 한RSS구독주소

- 다음뷰구독주소 : http://v.daum.net/user/plus?blogurl=다음뷰에 등록된자기주소
                           ex> http://v.daum.net/user/plus?blogurl=http://nextgoal.tistory.com

- 한RSS구독주소 : 한RSS접속하셔서 
  구독버튼 > RSS주소를입력 > Html생성 > 빨간밑줄친부분이 한RSS구독주소입니다.



2.  스킨>사이드바설정>HTML 배너출력 > 아래텍스트내용을 복사해준다.
- 단 다음뷰,한RSS 주소 부분은 자신의 다음뷰주소로 변경해준다.






■  사이드바 픽셀이 190일떄 

 




■  사이드바 픽셀이 180일떄 

 




추가설명 


1. 롤오버를 하시려면 마우스를 가져가기전과 후의 같은 크기의 이미지가 필요합니다. 
- 이미지가 달라도 상관은없지만 그러면 이동하는느낌을 줍니다.


2. 롤오버태그
- 편의상 마우스를 가져갔을때의 이미지를 변신후 그전 모양을 변신전이라고 적었습니다.
- 변신후, 변신전, 변신전 이렇게 배치하시면됩니다.

 <A onmouseover='img1.src="변신후"' onmouseout='img1.src="변신전"' href="링크주소" target=blank><IMG name=img1 src="변신전"></A>
 

3. 2개 이상의 롤보어를 만들때 주의사항 
- 위의 태그에 들어있는 img1번호는 각 롤오버마다 다르게 줘야합니다. 
- 겹치면 롤오버가 작동하지 않기때문에 겹치는 일이 없어야합니다. 


4. 재료 
- 롤오버효과까지 포함하면 4개의 이미지가 있습니다.


 


추가
- 스토리와이님 요청으로 구글과 믹시 RSS버튼을 추가했습니다.





신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. -0- 구독 박스 방금 달았어요 깔끔하고 좋아요 !!!

    2010.06.13 16:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 퍼갈께용^^

    2010.07.15 22:17 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 유용하게 잘 쓰겠습니다 감사합니다^^

    2010.08.08 03:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 티비님 좋은 자료 감사합니다. 근데, 제 블로그의 사이드바는 250인데 혹시 250으로 만들수는 없으신가요? 저는 도저히 이렇게 깔끔하게 만들 수가 없네요 ^^;;

    2010.08.16 22:17 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 감사해요!~

    2010.08.27 17:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 감사합니다.. 잘보고 갑니다...
    적용해봐야겠어요~

    2010.09.20 14:08 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 우와 이렇게 일일히 +_+
    디자인도 멋지고 사이즈 별로 제작하신 것도
    정말 멋져요 :D

    2010.11.21 02:29 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 뒤늦게 좋은 정보 얻어 갑니다 ^^
    잘 활용해볼게요 ~

    2010.11.30 21:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 저는...HTML배너출력이라는 것이 없네요...;;;

    2011.02.19 22:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 저도 HTML배너출력 이라는 버튼이 없네요;;

    2011.03.18 02:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 블로그에 적용이 잘 됬네요, 쉬운 설명 감사합니다.

    2011.04.02 17:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 하하하하하하핫~~ 제가 지금 왜 이렇게 웃는지 설명을 드려야 될 듯요 -ㅎㅎㅎㅎㅎㅎ
    구독버튼 달려고 이리저리 다니면서 한시간을 낑낑거리다가 롤오버 태그쓰는데 자꾸 에러가 나서
    한 개 클릭하는 순간 옆의 다른 그림까지 모양이 다 바뀌는 희안한 사태직면 -
    해결하고자 막 검색을 하다가 "onmouseover"로 검색을 하니까 티비님 블로그가 나와요 - ㅎㅎ
    진작 여기 와서 찾아 볼걸 - 괜히 고생했어요~ ㅎㅎㅎ

    2011.04.06 15:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 안녕하세요. 이 블로그에 와서 많은 것을 배워가네요. 도움 받고 저도 블로그에 적용해 보았습니다. 감사합니다.

    2011.06.25 21:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 안녕하세요. 이 블로그에 와서 많은 것을 배워가네요. 도움 받고 저도 블로그에 적용해 보았습니다. 감사합니다.

    2011.06.25 21:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 제가 찾던건데...감사합니다. 전 숙제를 좀 미뤄야겠어요.~ 대박나세요

    2011.08.11 12:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 오 덕분에 블로그에 이쁘게 단추 달았네요.. 단추도 달았으니 이제 제 글 누가 구독좀 해줬으면 -ㅅㅜ

    2012.01.20 01:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 좋은 정보 감사합니다.^^

    2012.08.09 14:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 이렇게 헤드라이트에 불이 들어온다. 그냥 들어와 있는 것이 아니라 간혹 빠르게 깜빡거려 존재감을 보여준다. 데이터가 저장되거나 삭제될 때도 이렇게 반응한다.

    2012.10.24 18:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 쫄바지 콤보로 입고 나와 섹시댄스 선보인 싸이처럼, 모두가 하버드에서 죽어라 밤낮 가리지 않고 공부하고 있을 때에 나홀로 '어디 한 번 친구들끼리 연결시켜줘 볼까?' 취지 하에 페이스북 만들어버린 마크 저커버그처럼. 여러분도 트렌드를 이끌어 나갈 수 있어요.

    2012.10.30 05:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 감사합니다 필요한 부분이였는데 적용했답니당:)

    2013.03.12 10:21 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바