eyeball's Life(Old)

요즘들어 위와같이 snap을 쓰는 블로거들이 많이 보인다. snap이란 snap.com에서 제공중인 링크 미리보기 서비스다. 하지만 나는 개인적으로 snap의 미리보기는 너무 크고 지저분하다고 느낀다. 그리고 가끔 이미지 파일까지 미리보기창을 띄우는 경우도 있다. 그래서 나는 예전부터 StarLight님의 Link_thumbnail 플러그인과 도아님의 바깥고리표시 플러그인을 접목 시켜서 사용해왔다. 그러나 StarLight님의 플러그인은 최상위 도메인까지만 미리보기가 가능하기 때문에 snap처럼 하위도메인이나 게시물에 대한 미리보기는 불가능하였다. 그래서 생각해낸 것이 snap의 이미지를 Link_thumbnail에 적용시킨다는 것이다.

이를 위해서는 먼저 snap.com에서 키를 발급 받아야 한다. 도메인과 이메일주소만 있으면 간단하게 발급 받을 수 있다. 그리고 필요한 것은 당연히 바깥고리표시와 Link_thumbnail플러그인이 있어야 한다. 준비가 끝났으면 플러그인을 설치하고 활성화 하도록 하자.

먼저 Link_thumbnail의 미리보기 기능을 바깥고리표시플러그인에서 표시되도록 한다.
바깥고리표시 플러그인의 index.php파일을 열어 위의 그림과 같이 24번줄 밑에 다음의 코드를 삽입한다.

이렇게만 하더라도 링크 미리보기는 표시된다. 그러나 이 상태는 앞서 말한 문제가 있으므로  snap의 이미지로 대체해야 한다.
Link_thumbnail플러그인 폴더에서 Link_Thumbnail폴더의 arc90_linkthumb.js파일을 열어 위의 그림과 같이 34~36번줄을 주석처리 한 후 그 밑에 다음의 코드를 삽입한다.
그리고 39번째 줄의 m.alt = '[Picture of '+ n +']';에서 n을 h로 바꾼다.

이렇게 하면 미리보기 이미지에 snap의 이미지가 표시된다. 한가지 더 팁으로 미리보기 이미지의 크기를 조절하고 싶다면 link_thumbnail플러그인의 index.php파일에서 27~28, 33~34번째 줄에서 변경이 가능하다.

얼마전 귀찮아서 미루고 있었던 테터툴즈를 1.0.6에서 1.1.0.2로 업그레이드 했다.
그러나! 업그레이드를 마치자 마자 문제에 봉착...

플러그인들의 물갈이와 파일 업로드문제, 파폭에서 댓글 에 댓글달기 확인버튼 사라짐,
파폭에서 이지윅에디터가 작동 불능!!

일단 플러그인들은 플러그인폴더를 싹 비운 뒤 테터의 기본 플러그인을 다시 업로드 하고
테터 홈에서 쓸만한 플러그인을 다시 받는 선에서 해결...
그 다음 해결할 사항이 파일 업로드 문제였는데...
이 문제는 알고봤더니 첨부파일을 백업하고 복원하는 과정에서 소유권이 바뀌어 생긴 문제로..
알아내기까진 오래 걸렸지만 정작 고치는덴 5초만에 해결....(허무했다..)
마지막으로 해결할 가장 큰 문제가 파폭에서 댓글 확인 버튼이 사라진 문제와
이지윅이 작동하지 않는 문제였는데... 이 문제는 테터의 문제가 아니였다..oTL...

일단 파폭에서 이지윅이 작동 하지 않는 사례들을 검색해 봤으나.. 내 설정은 제대로 되어있었다.
그 다음 취한 액션이 파폭의 플러그인을 전부 끈 다음 다시 시도해보았는데.... 빙고!!
보너스로 댓글 확인 버튼 문제까지 해결되었다... 결론은 파폭의 플러그인이 문제라는 것!!

어차피 파폭도 2.0으로 업그레이드 하면서 기존에 쓰던 설정 폴더를 그대로 덮어씌웠더니
버벅이는 감이 있어서 다시 설치하려 했었는데 이참에 북마크만 백업하고 싸~악 날린 다음
다시 깔고 필요한 플러그인들만 깔고 다시 시도 해보았다..
결과는 성공!!..... 이였다면 좋았겠지만.. 안타깝게도 다시 문제가 발생하고 말았다...

다시 파폭의 확장기능들을 다 끄니 정상으로 보이는 이지윅과 댓글 버튼...
그래서 파폭의 확장기능을 하나씩 켜가며 확인하는 노가다 끝에 원인 발견!
일단 이지윅문제는 MR Tech Link Wrapper Lite라는 플러그인이 문제였는데...
이 기능은 없어도 딱히 불편한 점은 없으므로 필요할 때마다 켜는 선에서 마무리..

댓글 버튼은 몇몇 확장기능을 활성화 할 때마다 확인 버튼이 조금씩 오른쪽으로 이동 하는 것!!
나중에 확장기능을 전부 켠다음에 댓글에 댓글 창을 탭으로 열어 전체화면으로 확인하니...
오른쪽 끝에 붙어계시는 확인버튼님...
저 문제 해결하자고 확장기능을 안 쓸 수도 없고... 해서 생각한게.. 제로보드에서 하던대로
확인 버튼에 accesskey를 주는 것!!
일단 accesskey를 s로 준 다음에 파폭으로 열어서 Art+Shift+S를 눌렀는데...
SD메모리 폴더가 열리는 상콤한 일이......
평소에 IEToy에 기타 프로그램이나 폴더들의 단축키를 Art+Shift 조합으로 쓰고 있었는데...
파폭의 accesskey 조합과 중복되어 버린 것이다...oTL..
파폭의 단축키 조합을 바꿀 수는 없는 노릇이니...
결국 IEToy에 지정되어 있는 단축키를 모조리 Ctrl+Shift조합으로 바꾼 뒤 댓글을 다시 확인하니
그제서야 정상적으로 작동 하였다...

역시 자동업그레이드가 아닌 이상.... 업그레이드는 노가다... 나만 그런가...???

현재 내 테터툴즈 블로그에 적용중인 스킨은 이로츠님의 S1T2스킨이다. 깔끔하면서도 적당히 화려한 느낌의 상당히 괜찮은 스킨이라고 생각한다.
이 스킨에 예전부터 귀차니즘에 생각만 하고있던 베너달기를 마침내 실천하게 되었는데 시작부터 다시 귀차니즘과 싸워야했다. 다른 부분은 대부분 이미지가 모듈형식의 조립식인데 반해 카운터링크 부분은 카운터부분과 링크부분이 통이미지의 완제품으로 구성되어있어 이미지 수정의 압박이 대기중이었다.
따로 베너메뉴를 추가해볼까도 생각해봤지만 베너도 몇개 없고 무엇보다 귀찮았기 때문에 카운터링크 부분을 수정하기로 했다.(서론이 너무 길다...)

적용된 샘플은 멀리 갈 필요도 없이 이 블로그 왼쪽 맨 밑 메뉴인 카운터링크부분이다. 원래 붙어있던 RSS 및 테터툴즈 베너와 이로츠님의 카피라잇(?)을 분리 시키고 그 사이에 공간을 만들었으며 이 공간은 베너의 높이에 따라 유동적으로 변할 수 있도록 해두었다.
이같이 하려면 이미지파일과 소스를 수정해야하는데 먼저 편집한 이미지 파일은 다음과 같다.


파일 이름은 미관상 이로츠님의 방식을 그대로 적용했다.
아래는 skin.html과 style.css파일의 수정부분이다.

skin.html파일 118번줄부터 {}는 []로 수정 <div id="counter">     <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">     <col width="100%" />     <tr><td class="title"></td></tr>     <tr><td class="area"><B>{##_count_today_##}</B><br />{##_count_yesterday_##}<br />{##_count_total_##}</td></tr>     <tr><td class="trbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="57" /><col width="1" /><col width="140" /><col width="1" />         <tr><td></td><td class="link_rss"><a href="https://eyeball87.tistory.com/rss" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='57' height='35' alt="RSS FEEDBACK"></a></td><td></td><td class="link_tattertools"><a href="http://www.tattertools.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='140' height='35' alt="TATTERTOOLS"></a></td><td></td></tr>        </table>     </td></tr>    <!-- //사용자 베너 주석 시작     <tr><td class="dvline"></td></tr>     <tr><td class="userbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <!-- 원하는 형식의 표를 만들어 베너 삽입(베너 폭 제한 198) -->         이 부분에 적당히 태그 짜서 베너 넣으면 됩니다.         베너크기는 198px를 넘지 않도록 주의하세요.         <!-- 베너 삽입 끝 -->         </table>     </td></tr>    //사용자 베너 주석 끝 -->     <tr><td class="bottom">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="198" /><col width="1" />         <tr><td colspan="3" class="mline"></td></tr>         <tr><td></td><td class="link_yrots"><a href="http://www.yrots.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='198' height='32' alt="YROTS-STORY"></a></td><td></td></tr>        <tr><td colspan="3" class="mline"></td></tr>         </table>     </td></tr>     </table> </div>

style.css파일 169번줄부터 #item_left #counter .title            { width: 100%; height: 30px; background: url('./images/yrots_left_cl_title.gif') no-repeat; } #item_left #counter .area             { width: 100%; height: 81px; background: url('./images/yrots_left_cl_ground.gif') repeat; vertical-align: top; text-align: left; font: 9px tahoma, verdana; padding-left: 67px; line-height: 27px; } #item_left #counter .link_rss         { width: 57px; height: 35; } #item_left #counter .link_tattertools { width: 140px; height:35; } #item_left #counter .link_yrots       { width: 198px; height: 32px; } #item_left #counter .mline            { height: 1px; } #item_left #counter .dvline           { height: 1px; background: url('./images/yrots_left_cl_dvline.gif') no-repeat; } #item_left #counter .userbanner       { width: 100%; background: url('./images/yrots_left_cl_bannerbg.gif') repeat; padding-top: 3px; padding-bottom: 3px; } #item_left #counter .trbanner         { width: 100%; height: 35px; background: url('./images/yrots_left_cl_trbanner.gif') no-repeat; } #item_left #counter .bottom           { width: 100%; height: 34px; background: url('./images/yrots_left_cl_bottom.gif') no-repeat; }

위의 소스를 해당 파일의 해당부분에다가 있던내용 지우고 붙여넣고 주석을 제거하면 된다. 이로츠님이 소스 정리를 아이템별로 띄워놓으셔서 금방 찾을 수 있을 것이다.
위 내용은 S1T2기준으로 작성되었지만 이로츠님의 다른 스킨에도 적용될 것이라 생각한다.
혹여 본인과 같은 스킨을 사용중인 분들중에 이미지 편집이 귀찮은 사람은 위의 이미지 4개를 저장해서 그대로 이미지 디렉토리에 덮어씌워도 된다.(1px짜리 2개는... 재량껏...)