멋있는 구독버튼으로 글도 공유하기

메타블로그등에 자신의 글을 보여주거나 글 등에 자신의 사이트를 아래의 그림처럼 만들어 보자구요. 아래의 그림은 제가 하는 것인데 바로 아래와 같은 구독버튼은 수다공작소님 글인 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_##] 아래에 코드를 삽입하면 됩니다. 참고로 저는 잘못해서 매번 글쓰기시 코드를 삽입해야 하는 불편이 있습니다.

구독코드.txt

모든 브라우저에 통하는 코드 

지금부터 설명하는 것은 머리 아픈 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.올포스트의 구독 버튼 만드는 강좌에 연결했으니 많은 참조바랍니다.

• http://ggoi.tistory.com/112 : 이 블로그 오른쪽 구독 아이콘을 세로로 5개 배열하는 것은 만드는 것에 대한 구독 버튼에 대한 글입니다.
• http://nextgoal.tistory.com/367 : 다음뷰,한RSS 구독 버튼 만들기