티스토리와 네이버 이웃추가 버튼 함께 달기

네이버 이웃커넥트를 달고나서 이웃분들의 새글이 올라오면 바로 읽을 수 있어서 참 편리합니다. 아무래도 티스토리 블로그에 글을 쓰다보니 이웃이 거의 티스토리 블로거입니다. 글을 읽다가 구독하고 싶으면 네이버 이웃관리에 가서 열린이웃(rss)추가 버튼을 누르고 사이트 주소를 입력해서 새글을 읽고 있습니다.

이웃 글을 읽다보면 저처럼 네이버 이웃커넥트를 달아 놓은 블로그는 바로 이웃추가를 하면 되는데 그렇지 않은 블로그는 주소를 일일이 손으로 입력해야 합니다. 네이버 이웃커넥트만 달고 만족했는데 링크를 할수 있는 티스토리 이웃추가 버튼을 달아 놓으신 경우는 네이버 이웃커넥트를 연결하지 않아도 편하게 링크할 수 있어서 티스토리 이웃추가 버튼을 달아 보았습니다.  

네이버 이웃커넥트 다는 방법은 이전의 글을 연결해 놓겠습니다.

           

            2019/03/09 - [소소한정보] - 티스토리에 네이버 이웃커넥트 달기

1. 티스토리 이웃추가 버튼 이미지 만들기

포토샵이나 그림도구를 이용해서 직접 만드시면 됩니다. html이 어려워 검색하다가 이웃분이 올려놓은 이미지를 받아서 사용했습니다. 이미지를 바로 올리니 다운이 안되서 압축파일로 올려놓았습니다.

           

btn_tfriend.zip

2. 준비된 이웃추가 버튼 이미지 업로드하기

다운받아 압축풀어 나온 이미지를 티스토리 관리자-스킨편집-html편집에 들어갑니다.

html 옆에 있는 파일업로드를 누르고 +추가를 눌러 준비된 이미지를 올립니다.

3. html에 소스코드 넣기

플러그인으로 넣으니 잘 되지 않습니다. 그래서 직접 html을 눌러 사이드바 메뉴에서 적당한 위치를 찾아 아래 소스를 입력합니다. 친효스킨에는 사이트바 맨아래가 카운터라서 카운터 아래 파란 줄 위치에 아래 코드를 넣습니다. 

소스에서 내티스토리 주소 대신에 붙이는 블로그 주소를 넣으시면 됩니다.

<center>

 <!-- 티스토리 버튼 -->

 <ul>

        <li> <a href="http://내티스토리주소/toolbar/popup/link" target="_blank">

             <img src="./images/btn_tfriend.png" ></a></li>

  </ul>     </center>

그럼 아래 사진처럼 사이드바에 아래 위로 이웃추가 버튼이 만들어집니다. 사이드바가 좁으면 이렇게 배치하면 이쁜데 친효스킨은 사이드바가 제법 넓어서 가로로 두개를 나란히 배치 했습니다.

4. 두 이웃추가 버튼 나란히 놓기

이전에 관리자홈-사이드바에서 플러그인으로 넣었던 네이버 이웃커넥트는 지웁니다. 다시 네이버 이웃커넥트관리하기로 갑니다. 

빨간네모의 위젯관리를 누르고 아래쪽에 코드복사라는 박스를 클릭해서 메모장에 붙여 저장해 둡니다. 네이버 이웃커넥트 소스입니다. 

좀 전에 3번과정에서 추가한 html 소스를 지우고 그자리에 아래의 소스를 다시 붙입니다.

 

<center>

<!-- 티스토리 & 네이버 이웃추가 버튼 -->

<div class="tfriend">

        <ul>

        <li> <a href="http://내티스토리주소/toolbar/popup/link" target="_blank">

             <img src="./images/btn_tfriend.png" ></a></li>

        <li> 네이버이웃추가코드 </li>

         </ul>              </div> </center>

티스토리 이웃추가는 3번과 같고 파란부분의 네이버 이웃추가코드를 지우고 그자리에 좀 전에 메모장에 만들어둔 네이버 이웃커넥트 소스를 복사해서 붙여 넣습니다.

노란색으로 표시한 속성이 없으면 원래처럼 아래 위로 배열됩니다. 

/*이웃추가*/

#sidebar aside .tfriend

li { display:inline-block; margin:0; padding:0;}

두 버튼을 한 줄에 나란히 놓는 스타일을 css에 추가해 주면 됩니다. 위 코드를 복사해서 css편집에 가서 사이드바 부분의 적당한 곳에 넣으시면 나란히 옆으로 놓인 이웃추가 버튼이 됩니다. 이 블로그의 사이드바 아래쪽에 있는 이웃추가 버튼처럼 배열됩니다.