반응형
요즘 블로그를 돌아 다니다 보면 트위터나 페이스북과 같은 소셜 네트워크 공유 버튼을 흔히 볼수 있습니다. 저 역시 본문 하단에 다음뷰 및 SNS 공유 버튼이 존재 합니다.
그런데 상단에도 이와 유사한 배치를 시키고 싶었는데 하단 부분에 있는 큼지막한 버튼은 왠지 인터페이스상 이쁘지 않을거 같아 작은 버튼으로 배치를 시켜 보았습니다.
그런데 상단에도 이와 유사한 배치를 시키고 싶었는데 하단 부분에 있는 큼지막한 버튼은 왠지 인터페이스상 이쁘지 않을거 같아 작은 버튼으로 배치를 시켜 보았습니다.
일단 바로 코드 부터 보도록 하겠습니다.
위 소스에서 빨간 글씨로 되어 있는 부분만 수정을 해주시면 되는데 블로그 주소는 자신의 블로그 주소를 적으면 되고 샵샵은 ##으로 바꿔 주시면 됩니다.
그리고 아래쪽 script 빨간 글씨는 이곳을 클릭하여 코드를 얻어야 합니다.
AddThis 메인 사이트에서 위 이미지와 같이 선택을 하신 다음 Get Your Button 을 클릭 하셔서 코드를 생성 하시기 바랍니다.
코드 부분에서 스크롤바를 제일 아래로 내리신 다음 마지막줄 바로 윗줄의 script 코드를 복사 하셔서 제가 소개한 코드 마지막 빨간 script 대신에 넣어주시면 됩니다.
이렇게 하면 다음뷰와 SNS 공유버튼을 사용할 준비는 모두 끝이 납니다. 티스토리를 기준으로 본문 코드 중에 원하는 곳에 붙여 넣으시면 됩니다. 저 같은 경우 애드센스 아래에 넣었기 때문에 article_rep_desc 코드 바로 윗 부분에다 넣어서 사용하고 있습니다.
위 코드를 사용하시면 거의 대부분의 브라우저에서도 정상적으로 보일 것입니다. 지랄 맞지만 아직까지는 절대 포기 할수 없는 IE6에서도 레이어 깨짐 없이 정상적으로 보일 것입니다. 언제나 느끼는 거지만 IE6까지 맞추기는 참 어렵네요. ㅜ.ㅜ
'블로그' 카테고리의 다른 글
| 블로거 인게 자랑 스러운데 자랑 할데가 없다 (17) | 2011.02.11 |
|---|---|
| 무료 배포 소셜 댓글창 라이브리(LiveRe) 자세한 설치 방법 (8) | 2011.01.26 |
| 따라 다니는 플로팅 배너 사용 방법 (36) | 2011.01.05 |
| 본문을 덮지 않고 따라 다니는 사이드 배너 사용 방법 (25) | 2010.12.22 |
| 블로그 방문객 감소 원인과 해결 방안 (30) | 2010.12.08 |
