티스토리 스킨 100% 활용하기 - 이웃추가 버튼메뉴 달기



일반적으로 네이버나, 다음과 같은  포털블로그 말고도, 텍스트큐브에서도 되는 이웃추가, 친구추가, 즐겨찾기추가, 링크추가 등등.. 갖가지 이름으로 존재하는 해당 블로그 서비스를 받는 블로그들 손쉽게, 내 블로그를 이웃에게 링크될 수 있도록 버튼으로 꾸며져 있다.
물론, 티스토리도 프로필 레이어 라는 기능으로 지난 7월 달에 새롭게 기능이 추가되어, 예전에 비해서 훨씬더 수월하게 마음에 드는 블로그를 내 이웃으로 추가할 수 있고, 또 다른 블로거께서 내 블로그를 이웃으로 추가할 수 있는 기능있다. 하지만, 프로필 레이어는 기본적으로 사이드바 또는 다른 블로그에 댓글을 달았을 때, 닉네임 옆에 나타난다.

사이드바 출력 예댓글 출력 예


하지만, 사이드바에 출력되는 프로필 레이어 같은 경우는 현재 블로그 스킨과 디자인적인 측면에서 어울리지 않는 경우가 많아 많은 블로거님들게서 사이드바 출력을 꺼려하는 경향이 많이 보이고 있고, 저 또한 현재 블로그 디자인과 전혀 매치가 되질 않아, 사용하지 않는다.

이번에 소개할 내용이 바로 현재 사용하고 있는 블로그 스킨 디자인에 최대한 근접하고, 이질감없이 자연스러움면서 포털블로그 처럼 손쉽게 이웃에게 링크 걸리도록 하는 메뉴버튼을 설치하는 것이다. 뭐, 그렇다고 없는 기능을 만들어서 넣은 것은 아니고, 기존에 프로필 레이어에 이웃추가버턴에 있는 기능을 살짝 가져와서, 자신의 블로그 원하는 위치에 원하는 디자인으로 추가하는 것이다.


우선, 티스토리 이웃추가 메뉴버튼 소스코드

html/css 또는 자바스크립트 코드를 아주 조금만 할 줄알고, 소스보기를 할 줄알면 누구나, 쉽게 접근할 수 있다. 그리고, 제공하는 코드만 있으면 어떤 곳이든 원하는 곳에 넣을 수 있다.^^

1. 문자 이웃추가 버튼용
<a href="#" title="타이틀 명" onclick="window.open('/toolbar/popup/link/','','width=500,height=300');">이웃추가</a>

2. 이미지 이웃추가 버튼용
<a href="#" title="타이틀 명" onclick="window.open('/toolbar/popup/link/','','width=500,height=300');">
      <img src="./images/link_btn.gif" />
</a>


위 두 코드의 핵심은 같다. 단지 글자로 또는 이미지로 버튼을 디스플레이 시킬 것이지만 틀린다. ^^ 그리고, width, height값은 변경해도 적용되지 않는다. 다만, 처음 작동할 때 초기 오픈창의 크기이다. top, left와 같이 위치 변경값은 적용된다.

필요한 코드를 드래그 복사해서, 여러분의 원하는 스킨위치에 붙여넣기하면 끝이다.ㅎㅎㅎ 이미지 버튼은 포토샵과 같은 이미지 편집프로그램을 이용해서 이쁘게 만들어서 link_btn.gif 파일이라는 이름으로 저장하고, 관리자 모드 -> 스킨 -> HTML/CSS 편집 -> 파일 업로드 를 이용해서 버튼 이미지를 업로드 시켜야 한다.




대략적인 스킨 적용방법

대부분 자작 또는 템플릿 스킨을 이용하더라고, 각각의 블로그 마다 조금씩 특색있어서, 정확하게 어디에 어떻게 집어넣어야 된다라고 말할 수 가 없다.ㅡ,.ㅡ; 스킨을 조금이라도 만져봤다면, 위의 내용만 있어도 충분히 넣을 수 있겠지만, 그렇치 못한 분들도 많이 계시기 때문에, 딱 꼬집어 설명할 수는 없지만, 대략적으로 원하는 위치에 넣을 수 있도록은 설명한다.


대충 요렇게 생긴 상단 블로그 메뉴에 추가 한다면, 
관리자 -> 스킨 -> HTML/CSS 편집 skin.html 에서 아래와 비슷하게 생긴 코드를 찾는다. 위치를 못찾겠다면, Ctrl+F 키를 눌러, 아래 글자중 특이한 문자열을 찾기하면 쉽다.
 <div id="blogMenu">
     <ul>
        <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
        <li class="tab_home"><a href="/" title="홈">Home</a></li>
        <li class="tab_tag"><a href="/tag" title="태그">Tag</a></li>
        <li class="tab_media"><a href="/media" title="미디어로그">MediaLog</a></li>
        <li class="tab_location"><a href="/location" title="로케이션로그">LocationLog</a></li>
        <!-- <li class="tab_key"><a href="/keylog" title="키로그">KeyLog</a></li> -->
        <li class="tab_guestbook"><a href="/guestbook" title="방명록">Guestbook</a></li>
        <li class="tab_admin"><a href="/admin" title="관리자">Admin</a></li>
        <li class="tab_write"><a href="/admin/entry/post" title="글쓰기">Write</a></li>
     </ul>
</div>

모든 스킨이 똑같은 코드를 쓰는게 아니기 때문에, 대략 비슷하게 생긴 부분을 찾아서..^^ 아래 소스를 원하는 위치에 붙여 넣는다.  제일 뒤에 추가를 원한다면, </ul> 바로 위에 아래 코드를 붙여넣기 하면 된다.
<li class="tab_link">
     <a href="#" title="타이틀 명" onclick="window.open('/toolbar/popup/link/','','width=500,height=400');">이웃추가</a>
</li>

위와 같이 html에 추가를 했다면, style.css 도 같이 수정해야 한다.

아래 CSS 소스위치를 찾는다. 찾기 힘들다면, Ctrl+F 키를 눌러 .tab_write 를 찾는다. 
#blogMenu {float:right; margin-top:/*@title-height:-61=*/13px/*@*/; margin-right:5px; }
#blogMenu ul li {float:left; }
#blogMenu a {
 display:block;
 height:16px;
 background-repeat:no-repeat;
 text-indent:-1000px;
 overflow:hidden;
 cursor:pointer;
 background-position: 0 center;
}
#blogMenu .tab_home a {width:34px; background-image:url(images/tab_home.gif);}
#blogMenu .tab_tag a {width:36px; background-image:url(images/tab_tag.gif); }
#blogMenu .tab_media a {width:68px; background-image:url(images/tab_media.gif); }
#blogMenu .tab_location a {width:81px; background-image:url(images/tab_location.gif); }
#blogMenu .tab_key a {width:52px; background-image:url(images/tab_key.gif); }
#blogMenu .tab_guestbook a {width:72px; background-image:url(images/tab_guestbook.gif); }
#blogMenu .tab_admin a {width:49px; background-image:url(images/tab_admin.gif); }
#blogMenu .tab_write a {width:40px; background-image:url(images/tab_write.gif); }


#blogMenu .tab_write a {width:40px; background-image:url(images/tab_write.gif); } 바로 아래 다음과 같이 코드를 붙여넣기 한다.
#blogMenu .tab_link a {width:40px; background-image:url(images/link_btn.gif); }

위 CSS 및 스킨 상단 블로그 메뉴는 이미지로 출력되도록 셋팅되어 있는 코드이다. 문자로 되어 있거나, 이미지로 되어있거나, 기존에 CSS를 그대로 복사해서, Widht 값만 변경하거나, 이미지 파일명만 바꿔서 사용하면 된다.

이웃추가 메뉴가 생성된 이미지



■ 새롭게 생긴 메뉴 설정 스킨일 경우
기존스킨은 상단 블로그 메뉴가 사용자가 직접 꾸밀수 있도록 되어 있다. 하지만 최근에 티스토리에서 메뉴설정 위자드 기능을 새롭게 추가하여, 별도로 스킨을 수정하지 않고도, 상단 블로그메뉴의 내용과 링크를 손쉽게 변경할 수 있도록 기능을 추가했는데, 혹시나 이 스킨을 이용하는 분들이라면, 별도로 코드 수정(?)해야만, 블로그 메뉴 옆에 같이 쓸수 있다.
뭐, 다른 위치에 별도로 구성하겠다고 한다면, 크게 신경쓰지 않아도 된다.^^


마무리하며,

간단한 기능을 추가하는 것이라, 별로 크게 신경쓰지 않고, 글을 썼는데, 생각을 글로 옮기니 글이 참 많이 길어졌다.ㅎㅎ "이웃추가"라는 어떻게 보면, 티스토리에서 기본적으로 제공해주는 기능일 수 도 있고, 아닐 수도 있는 기능이지만, 기존 프로필 레이어 보다는 훨씬 간결하고, 원하는 위치 곳곳에 적재할 수 있는 장점이 있는 팁이라고 생각하고, 글을 써본다.
여러분들도 여러분의 블로그 스킨에 다른 블로거님이 쉽게 이웃을 추가할 수 있도록 한번 배려해주는 것도 참 좋을 듯하다.

티스토리 블로그는 참 재미있는 블로그다. 포스팅하는 재미도 쏠쏠하지만, 스킨을 꾸미는 재미 또한 포스팅하는 것 만큼이나 쏠쏠한 재미를 제공하고 있다. 물론, 설치형 블로그 보다는 많은 것이 불편하지만, 다른 블로그 서비스 보다는 정말 아기자기하게 꾸며가는 재미가 있는 블로그이다.ㅎㅎ


Comments 19