근데 이 생성되는 링크는 블로그 디자인과 상관없이, 디자인 고정 및 위치 고정으로 나오게 된다는 점이 좀 불편하죠.
태터툴즈를 계정에 설치해서 사용하는분일 경우 플러그인을 직접 수정하시면 문제가 해결됩니다만, 티스토리를 사용할 경우, 플러그인 소스에 접근할수가 없기때문에, 몇번의 삽질을 해야지, 원하는 모양대로 변경이 가능합니다.
참고로 제 블로그에서만 테스트 해보았기에 예상치못한 문제가 발생할 수 있습니다.
티스토리를 사용하지않고, 태터툴즈를 직접 설치해서 사용하시는 분이라면, 플러그인 소스를 직접 수정하시길 권장합니다.
먼저 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>
<!-- 추천 끝 -->
<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>
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 로 치환된 것입니다.
이를 참고해서 자신의 블로그 주소를 적어주시면 됩니다.
'이럴땐, 이렇게! > 프로그래밍' 카테고리의 다른 글
| 액션스크립트 3.0과 자바스크립트 연동하기 (0) | 2008/01/24 |
|---|---|
| IE와 FF에서 똑같이 보이게 하기 위한 몇가지 팁 (29) | 2008/01/23 |
| myEolin 추천/북마크 버튼 디자인 바꾸기 (15) | 2008/01/19 |
| 많이 쓰이는 CSS 핵 (11) | 2008/01/15 |
| MySQL 튜닝 18 가지 (2) | 2006/01/25 |
| 태터툴즈 백업기능을 100% 믿지마세요. (13) | 2006/01/11 |
RSS를 등록하여 쉽게 글을 구독할 수 있습니다.
0 Votes |
||
0 Bookmarks |
TRACKBACK :: http://blog.arzz.com/trackback/293
-
Subject: 블로그 하단에 메타블로그 추천 버튼을 달아보자!
Tracked from e-zoOMin's blog 삭제이올린 + 올블로그 + 블코 + 믹시 4종 세트 추천 버튼~! 블로그 스킨 하단에 삽입하여, 블로그를 방문해주신 분들이 포스트를 읽고 간편하게 추천해주실 수 있도록, 이올린, 올블로그, 블로그코리아, 믹시 네 군데 대표적인 메타 블로그의 추천 버튼을 모아 박스로 만들어봤습니다. 이렇게 생겼습니다. 짜잔~! 이올린은 자바스크립트를 활용하여 새 창이나 탭으로 넘어가지 않고 바로 그자리에서 추천이 가능하며, 다른 세 버튼은 각 메타블로그의 '내글목록' 페..
2008/05/04 23:06
댓글을 달아 주세요
아, 이올린에 발행하지 않은글에 대해서는 테스트 하지 못했네요 ;ㅁ;
2008/01/19 22:32비밀댓글 입니다
2008/01/21 10:19크게 문제될 것은 없다고 생각됩니다. :)
2008/01/21 17:16많이 홍보해주세요~! (부끄)
오호라~ 참 좋습니다. 이걸 제가 수정해서 사용할만한 능력이 될지는 모르겠습니다만, 사실 저도 이올린의 추천 플러그인이 단순히 '모양' 이 맘에 들지 않아서 사용하지 않는 편이거든요.
2008/01/22 12:38많이들 사용하시면 좋겠네요.
화이팅요~ :)
보기엔 복잡하지만 생각보다 단순한 HTML편집이랍니다. :)
2008/01/22 16:58html을 작성할 수 있으시다면 별다른 힘들이지 않고 적용이 가능할듯 ^^;
좋은 팁 잘 봤습니다. 저도 블로그 하단 추천버튼 자작하고 있는데 알쯔님의 이올린 이미지와 소스를 변형해서 사용해도 될런지요?
2008/05/03 17:05넵 상관없습니다. ^^;
2008/05/04 21:36알쯔님의 도움으로 제 블로그에 추천버튼 박스를 만들어봤습니다. 트랙백 걸겠습니다
2008/05/04 23:05늦었지만..트랙백감사합니다. :)
2008/05/27 22:33잘 배웠습니다.
2008/05/27 22:25좀 더 검토해서 제 블로그에도 적용해보겠습니다. 꾸벅 m(_._)m
ㅎㅎ 꼭 성공하시길 + _+
2008/05/27 22:33성공했습니다!!! 다시 한 번 감사드립니다!
2008/05/28 10:41헛 답변이 늦었지만, 성공하셨다니 축하드립니다. :)
2008/09/05 01:40안녕하세요
2008/08/27 21:32포스트 하단에 이올린 추천 버튼과 믹시 업 버튼이 나란히 정렬되어 있어서
정말 깔끔하고 좋아보이는데
저거 어떻게 하는거예요,.. 비법(?) 좀 알려주세요~~
이 포스트이 팁내용과 믹시추천툴을 테이블 태그를 이용하여 넣은것입니다. :)
2008/09/05 01:40html을 할줄아신다면 누구나 저렇게 배치할 수 있답니다. :)