[티스토리] 나만의 feeds 버튼 만드는 방법

샐리의 이야기보따리를 방문해주신 분께서 

피드 버튼 만드는 방법을 

포스팅 해주었으면 좋겠다고 댓글을 달아주셨었는데요.

망설이다가 올려봅니다. ㅎㅎ

요청하신 부분은

샐리의 블로그 오른편에 있는 아래사진의 화살표 Feeds 부분이랍니다. 

먼저 마음에 드는 버튼이미지를 구해야 한답니다.

버튼이미지를 구했으면 본인의 블로그에 비공개 글로 이미지를 올리고 저장하면 준비는 끝났습니다.

다음은 티스토리 블로그에 로그인하여 기존 html을 복사하여 한글프로그램등에 저장을 일단 해놓기를 추천합니다.

그리고 아래 화살표 부분의 html편집을 클릭해주면 된답니다.

혹여나 html을 잘못 건드려서 오류가 났을때를 대비하기 위함이니 

꼭~~!! 기존 html을 복사하여 한글프로그램 같은것에 저장해놓으시기 바랍니다.

이미 기존 html을 보관하고 있다면 그 과정은 패스~해도 되겠습니다.  ^^*

이제 준비는 끝났으니 소스를 만들어 원하는 위치에 넣어보겠습니다.

샐리의 이야기보따리는 총 6개의 피드 버튼을 2줄로 나열을 하였는데요.

feeds 부분은 table을 사용하여 만들었으며 구성은 다음과 같습니다.

--------------------------------------------------------------------------------

<s_sidebar_element>

<!-- FEEDS -->

<div class="module module-tb tbs">

<h4 class="module-title"><span class="inline-block">Feeds</span></h4>

<table style="width:100%;" align="center">

<tbody align="center">

위에 3개의 버튼에 해당하는  <td> ~~ </td>

</tbody></table></br> 

<table style="width:100%;" align="center">

<tbody align="center">

아래 3개의 버튼에 해당하는   <td> ~~ </td>

</tbody></table>

</div>

</s_sidebar_element>

--------------------------------------------------------------------------------

위나 아래의 버튼에 해당하는 <td> ~ </td>까지 부분은 아래와 같습니다.

rss부분은 아래처럼 만들면 된답니다.

<td>

<!-- RSS 버튼 -->

<a href="http://sallykim.tistory.com/rss" target="_blank" title="RSS 구독" onfocus="this.blur()">

<img src="이미지 주소부분" width="50" height="50" alt="RSS 구독" /></a>

</td>

트위터 버튼은 아래처럼 소스를 만들어주면 됩니다.

<td>

<!-- 트위터 버튼 -->

<a href="https://twitter.com/본인아이디" target="_blank" title="트위터" onfocus="this.blur()">

<img src="이미지주소부분" width="50" height="50" alt="트위터" /></a>

</td>

rss 버튼 만들때와 트위터 버튼 만들때를 비교해보면 어느 부분을 수정해주면 될지 아시겠지요?

조금더 설명해보자면

a href 명령어 다음에는 실질적인 이동하고자 하는 주소를 넣으면 되구요.

img alt 명령어 다음에는 아래 사진처럼 마우스커서를 가져다 댔을때 해당이미지에 대한 설명을 넣어주면 되며

width와 height는 원하는 사진 사이즈를 넣으면 되겠습니다.

앞서 블로그에 비공개글로 이미지를 올렸을때의 사이즈에 따라 width 와 height 를 조절하면 되네요.

이미지 주소부분에는 비공개글에 올린 이미지의 주소를 복사하여 넣어주면 되는데요.

샐리의 이야기보따리의 경우엔 포스트글내용 복사가 차단되어있는터라

작성된 글에선 마우스오른쪽버튼으로 속성을 볼수 없어 

아래처럼 해당글의 수정으로 들어가거 마우스 오른쪽버튼으로 이미지주소 복사를 했습니다.

위 사진처럼 복사를 해서 원하는 소스 위치에 붙여넣기 해주면 되며

티스토리 블로그 스킨편집에서 원하는 html 위치에 넣어 확인하시면 되겠습니다.

부디 이글이 예쁘고 멋진 나만의 FEEDS 버튼을 만드는데 도움이 되길 바래봅니다. ^^*