블로그에 구독버튼 관련 소스 및 HTML/CSS 삽입 방법




준비사항


우선, 자신의 메타사이트 고유주소를 올블로그, 블로그독, 다음뷰, 믹시 등에서 추출해 옵니다. 그 다음 아래 샘플 웹코드 해당부분에 삽입하시면 됩니다.


 HTML 영역


<!-- 믹시-->
<div style="float:left; margin-right: 5px; ">
<a href="자신의 고유주소" onclick="window.open(this.href); return false" alt="믹시" title="믹시">
<img src="./images/i-mixsh.png" title="믹시" width="42" height="42" alt="믹시" /></a>
</div>



위에서 width와 height는 버튼의 크기를 나타냅니다. 버튼의 원래 크기보다 크게 되면 이미지가 깨지기 때문에 크기를 맞춰주는 게 좋습니다. 버튼의 크기를 알고 싶으시면 포토샵으로 해당이미지를 끌어온 다음 이미지크기 설정으로 가면 크기를 확인하실 수 있습니다.


"믹시"라고 쓰여 있는 부분은 다른 글로 교체하실 수 있습니다. 커서를 해당 버튼에 올렸을 때 나타나는 메시지입니다.

보통




준비사항


우선, 자신의 메타사이트 고유주소를 올블로그, 블로그독, 다음뷰, 믹시 등에서 추출해 옵니다. 그 다음 아래 샘플 웹코드 해당부분에 삽입하시면 됩니다.


 HTML 영역


<!-- 믹시-->
<div style="float:left; margin-right: 5px; ">
<a href="자신의 고유주소" onclick="window.open(this.href); return false" alt="믹시" title="믹시">
<img src="./images/i-mixsh.png" title="믹시" width="42" height="42" alt="믹시" /></a>
</div>



위에서 width와 height는 버튼의 크기를 나타냅니다. 버튼의 원래 크기보다 크게 되면 이미지가 깨지기 때문에 크기를 맞춰주는 게 좋습니다. 버튼의 크기를 알고 싶으시면 포토샵으로 해당이미지를 끌어온 다음 이미지크기 설정으로 가면 크기를 확인하실 수 있습니다.


"믹시"라고 쓰여 있는 부분은 다른 글로 교체하실 수 있습니다. 커서를 해당 버튼에 올렸을 때 나타나는 메시지입니다.

보통 코드 위아래로 삽입합니다. ctrl + f를 누른 다음 해당창에 를 복사해 붙인 후 찾으시면 바로 접근할 수 있습니다.

 버튼의 수만큼 계속 복사한 후 자신의 고유주소로 수정한다.


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

위의 웹코드를 원하는 수만큼 복사해 삽입합니다.

</div>
<!-- HTML 소스 끝-->

 적용 예


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

<!-- Google RSS피드 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/tistory/srCZ" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/Google.png" title="iGoogle or 구글리더로 구독하기" width="40" height="40" alt="iGoogle or 구글리더로 구독하기" /></a>
</div>

<!-- 블로그독 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://blogdoc.nate.com/search/수다공작소" onclick="window.open(this.href); return false" alt="블로그독" title="블로그독">
<img src="./images/blogdoc.png" title="블로그독" width="40" height="40" alt="블로그독" /></a>
</div>

</div>
<!-- HTML 소스 끝-->


 CSS 영역


/* CCS 에 추가할 소스 */
.metablog_Div_1 {
border:1px solid #E5E5E5; /* 박스테두리 굵기와 색상 */
margin:0px 0px 10px 0px; /* 순서대로 상단 우측 하단 좌측 외부 여백 */
padding:5px; /* 안쪽 여백 */
height: 40px; /* 박스 높이 */
}



border는 버튼이 들어갈 박스를 뜻합니다. #E5E5E5는 박스 외곽선의 컬러를 뜻합니다. 이 부분은 수정 없이 사용하셔도 될 듯 싶습니다. (아래 제 블로그의 구독버튼 참조) 찾기 쉽게 제일 마지막 부분에 넣으세요.

관련글 블로그 구독버튼 공유

코드 위아래로 삽입합니다. ctrl + f를 누른 다음 해당창에




준비사항


우선, 자신의 메타사이트 고유주소를 올블로그, 블로그독, 다음뷰, 믹시 등에서 추출해 옵니다. 그 다음 아래 샘플 웹코드 해당부분에 삽입하시면 됩니다.


 HTML 영역


<!-- 믹시-->
<div style="float:left; margin-right: 5px; ">
<a href="자신의 고유주소" onclick="window.open(this.href); return false" alt="믹시" title="믹시">
<img src="./images/i-mixsh.png" title="믹시" width="42" height="42" alt="믹시" /></a>
</div>



위에서 width와 height는 버튼의 크기를 나타냅니다. 버튼의 원래 크기보다 크게 되면 이미지가 깨지기 때문에 크기를 맞춰주는 게 좋습니다. 버튼의 크기를 알고 싶으시면 포토샵으로 해당이미지를 끌어온 다음 이미지크기 설정으로 가면 크기를 확인하실 수 있습니다.


"믹시"라고 쓰여 있는 부분은 다른 글로 교체하실 수 있습니다. 커서를 해당 버튼에 올렸을 때 나타나는 메시지입니다.

보통 코드 위아래로 삽입합니다. ctrl + f를 누른 다음 해당창에 를 복사해 붙인 후 찾으시면 바로 접근할 수 있습니다.

 버튼의 수만큼 계속 복사한 후 자신의 고유주소로 수정한다.


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

위의 웹코드를 원하는 수만큼 복사해 삽입합니다.

</div>
<!-- HTML 소스 끝-->

 적용 예


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

<!-- Google RSS피드 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/tistory/srCZ" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/Google.png" title="iGoogle or 구글리더로 구독하기" width="40" height="40" alt="iGoogle or 구글리더로 구독하기" /></a>
</div>

<!-- 블로그독 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://blogdoc.nate.com/search/수다공작소" onclick="window.open(this.href); return false" alt="블로그독" title="블로그독">
<img src="./images/blogdoc.png" title="블로그독" width="40" height="40" alt="블로그독" /></a>
</div>

</div>
<!-- HTML 소스 끝-->


 CSS 영역


/* CCS 에 추가할 소스 */
.metablog_Div_1 {
border:1px solid #E5E5E5; /* 박스테두리 굵기와 색상 */
margin:0px 0px 10px 0px; /* 순서대로 상단 우측 하단 좌측 외부 여백 */
padding:5px; /* 안쪽 여백 */
height: 40px; /* 박스 높이 */
}



border는 버튼이 들어갈 박스를 뜻합니다. #E5E5E5는 박스 외곽선의 컬러를 뜻합니다. 이 부분은 수정 없이 사용하셔도 될 듯 싶습니다. (아래 제 블로그의 구독버튼 참조) 찾기 쉽게 제일 마지막 부분에 넣으세요.

관련글 블로그 구독버튼 공유

를 복사해 붙인 후 찾으시면 바로 접근할 수 있습니다.

 버튼의 수만큼 계속 복사한 후 자신의 고유주소로 수정한다.


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

위의 웹코드를 원하는 수만큼 복사해 삽입합니다.

</div>
<!-- HTML 소스 끝-->

 적용 예


<!-- HTML에 삽입할 소스 -->
<div class="metablog_Div_1">

<!-- Google RSS피드 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/tistory/srCZ" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/Google.png" title="iGoogle or 구글리더로 구독하기" width="40" height="40" alt="iGoogle or 구글리더로 구독하기" /></a>
</div>

<!-- 블로그독 -->
<div style="float:left; margin-right: 5px; ">
<a href="http://blogdoc.nate.com/search/수다공작소" onclick="window.open(this.href); return false" alt="블로그독" title="블로그독">
<img src="./images/blogdoc.png" title="블로그독" width="40" height="40" alt="블로그독" /></a>
</div>

</div>
<!-- HTML 소스 끝-->


 CSS 영역


/* CCS 에 추가할 소스 */
.metablog_Div_1 {
border:1px solid #E5E5E5; /* 박스테두리 굵기와 색상 */
margin:0px 0px 10px 0px; /* 순서대로 상단 우측 하단 좌측 외부 여백 */
padding:5px; /* 안쪽 여백 */
height: 40px; /* 박스 높이 */
}



border는 버튼이 들어갈 박스를 뜻합니다. #E5E5E5는 박스 외곽선의 컬러를 뜻합니다. 이 부분은 수정 없이 사용하셔도 될 듯 싶습니다. (아래 제 블로그의 구독버튼 참조) 찾기 쉽게 제일 마지막 부분에 넣으세요.

관련글 블로그 구독버튼 공유