메타블로그등에 자신의 글을 보여주거나 글 등에 자신의 사이트를 아래의 그림처럼 만들어 보자구요. 아래의 그림은 제가 하는 것인데 바로 아래와 같은 구독버튼은 수다공작소님 글인 http://thinkgood.tistory.com/129 에서 아래를 포함한 많고 다양한 버튼을 배포하고 있으니 거기에서 다운로드 등을 받을 수 있습니다.

아래는 CSS의 Hover를 사용한 것으로 처음에는 원래 이미지의 불투명도가 75% 나왔다가 이미지에 마우스를 올리면 원래 이미지가 보이도록 하였고 마우스를 올리면 이미지에 테두리가 나오도록 설정했습니다.


구독버튼 추가하기

위와 같은 것을 전체 페이지에 동일나게 나오게 하려면 HTML/CSS 편집에 코드를 집어 넣어야 한다는 것을 알아두시고 그럼 이제부터 설정하는 법에 대해 간단히 설명하겠습니다.

1.  관리에서 스킨의 HTML/CSS 편집을 클릭한 후 코드를  style.css에 붙이면 아래 그림의 빨간색처럼 됩니다. 말을 이렇게 했다고 코드를 style.css에 풀로 붙이는 것 아니겠죠.  참고로 아래 코드 복사는  아이콘이 4개에서 왼쪽에서 두번째 아이콘을 클릭하면 코드가 번호없이 복사됩니다.
아래 코드에 대해 간단한 설명을 하자면 이미지의 원본을 보시고 싶다면 filter(opacity=100)opacity:1로 설정하는데 이미지에 마우스를 올리는 것은 hover라고 하는데 처음에는 이미지의 불투명도를 0.75(75)로 했다가 마우스를 올리면 불투명도가 1(100)으로 불투명도가 전혀 없는 원본 이미지가 나오게 했으니 불투명도를 조절하기 위해서는 opacity 옆의 수치를 조정해야 하고 hover는 마우스가 이미지에 올라갔을 때입니다. 

.over img{ opacity:0.75;filter:alpha(opacity=75);BORDER: #ffffff 1px solid; } 
.over img:hover {opacity:1; filter:alpha(opacity=100); BORDER: #999999 1px solid;} 

2. 아래의 구독코드를 받아 HTML/CSS 편집하기의 skin.html의 아래 그림의 [##_article_rep_desc_##아래에 코드를 삽입하면 됩니다. 참고로 저는 잘못해서 매번 글쓰기시 코드를 삽입해야 하는 불편이 있습니다.
모든 브라우저에 통하는 코드 

지금부터 설명하는 것은 머리 아픈 CSS를 깊게 들어가는 것이니 보시고 싶은 분만 보세요. 처음에  Filter(opacity=75)를 적용했더니 이미지의 투명이 익스플로러외의 브라우저에 적용 안돼 UO런치패드님과 정찬명님께 많이 물어봐서 안 것인데 Filter(opacity=수치)는 CSS 표준이 아니며 익스플로러에서만 되는 것이라 알고 모든 브라우저에 적용되기 위해서는 아래의 코드를 보듯이 opacity:0.75을 추가해야 된다는 것을 알았습니다. 

.over img { pacity:0.75;filter:alpha(opacity=75); }
.over img:hover {opacity:1; filter:alpha(opacity=100); } 

활용하기 - 활용하는 것은 골치가 아프니 관심없고 복잡하다면 그냥 넘어가세요.

위와 같은 효과를 이미지에 나오게 하고 싶다면 A 태그에 아래 코드처럼 class="over"를 덧붙이면 됩니다.예로 아래 코드를 보듯이 다음뷰 구독하기 이미지에 위와 같은 효과를 주기 위해 class="over"를 넣었으니 이미지가 투명효과및 테두리가 나타나고 아래 코드에서 초록색은 인라인 스타일시트를 적용해 본 것입니다. 참고로 아래 코드는 이 블로그의 사이드바의 구독에 관한 코드입니다.

<div align="center">
<a href="http://v.daum.net/user/plus?blogurl=http://min-blog.tistory.com" target="_blank" title="다음뷰 구독하기" class="over"><img src="http://cfs.tistory.com/custom/blog/27/279386/skin/images/dv.JPG"></a>

 <a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fmin-blog.tistory.com" target="_blank" title="한RSS 구독하기" class="over"><img src="http://cfs.tistory.com/custom/blog/27/279386/skin/images/rss_image.JPG" border="0" style="opacity:0.7;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"></a>
</div>

관련글
아래에 티비님의 다음뷰,한RSS.올포스트의 구독 버튼 만드는 강좌에 연결했으니 많은 참조바랍니다.

'정보' 관련된 글 MORE

  1. BlogIcon DDing 2010.07.12 07:49 신고  댓글주소  수정/삭제  댓글쓰기

    다른 분들도 많이 사용하시길래 궁금했는데 한 번 달아봐야겠어요. ^^

  2. BlogIcon 티비의 세상구경 2010.07.12 08:29 신고  댓글주소  수정/삭제  댓글쓰기

    너무 깔끔하고 멋있는데요~! 길쭉한 다음뷰랑 한rss는 빼버리고
    한rSS를 정사각형으로 만들면 더 멋있을것 같다는 생각도 드네요~!

  3. BlogIcon 머 걍 2010.07.12 08:41 신고  댓글주소  수정/삭제  댓글쓰기

    이런거 만드시는 분들 존경합니다.
    저녁때 함 공부해봐야겠습니다^^

    • BlogIcon 백전백승 2010.07.12 10:59 신고  댓글주소  수정/삭제

      정말 존경스럽습니다. 그리고 구독버튼을 만든 사람은 다른 사람인데 구독버튼을 저에게 사용되냐는 허락을 하길래 적어보았습니다.

  4. BlogIcon 엑셀통 2010.07.12 11:45 신고  댓글주소  수정/삭제  댓글쓰기

    저도..예쁜 구독버튼을 달아..뿜뿌를 갖게되었답니다.
    하지만 지금도..어디서 오류가 나는지 예약발행이 안되는 오류로 몸살을 앓고 있어요

    • BlogIcon 백전백승 2010.07.12 12:41 신고  댓글주소  수정/삭제

      예약발행이 안되는 것이 혹시 스크립트간의 충돌일지 모르겠네요.

    • BlogIcon 엑셀통 2010.07.12 12:59 신고  댓글주소  수정/삭제

      앗..그럼 어찌 해결해야될지요.
      씨디맨님께 문의드렸는데..식사후에 알려주실것 같긴해요. 다음 회신메일은 읽었는데 PC사용에 브라우저 정보 등등..많은 것을 메모해달라고해서..나 몰라라 했어요

    • BlogIcon 백전백승 2010.07.12 13:54 신고  댓글주소  수정/삭제

      저는 어떻게 하냐면 자바스크립트가 들어간 것을 하나하나 제거하는데 문제는 이전에 고생하여 설치한 것이 없어지므로 처음부터 자바스크립트 등 문제가 될 만한 것을 설치하지 않으므로 씨디맨님의 답변을 기다리는 것이 좋겠네요.

  5. BlogIcon 미셀러니 2010.07.12 12:48  댓글주소  수정/삭제  댓글쓰기

    궁금했는데 딱 좋네요. 사무실에서 실험해봐야겠어요..ㅋㅋ
    근데 구독버튼을 달 수 있을 정도로 남부끄럽지 않는 포스팅하기가 어렵네요..

    • BlogIcon 백전백승 2010.07.12 14:01 신고  댓글주소  수정/삭제

      미셀러니님은 네이버 블로그시니 티스토리 블로그처럼 HTML이나 CSS를 편집할 수 없고 글에서 하는 CSS도 제한이 있을지 모르니 고생할 수 있으며 위와 같은 효과를 낼 수 없을 것 같으니 단지 이미지와 링크태그만을 이용하시기 바랍니다. 그리고 좋은 글이 없다면 글쓰기시 저처럼 알리고 싶은 글에만 버튼을 삽입하는 방법밖에 없네요.

    • BlogIcon 백전백승 2010.07.12 14:53 신고  댓글주소  수정/삭제

      방금 해 보았는데 결론은 네이버 블로그에서는 자바스크립트에 제한이 있어서 위와 같은 롤오버는 만들 수 없었습니다.

      http://min-blog.tistory.com/124 글을 보시면 아시겠지만 네이버 블로그는 자바스크립트가 안됩니다.

  6. BlogIcon 찌질철이 2010.07.12 13:37 신고  댓글주소  수정/삭제  댓글쓰기

    저도 얼마전에 이 작업 하느라 고생했지요 ㅡㅡ;
    전 너무 많이 다는 것도 안 조아 보여서.. 딱 다섯개만 달아놨슴니다~

    • BlogIcon 백전백승 2010.07.12 14:05 신고  댓글주소  수정/삭제

      저도 유입이 별로 없는 것은 줄여야 겠어요.멋있다보니 버튼을 마구 설치했거든요.

      저는 버튼이 투명도가 익스플로러외 다른 브라우저에 통하지 않는 것 때문에 고생했어요.

  7. BlogIcon 링크정보 2010.07.12 15:46 신고  댓글주소  수정/삭제  댓글쓰기

    UFO런치패드 -> UO런치패드 예요. ㅋㅋ
    성공하셨군요. 축하드립니다.
    저도 수다님 아이콘으로 공유버튼 넣는 거 글 쓴 거 있어서 트랙백 보낼께요.

  8. BlogIcon 스머프s 2010.07.12 15:55 신고  댓글주소  수정/삭제  댓글쓰기

    이거 달고 싶은데 어렵네요 ㅋㅋ 연구해서 성공해야겠어요.^^ 좋은 글 잘 보고 갑니다.^^

    • BlogIcon 백전백승 2010.07.12 18:04 신고  댓글주소  수정/삭제

      제가 자세히 설명하지 않았으니 어려울 것입니다. 버튼이 쓸만하니 활용할 곳이 많을 것입니다. CSS와 태그를 알면 쉬워도요.반드시 성공하여 활용하시기 바랍니다.

  9. BlogIcon 눠한왕궤 2010.07.12 21:54 신고  댓글주소  수정/삭제  댓글쓰기

    @.@ ㅎㅎ멋있네요.
    저도 실력이 안되서. ㅎㅎ ^_^ 즐거운 일주일 시작하세요~!!

    • BlogIcon 백전백승 2010.07.12 22:07 신고  댓글주소  수정/삭제

      멋진 아이콘을 만들어 공유해 주시는 수다공작소님과 저에게 표준을 가르쳐준 UO터치패드님과 정찬명님의 도움덕분이죠.
      눠한앙궤님도 즐거운 일주일을 보내세요.

  10. BlogIcon 윤뽀 2010.07.13 11:07 신고  댓글주소  수정/삭제  댓글쓰기

    저는 지금에서 올포스트 하나 추가하고 싶은데 배열이 흐트러질 것 같아서 고민입니다 ㅎㅎㅎㅎ

  11. BlogIcon ☆북극곰☆ 2010.07.13 16:59 신고  댓글주소  수정/삭제  댓글쓰기

    현재 블로그에 달아놓은 구독버튼들을 업데이트 시키려고 하고 있었는데 이렇게 유용한 정보가 때마침 제게 찾아왔군요 ^^ ㅋㅋ
    백전백승님의 디테일한 설명 덕에 오늘밤에는 좀 덜 헤맬것 같습니다. ^^
    블로그에 손을 대려면 하루종일 네이버 혹은 다음으로 제가 필요한 정보들을 찾아봐야 하고 여간 힘든일이 아니더라고요. 이럴때마다 주변 이웃분들의 포스팅에 제가 찾고 있던 정보가 있으면 너무 편하고 좋답니다.
    오늘 일찍 일을 끝내고 퇴근한만큼 블로그의 이곳저곳을 손봐야 겠어요. ^^
    백전백승님, 자주 들리지 못해서 죄송해요~ 흑흑

    • BlogIcon 백전백승 2010.07.13 17:36 신고  댓글주소  수정/삭제

      저도 폴라베어뱅크님뿐만 아니라 다른 이웃분들이 글에서 많이 배워요. 특히 티비님의 글은 제가 위에서 설명했듯이 복잡한 과정은 빼고 키포인트만 알려 주시기 때문에 그 읽기도 편한 것 같아요. 위도 글은 제가 사용했지만 아이콘과 CSS에 다른 사람이 도움을 많이 받았거든요.

      저도 폴라베어뱅크님의 홈페이지를 자주 방문하지 않는데요.

  12. BlogIcon kkman 2010.07.17 08:38 신고  댓글주소  수정/삭제  댓글쓰기

    글읽고 링크걸고 갑니다^^
    자주와서 많이 배워야겠어요^^

  13. BlogIcon kkman 2010.07.18 09:17 신고  댓글주소  수정/삭제  댓글쓰기

    백전백승님;;
    질문이 있는데;;
    제가 조금전에 Html을 수정했는데;;
    무엇을 수정했는지 사이드바가 옆에 있지 않고 아래로 붙어 버렸어요;;
    이거 어떻게 수정하는지 알수 있을까요??ㅠㅠㅠ

    • BlogIcon 백전백승 2010.07.18 11:52 신고  댓글주소  수정/삭제

      kaman님의 블로그에 사이드바가 밑으로 가는데 저도 이유를 확실히 알 수 없지만 글에 <div>를 잘못하거나 삽입위치가 잘못되면 사이드바가 아래로 붙는다는 답은 집어치우겠으니 그냥 참고만 하세요.

      좋은 교훈을 얻었으니 스킨 수정시 먼저 해야 할 것은 스킨 수정후 원래로 돌아가기 위해서 스킨을 저장하지 않으면 엄청 고생합니다. 스킨 수정은 반드시 스킨을 먼저 저장한 후 수정해야 나중에 원래로 되돌리기 쉬워요. 고생되더라도 원래 스킨으로 새로 복구하시기 바랍니다. 그리고 새로한 스킨의 html과 CSS를 모두 백업해 놓으시기 바랍니다.

      ps.제 블로그 왼쪽의 이동 버튼은 익스플로러6에서는 적용이 안돼 밑으로 가게 됩니다.

  14. BlogIcon kkman 2010.07.18 11:14 신고  댓글주소  수정/삭제  댓글쓰기

    그러면;;; 초기화를 해야 한다는 건가요??^^
    초기화는 어떻게 해야 하는건가요?

    • BlogIcon 백전백승 2010.07.18 11:21 신고  댓글주소  수정/삭제

      제가 말을 제로보드XE를 다루면서 초기화라고 잘못말했네요.
      초기화를 다시말하면 블로그를 만들 때 스킨을 고르듯이 다시 하라는 말이었습니다.

  15. BlogIcon kkman 2010.07.18 11:27 신고  댓글주소  수정/삭제  댓글쓰기

    아^^ 스킨 다시 골라서 다시 했어요^^ ㅎㅎㅎ
    새로운 좋은 교훈을 얻었네요^^ㅎㅎㅎㅎ

  16. BlogIcon ggoi 2010.07.21 13:48 신고  댓글주소  수정/삭제  댓글쓰기

    스킨의 사이드바가 230이라 전 이번에 200으로 바꾸고 가로스크롤바가 생기는 것을 없앴네요.
    스킨 수정 노가다라는데 정말 그런 것 같아요.
    하나 해 놓으면 더 좋은게 눈에 띄니 혹~하며 또 바꿔야 해? 라는..;;

    어쩄거나 익스6은 없어여쟈 할 브라우저~~라는거죠.

    저도 제 글 트랙백 걸었어요.

    • BlogIcon 백전백승 2010.07.21 14:31 신고  댓글주소  수정/삭제

      네이버 블로그를 할때 가로스크롤바가 생겨 티스토리 블로그에서는 CSS로 가로스크롤바가 안나타나게 조정할 수 있으니 좋은 것 같고 처음에 스킨을 많이 수정한 후 이제는 그냥 평범하게 두는 경향이 있습니다. 스킨 수정 후 블로그가 잘못되어 엄청 고생한 경험이 있어서요.

      익스플로러 6까지 고려한다면 절대 멋있게 할 수 없을 것 같아요. 익스플로러 6이 사람을 고생시키는 것이 너무 많아요.