본문 바로가기

상식을보다

twitter Follow me 배지를 내 블로그나 홈페이지에 넣는방법

블로그를 검색하다가 정말 귀여운 녀석을 발견해서 한번 사용해 보았습니다.

요즘 블로그를 돌아다니다 보면 <h4></h4> 처럼 내부 틀에 집어 넣는 버튼을 많이 삽입합니다.
그런데 이런 버튼 들은 어차피 내 블로그에 모두 내장된 버튼 들입니다.

버튼 형식과 유사하지만 twitter를 주로 사용하시는 분들은 그저 버튼만이 필요할 뿐입니다.
블로그 구독에서 트위터 팔로우로 점점 바뀌고 있는 것이지요.(개인적인 생각입니다.)

버튼들은 보시는 것처럼 많은 종류들이 있습니다.


<이녀석은 너무 크지요 ㅡ.ㅡ>



다양한 버튼들이 있지만 만들어진 것을 얻기는 쉽지 않습니다.




저에게 필요한건 딱 한가지 twitter버튼 뿐입니다.(저와 같다면...)




이녀석은 어떠신가요? 


 내 블로그의 화면 옆에서 조용히 나를 따라오기를 기다리는 작은 새한마리 ...


실물은 제 블로그 우측 스크롤이 있는 곳에서 보셨을 겁니다.(현재 화면의 우측 테두리를 봐주셔요^^)



그럼 이제 다음과 같은 간단한 절차를 이용해서 블로그로 저 파랑새를 옮겨 가시기 바랍니다.



1. 일단 팔로미 배지(Follow me badge)를 내 것으로 만들기 위해서는 일단 배지를 보시면서 우측 스크롤을 마우스로 누르시고 화면의 상단으로 쭉 올리셔야 합니다.














어떠세요? 쭉 올리시니까 (?)☜ 표시가 보이시죠?

마우스로 배지안에 있는 (?) 표시를 눌러주십니다.






2. 그럼 다음과 같은 화면이 보이실 겁니다.



바로 배지 소스를 나눠 주는 사이트입니다.
정식 주소는 http://go2web20.net/ 입니다.
가입+로그인 뭐 이딴거는 필요 없더군요...


자 이제 부터 간단한 설정을 하시면 됩니다.


가. Twitter account : 박스에 본인의 트위터 계정을 쓰시면 됩니다. 이때 @는 쓰지 않으셔도 됩니다.


나. Label: 박스에 있는 스크롤버튼(▼)을 누르시면 다음과 같이 보입니다.
     Follow us  << 홈페이지나 카페에 쓰시면 좋겠지요^^
     Follow me << 설명이 필요없는 문구!!
     Follow       << 명령체가 싫으시면 이정도로~
     My twitter  << 색다른 문구가 필요하시다면 이정도...

    선택의 범위는 딱 4가지 뿐이니 원하는 문구를 선택하시면 되겠습니다.



3. 다음은 내 배지의 색깔을 선택하는 부분입니다.








☜ 여기 있는 동그라미를 누르시면 오른쪽의 16진수 파렛트가 나타납니다.
원하시는 배지의 색깔을 선택하시고
좌/우측을 선택합니다.


From top: 의 박스는 136이 기본설정입니다.

제가 해본 바로는 1300*900 정도의 해상도에서 알맞은 배지의 위치는 약 170Pixels 정도가 적당한것 같습니다. 기호사양 이므로 나중에 
숫자만 바꿔 주시면 원하시는 위치에 고정됩니다.



모두 설정하셨다면

☜ 클릭해주기 바랍니다.



4. 그러면 블로그 조금 꾸며 보신분들은 자주 보셨던 것처럼 간단한 코드가 생성됩니다.

코드 부분에 마우스를 원 클릭하시면 아래보이는 그림처럼 전체선택된 상태로 바뀝니다.

아래쪽에 쓰여진 데로 마우스 우측 버튼으로 Copy 하시거나 컨트롤+C 하셔서 클립보드에 넣습니다.



"<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'hawkpic';
tfb.label = 'follow-me';
tfb.color = '#00f';
tfb.side = 'r';
tfb.top = 170;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->"



5. 다음은 자신의 블로그의 HTML/CSS 편집 창을 여시고 쓰여진 데로 붙여주시기만 하면 됩니다.

하지만 이렇게 설명드리면 '이게 뭐야?' 하실까봐서 그림을 올렸습니다.




저는 TISTORY를 사용하오니 제 설정창을 기준으로 설명드리겠습니다.
(다른 블로그에서 하시기 힘드시면 저처럼 TISTORT계정을 만드시길..)

바로 위의 관리자 모드에서 스킨>HTML/CSS편집을 활성화 합니다.


다음은 아래에 쓰여진데로 </body>부분을 찾습니다.




















우측의 스크롤을 제일 아래로
내리시면
☜ 바로 이부분
</body>가 있습니다.



Paste it on your site template right before the "BODY" end tag (</body>)
'당신의 사이트의 "몸체"의 마지막 태그인 </body>의 우측 앞에 붙여 넣으십시요.'

잠시 사설로 가면 태그란 것은 형식에 불과 합니다. 
우측 앞이라는 의미는 '몸체'를 기준으로 하는 것이 아니고 </html> 즉 문서의 우측 앞이라는 의미입니다.
따라서 우리는 우리식으로 </body>의 뒷부분에 붙여 넣어야 합니다.


다음 그림과 같이 하시면 되겠지요.



자 이제 완료 되었습니다!!

바로 저장하시기 전에 혹시나 하는 마음이 드시는 분은 미리보기를 눌러주시는 센스~~



그럼 내 멋진 홈페이지에 거추장 스럽지 않으며, 멀찌감치 떨어져서 손짓하는 새한마리를 보시게 될 겁니다.
바로 이런 모습이죠.



어떠세요 잘 되셧나요?

그럼 꾹하고 도장찍으시고 댓글 달아 주시는 센스를~~~

감사합니다.

다음은 태그구름하고 제목글 물결 넣기에 도전해 보겠습니다.




'상식을보다' 카테고리의 다른 글

천수경  (0) 2010.12.15
테이핑교육  (0) 2010.12.12
테이핑요법맛보기  (0) 2010.12.08
사상체질과 팔체질  (0) 2010.12.07
사상체질-자기활용법  (0) 2010.12.07