myEolin 추천/북마크 버튼 디자인 바꾸기

Author : 알쯔 / Date : 2008.01.19 22:18 / Category : 팁로그

사용자 삽입 이미지
태터툴즈의 myEolin 플러그인을 사용하면, 글 하단에 이올린에 추천/북마크 하기 링크가 생성됩니다.
근데 이 생성되는 링크는 블로그 디자인과 상관없이, 디자인 고정 및 위치 고정으로 나오게 된다는 점이 좀 불편하죠.

태터툴즈를 계정에 설치해서 사용하는분일 경우 플러그인을 직접 수정하시면 문제가 해결됩니다만, 티스토리를 사용할 경우, 플러그인 소스에 접근할수가 없기때문에, 몇번의 삽질을 해야지, 원하는 모양대로 변경이 가능합니다.

참고로 제 블로그에서만 테스트 해보았기에 예상치못한 문제가 발생할 수 있습니다.
티스토리를 사용하지않고, 태터툴즈를 직접 설치해서 사용하시는 분이라면, 플러그인 소스를 직접 수정하시길 권장합니다.

먼저 myEolin 플러그인이 없다면, 이곳을 클릭하여 myEolin 플러그인을 설치해주십시오.
(티스토리의 경우, 플러그인 목록에 이미 추가되어 있습니다.)
설치후 플러그인 설정에서 myEolin 플러그인을 활성화 시켜주고, 설정을 눌러 아래그림과 같이 이올린에 북마크하기, 추천하기 에 사용하지 않음으로 설정하여 주세요.

사용자 삽입 이미지

그런다음 소스를 열어 [ ##_article_rep_desc_## ] 부분을 찾습니다. (띄워쓴부분은 붙여주세요.)
저 부분이 태터툴즈 스킨에서 글을 출력하는 치환자이며, 저 위치의 아래쯤 원하는 영역을 잡고 아래와 같은 소스를 넣어줍니다.

<!-- 추천 시작 -->
<table cellpadding="0" cellspacing="0" style="width:100%; table-layout:fixed;">
<col width="100%" /><col width="140" /><col width="2" /><col width="112" />
<tr>
    <td></td>
    <td style="background:url('./images/btn_eolin_vote.gif'); cursor:pointer;" onclick="bookMarkEolin([ ##_article_rep_id_## ],'http://blog.arzz.com[ ##_article_rep_link_## ]', 'vote');"><div style="padding:24px 9px 0px 0px; font-family:verdana; font-size:10px; text-align:right;"><span id="voteEolin[ ##_article_rep_id_## ]" class="EolinVoteCount" style="font-weight:bold;">0</span> Votes</div></td>
    <td></td>
    <td style="background:url('./images/btn_eolin_bookmark.gif'); cursor:pointer;" onclick="bookMarkEolin([ ##_article_rep_id_## ],'http://blog.arzz.com[ ##_article_rep_link_## ]', 'bookmark');"><div style="padding:24px 9px 0px 0px; font-family:verdana; font-size:10px; text-align:right;"><span id="bookmarkEolin[ ##_article_rep_id_## ]" class="EolinVoteCount" style="font-weight:bold;">0</span> Bookmarks</div></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
apiEolinURL.push("
http://api.eolin.com/myEolin/getEntryInfo.js?permalink=http%3A%2F%2Fblog.arzz.com%2F[ ##_article_rep_id_## ]&id=[ ##_article_rep_id_## ]&log=0"); 
</script>
<!-- 추천 끝 -->

위의 부분에서 붉은색부분을 자신의 블로그 주소로 수정해줍니다. 그냥 치환자를 삽입하려고 했으나, 본문영역에선 자기 블로그 주소 치환자가 먹히지 않더군요.
또한 [와 #, #와 ] 사이의 공백도 지워주셔야 합니다.

저기 위에 있는 디자인은 현재 제 블로그에 적용된 디자인이며, 간단한 html 이기때문에 원하는데로 수정하셔서 사용하시면 됩니다.

부분부분 소스를 살펴보면, 우선 북마크된 갯수를 가져오는 부분입니다.

<span id="bookmarkEolin[ ##_article_rep_id_## ]" class="EolinVoteCount" style="font-weight:bold;">0</span>

id="BookmarkEolin[ ##_article_rep_id_## ]" 부분은 필수로 들어가 있어야 합니다.
나머지 부분은 원하는데로 변경하시면 됩니다.


아래소스는 추천수 갯수를 가져오는 부분입니다.

<span id="bookmarkEolin[ ##_article_rep_id_## ]" class="EolinVoteCount" style="font-weight:bold;">0</span>

역시 id="" 부분은 필수로 들어가 있어야 합니다.


각 버튼의 onclick 이벤트 부분을 가져온 부분입니다.

bookMarkEolin([ ##_article_rep_id_## ],'http://blog.arzz.com[ ##_article_rep_link_## ]', 'bookmark');

bookMarkEolin 이라는 함수는 myEoline 을 활성화 하면 기본으로 생기는 함수입니다.
굵고, 밑줄친 부분이 bookmark 면 북마크를 하기 위한 페이지를 호출하고 vote 이면 추천을 하기 위한 페이지를 호출합니다.

예를 들어 추천버튼을 이미지로 하고 싶다면, <img src="이미지 주소" style="cursor:pointer;" onclick="bookMarkEolin([ ##_article_rep_id_## ],'http://blog.arzz.com[ ##_article_rep_link_## ]', 'bookmark');"> 이렇게 적으시면 됩니다. (물론 치환자의 띄워쓴 부분은 붙여주시구요.)


아래 스크립트가 추천수, 북마크수를 가져오는 부분입니다.
수정하기가 약간 번거롭죠.

<script language="JavaScript" type="text/javascript">
apiEolinURL.push("http://api.eolin.com/myEolin/getEntryInfo.js?permalink=http%3A%2F%2Fblog.arzz.com%2F[ ##_article_rep_id_## ]&id=[ ##_article_rep_id_## ]&log=0"); 
</script>

자세히 보시면 http%3A%2F%2Fblog.arzz.com%2F 이렇게 적힌 희한한 문장이 있습니다.
바로 http://blog.arzz.com/ 부분이 변수로 넘어가기 위해 urlencode 된 모습입니다.
주소에서 콜론(:) 은 %3A 로 치환된것이며 슬래시(/)는 %2F 로 치환된 것입니다.
이를 참고해서 자신의 블로그 주소를 적어주시면 됩니다.

Tags : , , , ,

Trackbacks 1 / Comments 15

  • Favicon of https://blog.arzz.com 알쯔 2008.01.19 22:32 신고

    아, 이올린에 발행하지 않은글에 대해서는 테스트 하지 못했네요 ;ㅁ;

    REPLY / EDIT

  • 2008.01.21 10:19

    비밀댓글입니다

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.01.21 17:16 신고

      크게 문제될 것은 없다고 생각됩니다. :)
      많이 홍보해주세요~! (부끄)

      EDIT

  • Favicon of http://commonplace.kr COMMONPLACE™ 2008.01.22 12:38

    오호라~ 참 좋습니다. 이걸 제가 수정해서 사용할만한 능력이 될지는 모르겠습니다만, 사실 저도 이올린의 추천 플러그인이 단순히 '모양' 이 맘에 들지 않아서 사용하지 않는 편이거든요.
    많이들 사용하시면 좋겠네요.
    화이팅요~ :)

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.01.22 16:58 신고

      보기엔 복잡하지만 생각보다 단순한 HTML편집이랍니다. :)
      html을 작성할 수 있으시다면 별다른 힘들이지 않고 적용이 가능할듯 ^^;

      EDIT

  • Favicon of http://e-zoomin.tistory.com e-zoomin 2008.05.03 17:05

    좋은 팁 잘 봤습니다. 저도 블로그 하단 추천버튼 자작하고 있는데 알쯔님의 이올린 이미지와 소스를 변형해서 사용해도 될런지요?

    REPLY / EDIT

  • Favicon of http://e-zoomin.tistory.com e-zoomin 2008.05.04 23:05

    알쯔님의 도움으로 제 블로그에 추천버튼 박스를 만들어봤습니다. 트랙백 걸겠습니다

    REPLY / EDIT

  • Favicon of http://bluenlive.net bluenlive 2008.05.27 22:25

    잘 배웠습니다.
    좀 더 검토해서 제 블로그에도 적용해보겠습니다. 꾸벅 m(_._)m

    REPLY / EDIT

  • Favicon of https://bluenlive.tistory.com BLUE'nLIVE 2008.05.28 10:41 신고

    성공했습니다!!! 다시 한 번 감사드립니다!

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.09.05 01:40 신고

      헛 답변이 늦었지만, 성공하셨다니 축하드립니다. :)

      EDIT

  • Favicon of https://ppozzak.com PPoZZak 2008.08.27 21:32 신고

    안녕하세요
    포스트 하단에 이올린 추천 버튼과 믹시 업 버튼이 나란히 정렬되어 있어서
    정말 깔끔하고 좋아보이는데
    저거 어떻게 하는거예요,.. 비법(?) 좀 알려주세요~~

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.09.05 01:40 신고

      이 포스트이 팁내용과 믹시추천툴을 테이블 태그를 이용하여 넣은것입니다. :)
      html을 할줄아신다면 누구나 저렇게 배치할 수 있답니다. :)

      EDIT

Follow Me

Search

Statistics

  • Total : 2,318,676
  • Today : 27
  • Yesterday : 48

Blog Information

알쯔

Calendar

«   2019/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Copyright © 알쯔의 외부기억장치 All Rights Reserved
Powered by ARZZ.COM