사이드바에 메뉴를 만들때 통일감있게.
처음 사이드바 버튼에 구독버튼을 넣을때는 최대한 사이드바 메뉴들과 비슷하게 만들어주는것
이 보는 사람입장에서도 보기 편하고 정돈이 잘되보이고 깔끔해보이는것 같습니다.
아쉬운점은.. 롤오보효과로..
보기에는 깔끔해 보였지만 아래 그림처럼 공지사항, 카테고리같은 단순한 메뉴바와 다음뷰, 한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 주소 부분은 자신의 다음뷰주소로 변경해준다.
롤오버다음뷰한RSS구독.txt<A onmouseover='img4.src="http://cfile22.uf.tistory.com/image/143866234BBAC3BE8E159C"' onmouseout='img4.src="http://cfile4.uf.tistory.com/image/1469811F4BA4753983DEAF"' href="다음뷰주소" target=blank><IMG name=img4 src="http://cfile4.uf.tistory.com/image/1469811F4BA4753983DEAF"></A><A onmouseover='img5.src="http://cfile29.uf.tistory.com/image/133866234BBAC3BE8DE075"' onmouseout='img5.src="http://cfile25.uf.tistory.com/image/1170FB234BA47542636B4E"' href="한RSS주소" target=blank><IMG name=img5 src="http://cfile25.uf.tistory.com/image/1170FB234BA47542636B4E"></A>
■ 사이드바 픽셀이 190일떄
■ 사이드바 픽셀이 180일떄
<A onmouseover='img4.src="http://cfile23.uf.tistory.com/image/1150E11D4BE76B090E1B30"' onmouseout='img4.src="http://cfile7.uf.tistory.com/image/1850E11D4BE76B090B4597"' href="다음뷰주소" target=blank><IMG name=img4 src="http://cfile7.uf.tistory.com/image/1850E11D4BE76B090B4597"></A><A onmouseover='img5.src="http://cfile5.uf.tistory.com/image/2050E11D4BE76B090D1CA7"' onmouseout='img5.src="http://cfile23.uf.tistory.com/image/1950E11D4BE76B090C5CBE"' href="한RSS주소" target=blank><IMG name=img5 src="http://cfile23.uf.tistory.com/image/1950E11D4BE76B090C5CBE"></A>
■ 사이드바 픽셀이 180일떄
<A onmouseover='img4.src="http://cfile24.uf.tistory.com/image/194963164BE75457C1D166"' onmouseout='img4.src="http://cfile29.uf.tistory.com/image/174963164BE75456BEF9EE"' href="다음뷰주소" target=blank><IMG name=img4 src="http://cfile29.uf.tistory.com/image/174963164BE75456BEF9EE"></A><A onmouseover='img5.src="http://cfile6.uf.tistory.com/image/184963164BE75457C0971E"' onmouseout='img5.src="http://cfile6.uf.tistory.com/image/194963164BE75457BF0780"' href="한RSS주소" target=blank><IMG name=img5 src="http://cfile6.uf.tistory.com/image/194963164BE75457BF0780"></A>
추가설명
1. 롤오버를 하시려면 마우스를 가져가기전과 후의 같은 크기의 이미지가 필요합니다.
- 이미지가 달라도 상관은없지만 그러면 이동하는느낌을 줍니다.
2. 롤오버태그
- 편의상 마우스를 가져갔을때의 이미지를 변신후 그전 모양을 변신전이라고 적었습니다.
- 변신후, 변신전, 변신전 이렇게 배치하시면됩니다.
<A onmouseover='img1.src="변신후"' onmouseout='img1.src="변신전"' href="링크주소" target=blank><IMG name=img1 src="변신전"></A>
3. 2개 이상의 롤보어를 만들때 주의사항
- 위의 태그에 들어있는 img1번호는 각 롤오버마다 다르게 줘야합니다.
- 겹치면 롤오버가 작동하지 않기때문에 겹치는 일이 없어야합니다.
4. 재료
- 롤오버효과까지 포함하면 4개의 이미지가 있습니다.
구독버튼재료.zip
추가- 스토리와이님 요청으로 구글과 믹시 RSS버튼을 추가했습니다.
블로그소식/체험/기자단정보
댓글을 달아 주세요
오늘 저에게 주는 숙제 같습니다. 꼭 해봐야쥐~~~
2010/04/10 06:12 [ ADDR : EDIT/ DEL : REPLY ]방문해주셔서 감사합니다. 간단하게 하실수 있으실꺼에요
2010/04/10 06:19 [ ADDR : EDIT/ DEL ]만약에 마음에 드신다면 스토리님이 블로그에 있는 믹시,구글버튼도 사이드바에
깔끔하게 정리될수 있도록 한번 만들어볼께요 ^^;;
즐거운 주말보내세요!!
이야. 저도 롤오버 예전에 배웟었는데;;
2010/04/10 06:36 [ ADDR : EDIT/ DEL : REPLY ]기억이 잘 나지 않아서 ㅋㅋㅋㅋ
좋은 정보 감사합니다^^
저도 가물 가물하더라구요 ㅋㅋ
2010/04/10 06:39 [ ADDR : EDIT/ DEL ]혹시 사용하실꺼면 변신후, 변신전, 변신전 꼭 외우세요
할때마다 매번 해깔려요!
즐거운 주말보내세요 ^^
요거 요긴하겠습니다....감사합니다..
2010/04/10 08:21 [ ADDR : EDIT/ DEL : REPLY ]저도 시간내어 적용시켜야 겠네요...
즐건 주말 되시구요~~!
유용하게 읽어주셔서 감사드려요
2010/04/10 08:23 [ ADDR : EDIT/ DEL ]파르르님도 즐거운 주말보내세요 ^^
우와 감사합니다, 베스트 글인가요~역시 대인배셔~
2010/04/10 09:14 [ ADDR : EDIT/ DEL : REPLY ]감사합니다. 순전히 운이 좋아서지만~
2010/04/10 09:22 [ ADDR : EDIT/ DEL ]연속으로 두번이나 베스트되다니 가문의 영광이네요 오늘은 ^^;;
티비님은 블로그하시면서 글뽑아내는 재주가 있으신것 같아요. 딱딱 필요에 맞는 글들이 이렇게 올라오니^^;
2010/04/10 09:22 [ ADDR : EDIT/ DEL : REPLY ]대단하십니다!
레드페퍼님 방문해주셔서 감사드려요
2010/04/10 09:31 [ ADDR : EDIT/ DEL ]그런데 너무 띄워주시면 안되요 ㅠ
그냥..운이 좋아서 그런거예요 ^^;;;;
즐거운 주말보내세요~!!
저 같은 수준의 블로거에게 딱 안성맞춤인 정보네요.^^
2010/04/10 10:49 [ ADDR : EDIT/ DEL : REPLY ]잘 주어담아 갑니다. 기쁜 우리 토요일 되세용~ 히히
유용하게 봐주셔서 감사드려요~!!
2010/04/10 11:29 [ ADDR : EDIT/ DEL ]씨트러스님도 즐거운 주말 보내세요 ^^;;
비밀댓글입니다
2010/04/10 13:04 [ ADDR : EDIT/ DEL : REPLY ]답변이 늦어서 죄송해요 어디 잠깐 나갔다왔어요
2010/04/10 15:41 [ ADDR : EDIT/ DEL ]포스팅에 넣어났어요 ^^;;;
구글애드센스는 해결되셨죠?
저도 블로그를 깔끔하게 만들고 싶은데... 잘 안되더라구요....
2010/04/10 13:41 [ ADDR : EDIT/ DEL : REPLY ]티비님 팁을 아무래도 공부해야 할듯... ㅎㅎ
방문해주셔서 감사합니다.
2010/04/10 17:07 [ ADDR : EDIT/ DEL ]파란연필님 블로그도 깔끔하고 좋으시면서
멀더 깔끔하게 만드실려구요 ^^;;;
재밋고 즐거운 주말보내세요!!!!
저위에 탑은 생각보다 간단해서 오늘 포스팅 해드릴께요 !!
^_^ 저녁 먹고 왔습니다. 드디어 성공했습니다. ㅠ.ㅠ ㅎㅎ
2010/04/10 18:26 [ ADDR : EDIT/ DEL : REPLY ]다음뷰-한rss 구독버튼이요. ㅎㅎ 제가 무엇때문에 방황했는지는 비밀. ㅋㅋㅋ ㅠ.ㅠ 전 바보인가봐요. ㅎㅎ
구글광고는 여전히 첫화면은 공익광고 달랑 한개만..두번째포스트부터 잘보이더라고요. ㅎㅎ 해결안되면 고객센터에
물어볼려고요..다른 곳에서 확인하고 싶은 욕망이 막...^^; ㅎ
비밀댓글입니다
2010/04/10 22:36 [ ADDR : EDIT/ DEL : REPLY ]그러게요 하루방문자수랑 댓글 엄청나시던데요 ㅠ
2010/04/10 22:41 [ ADDR : EDIT/ DEL ]한RSS랑느 쉽게 넣으실수 있을꺼예요
아하라한님도 주말 즐겁게 보내세요!!
이런건 어떠케 다 아셔요? 신기해요 ㅎㅎ
2010/04/12 14:49 [ ADDR : EDIT/ DEL : REPLY ]잘하는건 하나도 없는데..
2010/04/12 15:05 [ ADDR : EDIT/ DEL ]이것저것 주서들은게 많이 있어서 그런가봐요ㅋ
다들 간단한거니깐요 빠삐코님도 쉽게 배우실수 있을꺼예요
요즘 휴식 이제 푹잘취하셨죠?
포스팅 멋진 포스팅 기대하겠습니다. ^^;;;
간단한 롤오버 방식을 정말 알고 싶었던 것입니다. 예전엔 10줄이 스크립트로 정말 복잡하게 했거든요. 좋은 정보 감사합니다.
2010/04/14 12:50 [ ADDR : EDIT/ DEL : REPLY ]방문해주셔서 감사드려요~
2010/04/14 13:35 [ ADDR : EDIT/ DEL ]너무 밋밋한곳에 가끔 효과를 주니깐 생각보다 멋있더라구요ㅋ
img뒤에 숫자 꼭 다르게 붙이세요ㅋㅋ
즐거운 하루보내시구요!!
구글 RSS에만 적용하고 한 RSS는 안했어요.
2010/04/14 14:58 [ ADDR : EDIT/ DEL ]앙증맞게 잘 만드셨네요 !!!!
2010/04/14 15:06 [ ADDR : EDIT/ DEL ]이것도 티비님 포스팅대로 그대로 따라하니 금방 만들어지네요....
2010/04/18 16:35 [ ADDR : EDIT/ DEL : REPLY ]제 블로그에 적용시켰습니다.... 잘 쓸게요~ ^^
유용하게 사용해주시면 제가 뿌듯하고 고맙죠 ㅋ
2010/04/18 16:37 [ ADDR : EDIT/ DEL ]필요한 버튼있으시면 이야기해주세요
간단한거면 만들어드릴께요 ^^;;
아.. 그럼 말씀나오신 김에 옆에 방명록 버튼.... 티비님처럼 롤오버 되는걸로 하나 만들어주시면...안될까요? ^^
2010/04/18 16:46 [ ADDR : EDIT/ DEL : REPLY ]앗..이 댓글을 왜 지금봤을까요 ㅠㅋ
2010/04/26 12:08 [ ADDR : EDIT/ DEL ]너무 예쁘네요. 잘보고 갑니다.^^
2010/05/02 00:52 [ ADDR : EDIT/ DEL : REPLY ]예쁘게 봐주셔서 감사드리여 ^^;;
2010/05/02 06:32 [ ADDR : EDIT/ DEL ]즐거운 주말보내세요!!
괜찮네요 저도 살짝 사용 해봅니다.
2010/05/04 14:19 [ ADDR : EDIT/ DEL : REPLY ]유용하게 이용해주셔서 감사드립니다!
2010/05/04 14:25 [ ADDR : EDIT/ DEL ]즐거운 하루 보내세요 !
감사히 잘 쓰겠습니다~ ㅋ 살작 이용할게요~
2010/05/05 23:58 [ ADDR : EDIT/ DEL : REPLY ]제가 아직 블로그를 개장하지 않았는데 곧 개장할 것 같네요. 이것저것 만지고 있는데 큰 도움이 되었습니다~ 또 놀러 올게요~
유용하게 이용해주세요 ^^;
2010/05/06 06:01 [ ADDR : EDIT/ DEL ]궁금한것 있거나 부탁하고 싶은게 있으시면 언제든지 이야기해주세요 !!
즐거운 하루시작하세요!!
저도 이거 적용했어요~~ 전 그냥 롤오버없이 적용했네요~~^^
2010/05/07 02:25 [ ADDR : EDIT/ DEL : REPLY ]오~ 블로그 프로필밑에 다니깐 딱 좋은것 같으세요 ^^;
2010/05/07 06:08 [ ADDR : EDIT/ DEL ]많은 도움 됐습니다!
2010/05/07 21:35 [ ADDR : EDIT/ DEL : REPLY ]제가 강의보면서이것저것 하다보니까
인사가 늦었네요! 앞으로 자주 놀러오겠습니다!^^
그림 솜씨가 너무 부러워요 ㅠ
2010/05/07 21:36 [ ADDR : EDIT/ DEL ]귤군님은 솜씨가 좋으셔서
직접 예쁘고 탐스러운 블로그 이미지랑 파비콘도
빨리만드시면 멋있을것 같으세요!!
제가 너무나 궁금해 하던 좋은정보네요.
2010/05/09 23:40 [ ADDR : EDIT/ DEL : REPLY ]감사합니다.
잘 될지는 모르겠지만
한번 시도 해볼랍니다.ㅎㅎ
안녕히주무세요~^^*
성공 하실꺼예요 !! ^^;;
2010/05/10 05:10 [ ADDR : EDIT/ DEL ]비밀댓글입니다
2010/05/10 00:40 [ ADDR : EDIT/ DEL : REPLY ]가로 사이즈만 정확히 이야기해주시면
2010/05/10 05:11 [ ADDR : EDIT/ DEL ]제가 크기에 맞게 수정해드릴께요!!!
에구구 감사합니다.
2010/05/10 09:15 [ ADDR : EDIT/ DEL ]신경써주셔서요..
180pix 가로싸이즈가...
그럼 부탁 드릴께요~^^
어려운 작업이 아니라서요 ^^;;
2010/05/10 09:22 [ ADDR : EDIT/ DEL ]부담가지실 필요없으세요!! 금방 해드릴께요!
티비님 방금 성공 했어요~
2010/05/10 11:02 [ ADDR : EDIT/ DEL ]너무너무 고맙고 너무너무 좋아요~
복 많이 받으세요...^^*
그런데 딱 중앙에 오질 않네요
2010/05/10 11:03 [ ADDR : EDIT/ DEL ]사이즈가 혹시 190이 아닐까요?
그런가여??
2010/05/10 11:24 [ ADDR : EDIT/ DEL ]그런대요~
그 사이즈를 어케 아는거죠?
처음 스킨 설정할때 나오나요?
전 어설픈 여우님이 달아놓은거보니
2010/05/10 11:26 [ ADDR : EDIT/ DEL ]세로 길이가 달라서 ㅋㅋ 눈짐작으로 190일것 같더라구요^^;
ㅎㅎ..대단하셔욤~!!!
2010/05/10 11:34 [ ADDR : EDIT/ DEL ]다시 티비님 말씀대로 190으로 했는데,
그게 맞는거 같아욤~^^*
덕분에 포스팅 보충 잘했네요 잘했어요
2010/05/10 11:42 [ ADDR : EDIT/ DEL ]감사해요 !! ㅎㅎ
ㅎㅎㅎ..사이즈별로 다 올려놓으셨군요~!!
2010/05/10 18:11 [ ADDR : EDIT/ DEL : REPLY ]정말 대단하시네요~!!!
다시한번 감사드려요~ 꾸~벅~^^
아니예요 ㅋㅋ
2010/05/10 18:15 [ ADDR : EDIT/ DEL ]저도 포스팅이 풍성해지고 좋았어요 ^^;
즐거운 하루 보내세요!!!
여우님 요기서 팁을 얻으셨군요 ㅎㅎ 날로날로 블로그가 업글이 된다했더니요~~
2010/05/11 19:14 [ ADDR : EDIT/ DEL : REPLY ]저도 살짝꿍 배우고 갈께용 ^^ 감사드립니당~~~ ^^
사실 별로 볼것도 없는 블로근데요 ^^;
2010/05/11 19:20 [ ADDR : EDIT/ DEL ]유용하게 봐주셔서 감사드려요 !!
-0- 구독 박스 방금 달았어요 깔끔하고 좋아요 !!!
2010/06/13 16:57 [ ADDR : EDIT/ DEL : REPLY ]유용하게 봐주셔서 감사드려요!
2010/06/13 17:52 [ ADDR : EDIT/ DEL ]방금 테스트하고 한RSS 구독해났어요 ^^;
즐거운 주말보내세요 !
퍼갈께용^^
2010/07/15 22:17 [ ADDR : EDIT/ DEL : REPLY ]유용하게 잘 쓰겠습니다 감사합니다^^
2010/08/08 03:12 [ ADDR : EDIT/ DEL : REPLY ]티비님 좋은 자료 감사합니다. 근데, 제 블로그의 사이드바는 250인데 혹시 250으로 만들수는 없으신가요? 저는 도저히 이렇게 깔끔하게 만들 수가 없네요 ^^;;
2010/08/16 22:17 [ ADDR : EDIT/ DEL : REPLY ]감사해요!~
2010/08/27 17:48 [ ADDR : EDIT/ DEL : REPLY ]감사합니다.. 잘보고 갑니다...
2010/09/20 14:08 [ ADDR : EDIT/ DEL : REPLY ]적용해봐야겠어요~
유용하게 봐주셔서 감사드려요 ^^
2010/09/20 14:35 [ ADDR : EDIT/ DEL ]우와 이렇게 일일히 +_+
2010/11/21 02:29 [ ADDR : EDIT/ DEL : REPLY ]디자인도 멋지고 사이즈 별로 제작하신 것도
정말 멋져요 :D
뒤늦게 좋은 정보 얻어 갑니다 ^^
2010/11/30 21:26 [ ADDR : EDIT/ DEL : REPLY ]잘 활용해볼게요 ~
저는...HTML배너출력이라는 것이 없네요...;;;
2011/02/19 22:16 [ ADDR : EDIT/ DEL : REPLY ]저도 HTML배너출력 이라는 버튼이 없네요;;
2011/03/18 02:57 [ ADDR : EDIT/ DEL : REPLY ]블로그에 적용이 잘 됬네요, 쉬운 설명 감사합니다.
2011/04/02 17:26 [ ADDR : EDIT/ DEL : REPLY ]하하하하하하핫~~ 제가 지금 왜 이렇게 웃는지 설명을 드려야 될 듯요 -ㅎㅎㅎㅎㅎㅎ
2011/04/06 15:51 [ ADDR : EDIT/ DEL : REPLY ]구독버튼 달려고 이리저리 다니면서 한시간을 낑낑거리다가 롤오버 태그쓰는데 자꾸 에러가 나서
한 개 클릭하는 순간 옆의 다른 그림까지 모양이 다 바뀌는 희안한 사태직면 -
해결하고자 막 검색을 하다가 "onmouseover"로 검색을 하니까 티비님 블로그가 나와요 - ㅎㅎ
진작 여기 와서 찾아 볼걸 - 괜히 고생했어요~ ㅎㅎㅎ
안녕하세요. 이 블로그에 와서 많은 것을 배워가네요. 도움 받고 저도 블로그에 적용해 보았습니다. 감사합니다.
2011/06/25 21:13 [ ADDR : EDIT/ DEL : REPLY ]안녕하세요. 이 블로그에 와서 많은 것을 배워가네요. 도움 받고 저도 블로그에 적용해 보았습니다. 감사합니다.
2011/06/25 21:13 [ ADDR : EDIT/ DEL : REPLY ]제가 찾던건데...감사합니다. 전 숙제를 좀 미뤄야겠어요.~ 대박나세요
2011/08/11 12:34 [ ADDR : EDIT/ DEL : REPLY ]오 덕분에 블로그에 이쁘게 단추 달았네요.. 단추도 달았으니 이제 제 글 누가 구독좀 해줬으면 -ㅅㅜ
2012/01/20 01:38 [ ADDR : EDIT/ DEL : REPLY ]좋은 정보 감사합니다.^^
2012/08/09 14:01 [ ADDR : EDIT/ DEL : REPLY ]이렇게 헤드라이트에 불이 들어온다. 그냥 들어와 있는 것이 아니라 간혹 빠르게 깜빡거려 존재감을 보여준다. 데이터가 저장되거나 삭제될 때도 이렇게 반응한다.
2012/10/24 18:42 [ ADDR : EDIT/ DEL : REPLY ]쫄바지 콤보로 입고 나와 섹시댄스 선보인 싸이처럼, 모두가 하버드에서 죽어라 밤낮 가리지 않고 공부하고 있을 때에 나홀로 '어디 한 번 친구들끼리 연결시켜줘 볼까?' 취지 하에 페이스북 만들어버린 마크 저커버그처럼. 여러분도 트렌드를 이끌어 나갈 수 있어요.
2012/10/30 05:56 [ ADDR : EDIT/ DEL : REPLY ]감사합니다 필요한 부분이였는데 적용했답니당:)
2013/03/12 10:21 [ ADDR : EDIT/ DEL : REPLY ]