RUKXER.net

제 포스팅 밑에 못 보시던 버튼이 하나 더 달렸죠? :-)



이 버튼은 Dapy 님이 운영 중이신 paperinz를 통해 알게 된 리트윗 버튼입니다.

리트윗 버튼이란 backtype.com이나 tweetmeme.com 등에서 지원해주는 기능으로, 원하는 포스팅을 자신의 트위터 계정을 통해서 내보내는 역할을 해주는 버튼입니다...... 라고 말로만 쓰면 이해가 잘 안 되실 지도 모르겠네요. 저도 말하면서 뭔 말을 하는지 모르겠습니다 ㅡ.ㅡ ㄷㄷㄷ

그래서 차근차근 스샷으로 고고싱~!


위 스샷은 Dapy 님의 포스팅 중 하나를 캡쳐한 스샷입니다. 리트윗 버튼이 보이지요? 이 버튼을 눌러봅니다.

그러면 트위터 로그인으로 넘어가고, 아래와 같이 본문 영역에 자동으로 내용이 채워집니다.


내용은 리트윗 버튼을 눌렀던 포스팅의 제목과 링크 등이 포함되어 있습니다 :-)
여기서 [update]를 눌르면?



이렇게 해서 블로그 포스팅에 대한 트윗이 하나 발행됩니다 :-)

오래 전에 쓰여진 유용한 컨텐츠의 포스팅을 리트윗 버튼으로 다시 생명연장 시키는 기분이랄까요? 사람들에게 좋은 글이 있다는 걸 포스팅이 작성된 시간과 관계없이 언제든 알릴 수 있다는 게 큰 장점이라 생각됩니다.

블로그를 운영하는 입장에서 꽤 괜찮은 광고판 역할을 하게 될 것 같아서 저도 달아보게 되었습니다 ^^ 뭐, 가입할 필요도 없어서 간편하기도 했고요. ㅋㅋㅋ

실제 설치에 사용한 코드는 서울비 님의 포스팅을 참고하였습니다. 티스토리와 같이 절대주소가 필요한 경우의 단점과 해결책을 깔끔하게 정리해주셨더라구요 :-) 코드도 올려주셔서 적용하기 간편했습니다.
이 자릴 빌어 감사드립니다 ^^


그런데 한 가지 문제가 있었습니다.

저처럼 포스팅 하단에 배치하길 원하는 경우, 기존의 다음뷰나 믹시 플러그인들과 디자인 상 영~ 동떨어져 버리게 되는 것이었습니다. 꼴랑 버튼만 있는 디자인이라서 말이죠.

그래서 저는 박스 형태로 한 번 만들어 봤습니다 :-) 스킨의 html과 css를 편집해서 로딩이 무겁지 않도록 했습니다.
아래 코드를 참조하세요~ -ㅂ-

1. HTML

※ 한글로 '샵샵'이라고 쓴 부분은 ##으로 바꿔서 사용하세요 :-)


2. CSS



HTML 코드를 써넣는 위치를 먼저 그림으로 대강 파악을 하면 다음과 같습니다.


HTML 코드는 위 영역에 넣고, CSS 코드는 그냥 style.css 파일 맨 뒤에 넣으면 됩니다.

기본스킨 기준으로 봤을 때 본문 영역은 <div class="article"> 로 검색하시면 쉽게 찾으실 수 있습니다. 그리고 댓글, 트랙백 영역은 <div class="tagTrail">로 시작할 거고요.
두 div 영역 사이에 넣으면 됩니다 -ㅂ-

워낙 간단한 코드라 웬만한 브라우저에서는 다 잘 보일 겁니다. 파이어폭스3.5, IE8, IE7, 오페라10, 구글 크롬4 에서 일단 테스트 해봤습니다 :-)



아, 물론 간단하게 쓰실 분들은 굳이 저처럼 박스 형태로 만들지 않아도 되고요 -ㅂ-ㅎㅎ 그냥 적당히 배치하셔도 됩니다 :-)