하며, 다른 세 버튼은 각 메타블로그의 '내글목록' 페이지 등으로 넘어가서 추천 버튼을 누를 수 있도록 되어있습니다. 이올린 추천 버튼은
포스트의 내용을 참고했습니다. 전체 박스의 크기는
입니다.
1. 소스 먼저 보여줘봐~
<!-- 추천 버튼 시작 -->
<fieldset style="border:1px solid #a1b0db;text-align:center;width:610px;height:100px;padding:0;margin:0 auto;position:relative;">
<legend style="margin:0 0 0 10px;padding:0 3px;border:1px;color:#3A5FCD"><strong>
이 포스트를 더 많은 분들과 함께 보시려면 추천 버튼을 눌러주세요~!</strong></legend>
<td>
<a target='_blank' title='믹시 바로가기' href='http://www.mixsh.com/widget/mr/?url=Wjo6D4gseDn%2BdU%2FA8RtIyMd%2BBntUqb7tZQ2n5w84fzA%3D'><img src='http://www.mixsh.com/widget/mr/but.html?p=Wjo6D4gseDn%2BdU%2FA8RtIyMd%2BBntUqb7tZQ2n5w84fzA%3D&t=9' alt='믹시에 mixup하기' border='0' /></a>
</td>
</tr>
</table>
</fieldset>
<!-- 추천 버튼 끝 -->
소스 복사가 안되시는 분은 이 텍스트 파일을 다운 받으세요.
2. 잘 모르겠는데 좀 설명 좀 해봐욧~!
html 코드가 생소하신 분들을 위하여 간략히 설명을 드리겠습니다. (소스코드에 공백이 많이 보이는 것은 왼쪽정렬이 아닌 양쪽정렬로 되어서 그렇게 보이는 것 뿐입니다.) 위에 소스 코드를 총 7개의 부분으로 나누어 박스로 묶어두었습니다. 순서대로 1번 박스에서 6번 박스로 호칭하겠습니다. 1번 박스는 추천 버튼 박스의 파란색 테두리를 치고 "이 포스트를 더 많은 분들과 함께 보시려면 추천 버튼을 눌러주세요~!"라는 문구를 보여주는 부분입니다. 2 ~ 5번박스는 순서대로 이올린, 올블로그, 블로그코리아, 믹시 추천 버튼 관련 코드입니다. 마지막 6번 박스는 코드에서 버튼 정렬을 위해 사용한 테이블과 외곽 파란 테두리를 닫는 부분입니다.
3. 수정할 부분은 없나요? (반드시 수정해야 할 부분)
위에 있는 소스에 사용된 링크 주소는 전부 저의 추천 페이지 주소이기 때문에 이를 여러분의 주소로 바꿔주셔야합니다.
2번 박스(이올린) e-zoomin.tistory.com이 두 번 나오는데 이를 여러분의 블로그 주소로 바꿔주세요.
3번 박스(올블로그) <a href="
http://search.allblog.net/?keyword=e-zoOMin%27s+blog&type=100&rssurlidx=207023" target="_blank"> 이 부분에서 빨간색 주소 부분을 여러분의 올블로그 페이지 주소로 바꿔주세요. 찾으시는 방법은 올블로그 검색창에 여러분께서 올블로그에 등록하신 블로그 이름으로 검색하신 후 그 검색 결과 페이지를 링크 하시면 됩니다. 아래 스크린 샷을 참고하세요.
[ 올블로그 링크는 위와 같은 어려분 블로그 소개 화면의 주소를 링크하시면 됩니다. ]
4번 박스(블코)에서도 역시 <a href=" 이 다음에 이어지는 링크 주소를 블코의 "내글목록" 페이지의 주소로 바꿔주시면 됩니다.
5번 박스(믹시)는 여러분의 믹시에서 블로그관리-추척버튼 받기에 들어가셔서 추척버튼(위에서 두번째 크기)의 소스로 대체하시면 간편합니다. 단 이때 맨 위의 <td>와 맨 만 아래의 </td> 까지 같이 지우시면 안되요~
4. 내 맘대로 바꿀 순 없나요?
1번 박스에서 "이 포스트를 더 많은 분들과 함께 보시려면 추천 버튼을 눌러주세요~!" 이 부분을 수정하시면 박스 상단의 멘트를 바꾸실 수 있고, 같은 박스에 color:#3A5FCD 에서 색상수치를 수정하시면 이 멘트의 색상을 바꾸실 수 있습니다. 필요에 따라 배너이미지를 바꾸시고 전체 박스 크기를 조정하시거나, 다른 사이트의 추천 버튼을 추가하거나 뺄 수도 있습니다. 다른 부분도 얼마든지 수정해서 사용하시면 됩니다.
5. 어디에 설치하면 되나요? (티스토리 사용자 기준)
먼저 위의 소스코드를 복사하신 후 메모장이나 다른 편집 툴을 활용하셔서 링크 주소를 위의 설명대로 수정합니다. 티스토리 관리자 메뉴에서
스킨 - HTML/CSS 편집 항목으로 들어갑니다. 여러분의
skin.html에서 본문 부분
[ ##_article_rep_desc_## ] 을 찾으셔서 그 바로 아래 수정한 코드를 추가합니다. 그러면 본문 바로 아래에 추천버튼이 들어가게 됩니다.
미리 보기를 하신 후 버튼이 정상적으로 보이면 저장하기를 눌러 스킨을 저장합니다. 이때 이올린 버튼은 아직 보이지 않을 겁니다. 버튼 이미지 4개 가운데 이올린 버튼은 이올린에서 제공하는 배너가 아니고
알쯔님이 제작하신 이미지를 사용하는 관계로, 아래 이미지를 다운 받으셔서
티스토리 관리자 메뉴 - 스킨 - 직접올리기 에서 파일 업로드를 해주셔야 합니다. 이때 이 그림 파일의 이름이 바뀌지 않도록 해주세요. 만약 파일 이름이 깨져있거나 다음 이름과 다르면
btn_eolin_vote.gif으로 수정해서 업로드 해주세요.
그리고 참고로 이올린 추천 버튼의 스크립트는 이올린 플러그인을 사용하기 때문에 티스토리의
이올린 플러그 인을 사용함으로 설정해주셔야 합니다. 텍스트큐브 등 태터툴즈 기반의 다른 블로그 서비스에서도 이올린 플러그인을 설치하신 분은 사용하실 수 있을 겁니다. 이올린 플러그인을 사용하실 수 없는 블로그에서는 과감히 이올린 부분을 삭제하시고 전체 박스 크기만 조절하셔서 쓰셔도 되겠죠.
이제 여러분의 블로그에도 추천 버튼이 달렸습니다. 링크가 제대로 달려 있는지 한번씩 꼭 확인해 보세요.
::: 사람과 사람의 교감! 人터넷의 첫 시작! 댓글을 달아주세요! :::
우아.. 감사합니다..^^;
웹초보님 블로그에서도 항상 좋은 팁 잘 보고 있습니다. 찾아와주셔서 반갑습니다~ ^^
아.. 쓰고 싶은데^^;; 소스 복사가 안되네요.. 좀 풀어주세요 ㅡㅡ;
이런; 소스 복사가 안됐군요;; 텍스트 파일로 옮겨서 본문에 링크시켜두었습니다. ^^
버튼크기만 동일하게 조절해서 붙여놓으면 더 깔끔한 레이아웃이 되겠네요.
감사합니다. :)
저도 가능하면 버튼 크기 맞춰보려고 했는데
각 메타블로그에서 제공하는 배너가 크기도 제각각이고 해서 결국 이렇게 됐습니다. ㅠ.ㅠ
억지로 크기를 줄이니까 이미지가 깨져서 또 보기 안좋더라구요.
역시 대안은 자작 이미지인데, 제가 이쁘게 만들 센스가 없어서;;;
좋은 추천버튼 이미지 있으시면 추천해주시면 감사해요~
혹시 다음블로거뉴스 소스 있으면 알려 주시겠습니까?
블로거뉴스 추천 버튼의 소스는 블로거뉴스에서 기사를 클릭했을 때 뜨는 네모난 박스에서 "추천해주세요 퍼가기"를 클릭하시면 보실 수 있습니다. 사용방법은 http://blog.daum.net/bloggernews/10765929 를 참고해주세요~ 이 방법의 번거로운 점은 그때끄때 포스트 하단에 각각 포스트에 맞는 주소로 새로 붙여넣기 해야지만 적용된다는 점입니다. 그 이유는 블로거뉴스에 글이 송고될 때 http://bloggernews.media.daum.net/news/1118574 같은 방식으로 블로거뉴스용 새 주소가 설정이 되는데 이 주소의 뒷자리 숫자가 그때그때 달라지기 때문입니다. 이 문제를 자동으로 해결하는 추천버튼을 만드려면 블로거뉴스에 송고될때 지정되는 저 번호를 자동으로 체크해서 링크주소를 변경하는 스크립트를 작성해야 할텐데 제 능력밖이군요 ㅠ.ㅠ 만약 가능하다고 하더라도 자바스크립트를 삽입할 수 없는 포털 블로그에서는 사용이 안될 수도 있습니다. 일단 한번 방법을 알아보긴하겠습니다. 이 방법이 여의치 않으면 올블로그버튼처럼 내글목록 페이지로 링크시키는 방법으로 한번 만들어봐야겠습니다.
감사합니다.
감사히 잘 사용하겠습니다~~~
^^ 그냥 무턱대고 만들어본 것을 사용해주신다니 제가 더욱 기쁩니다~
우와..이거 좋네요ㅣ..
감사합니다
Jack Park님 안녕하세요~ 쓸모있어보인다고 해주시니 제가 더 감사합니다 ^^
안녕하세요~저기여쭤볼게있는데..오른쪽에 방문자온라인 카운터 어떻게만드신건가요?
who.amung 사이트가도 저런모양은없던데..ㅜㅜ
답변부탁드려요
http://whos.amung.us/showcase 이곳에 가셔서 맨 오른쪽 클릭하시고 소스 복사하시면 됩니다 ^^
좋은 정보네요~ ㅎㅎㅎ
강철지크님 반갑습니다 ^^
ㅇ ㅏ감사합니당..^^
ColorFilter님 도움이 되셨으면 좋겠네요 ^^
감사합니다. ^^
초보 블로거인 저한텐 정말 큰 팁이였습니다.
따라서 한번 꾸며봣는데 제껀 좀 이상하던데요
좀더 노려 해볼께요 ^^
아마 이올린 버튼이 잘 작동하지 않으셨나봐요. 티스토리 플러그인 중에 이올린플러그인 사용함으로 설정하셨는지, 이올린 버튼에 달린 링크 주소가운데, 블로그주소 두 부분을 정확히 바꿔서 링크 거셨는지 확인해보세요~
다 좋은데 버튼 크기가 맞추면 이쁠것 같은데요.. 만들어볼까...// 요즘에 귀차니즘에 작렬해서...ㅠㅠ;
안그래도 몇 분이 그런 말씀을 해주셔서 http://e-zoomin.tistory.com/74 에 사이즈 맞추고 다음블로거 뉴스 추천버튼도 추가해서 새로 만들어봤습니다 ^^
초보자인 저에게는 많은 도움이 되었습니다
잘 사용하고 있습니다.
도움이 되셨다니 저도 기분이 좋습니다. 많은 분들께 도움을 받고 또 도움을 드릴 수 있는 곳이 블로고스피어인것 같아요 ^^