블러그(티스토리) 스크롤바에 트위터와 올포스트 구독하기 버튼 달기

블로그

블러그(티스토리) 스크롤바에 트위터와 올포스트 구독하기 버튼 달기

 

개발환경 : window XP

 

요즘 소셜 네트웍의 개념이 적용된 블러그 디자인이 유행이다. 블러그에 들어가면 여기저기

구독하기 버튼과 메타데이타를 수집하는 사이트 링크가 달려 있다. 광고는 아니지만 구독수를

올릴수 있는 방법이라 많이 사용하는 방법이며 다른 웹어플과의 연계를 쉽게 하기 위한

것들이다. 사용자 또한 편리하다는 말이다.

 

나도 트위터와 올포스트 구독하기를 브라워저 스크롤바 옆에 달아보기로 했다.

이것은 자바스크립으로 구현되는 것이므로 원본을 가져와 조금만 조작하면 나름대로

자기가 원하는 형태로 바꿀수도 있을 것이다. 먼저 자바스크립을 제공하는 사이트로 간다.

http://www.go2web20.net/twitterfollowbadge/ 트위터 follow us 버튼이다.

Twitter accout : 자신의 아이디를 넣는다. 이것은 클릭했을 때 자신의 트위터글을 보기위함이다.

Label : 라벨에 들어갈 글을 선택한다

Color : 라벨의 색상인데 현재 기본 색상이 가장 무난한 것 같다

Side : 왼쪽 혹은 오른쪽에 달것인지 선택한다

From top : 브라우저 상단으로 부터의 높이이다. 이것도 일반적인 눈높이인 기본으로 한다.

 

값을 다 입력하였다면 update code 를 눌러 스크립트를 생성하자. 스크립트에 보면

http://www.go2web20.net/twitterfollowbadge/1.0/badge.js 가 있는데 이것이 스크롤을

따라다니도록 하는 역할을 한다.

생성된 소스 아래에 보면 몇가지 설명이 있는데 IE6 에서는 적용이 안되며 생성된 코드는

Body 태그안에 적당히 붙여 넣으면 된다고 한다.

그럼 설명한 것처럼 복사한 코드를 Body 안에 넣어보자. 이것은 티스토리 기준이다.

티스토리 관리자로 가서 스킨 > HTML/CSS 편집으로 간다. 복사한 내용을 구분하기 쉽게

아래쪽 body 안쪽에 넣는다.

이제 설정값을 저장하고 제대로 적용되었는지 확인해본다.

오른쪽에 달려 있는 귀여운 새그림을 볼수 있다. 나름 깔끔하고 보기좋아서 다행이다.

클릭해서 들어가면 내 글이 있는 트위터로 가는 것을 알수 있다.

그런데 이것저것 보다보니 올포스트와 트위터가 같이 붙어있는 버튼이 있는것이다.

위에서 적용한 것 보다 더 이쁘고 올포스트에 글을 보내는 입장에서 훨씬 좋아보였다.

이것도 어딘가에서 스크립트를 서비스 할텐데??’ 라고 생각하며 구글링에 들어갔다.

 

허무하게도 그것은 올포스트 에서 배포하는 구독하기 스크롤바 벳지 였다.

올포스트가 블러거들을 위한 차별화된 내용을 선보이기 위해 나름 노력하는 것 같다.

그 벳지는 위젯메뉴로 들어가면 배너 아래 쪽에 있다.

클릭하고 오른쪽에서 설정을 하면된다. 디자인은 라운드로 하고 위치는 기본값으로 한다.

그리고 트위터를 위한 배너도 있는데 ID 를 넣고 아래 그림과 같이 체크하면 된다.

설정이 끝났으면 담아가기를 클릭해 스크립트를 복사해 간다. 복사한 스크립트를

위에서 했던것처럼 Body 에 넣으면 된다. 그러면 위에서 저장한 스크립트와 중복이 되므로

처음 적용한 스크립트는 왼쪽으로 옮기고 올포스트 벳지는 오른쪽에 단다.

그러면 아래 그림과 같이 되는 것이다

Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of http://gem87.tistory.com 처음처럼 2010.09.15 11:08  댓글주소  수정/삭제  댓글쓰기

    잘보구갑니당.^-^

  2. 2010.10.05 03:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. Favicon of https://alienboy32.tistory.com 외계소년32 2011.01.09 22:03 신고  댓글주소  수정/삭제  댓글쓰기

    오 궁금 했었는데 감사합니다. ^^

  4. Favicon of https://jpop4u.tistory.com 페이퍼군 2011.03.16 13:43 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 무사히 달았습니다. ^^;

  5. Favicon of https://blogenjoy.com 블로그엔조이 2011.04.26 01:07 신고  댓글주소  수정/삭제  댓글쓰기

    아 찾고 있었는데 잘 보고 갑니다
    행복한 한주되세요^^

  6. Favicon of https://lartistecurieuse.com L'artiste curieuse 2011.11.03 01:07 신고  댓글주소  수정/삭제  댓글쓰기

    잘보고가요! 저는 첫번째방법으로 적용시켰는데요.
    올포스트를 사용하지 않아서 두번째 내용은 이해가 잘 안가네요. ^^