오랜만에 addthis분석을 보려고 addthis.com에 접속했더니 사이트 레이아웃도 달라지고 제공하는 플러그인도 업데이트 되었더군요. 기존의 것도 유용하긴 하지만 커스텀이 어려웠고 페이지 로딩시간에 영향을 꽤 많이 주었습니다. 새로 업데이트 된 버전은 제가 느끼기에 다음과같은 변화가 생겼습니다.더 가벼워졌다.플러그인의 기능들이 각각 모듈화되었다.모듈이 다양해졌다.스크립트를 하나만 넣어도 된다.HTML수정이 필요없어서 적용하기 쉽다.HTML수정 없이 대시보드에서 커스텀을 할 수 있다.주소 뒤에 #+특수문자들이 사라졌다https://www.addthis.com/적용 방법 로그인 후 DASHBOARD에서 Tool Gallery를 선택한 화면입니다. 각 모듈이 어떻게 동작하는지 시각적으로 쉽게 보여주고있습니..
이번에는 티스토리에 페이스북의 좋아요버튼, 구글 플러스의 +1버튼을 달아보겠습니다. 티스토리에서 플러그인을 통해 기본으로 페이스북 좋아요 버튼을 제공하고 있지만, 구글 +1을 같이 배치하기는 어려움이 있었습니다. 그래서 지금 보고계신 것 처럼 두 버튼을 나란히 놓기 위해 수동으로 추가하는 방법을 알아볼 것입니다. 페이스북 좋아요버튼 코드 얻기 https://developers.facebook.com/docs/plugins/like-button/으로 접속하셔서 로그인하면 간단히 코드를 생성할 수 있습니다.본인의 입맛에 맞게 옵션을 선택하시고, Get code를 눌러 코드를 생성합니다.(HTML5형식의 코드를 사용할 것 입니다.) 생성된 코드는 2부분으로 나눠지는데, 그냥 두 코드를 다음처럼 순서대로 복사해..
반응형 스킨을 사용하다 보면 기존 컨텐츠 중에 가로크기(width)가 고정된 요소가 잘리는 경우가 있습니다. 가장 흔한 예가 본문내 삽입한 표(table)입니다. 모바일웹을 사용중이라면 데스크톱보기 버튼으로 해결되었겠지만,반응형 스킨은 가로 스크롤이 되지 않아도 되도록 고안되었기 때문에, 이렇게 가로로 긴 요소는 볼 수가 없습니다. 그래서 모바일환경 등 가로로 긴 요소를 볼 수 없는 환경에서페이지의 가로 크기를 늘려 스크롤 하며 볼 수 있는 버튼을 만들어봅시다. 이런 화면이 이렇게 바뀝니다.(다시 누르면 완벽하진 않지만 원래대로 돌아옵니다.) '가로 넓게 보기' 버튼 만들기 1. skin.html에서 위쪽에 다음 스크립트를 붙여넣습니다. 2. skin.html에서 사이드바 항목이 있는곳을 찾습니다. 모듈..