깔끔한 "Shareaholic" SNS 공유버튼 달았습니다.
그 동안 블로그 본문 아래에 달았던 SNS 공유 버튼을 "Shareaholic"로 바꿨습니다.
예전에 사용하던 "addthis" SNS 공유버튼도 좋았지만 "Shareaholic"가 훨씬 깔끔하고 제 블로그 스킨과 잘 어울리는 것 같았습니다. 아래가 제 블로그 본문 아래에 설치된 그대로입니다.
마우스를 한번 올려 보세요.
마우스를 올리면 아이콘이 위로 올라오는 모습이 무척 귀엽고 무엇보다 addthis와 달리 가운데 정렬이 됩니다.
SNS 공유버튼인 "Shareaholic" 설치방법을 간단히 안내해 드리겠습니다.
먼저 "Shareaholic" 사이트를 방문합니다.
위 화면에서 넥스트를 클릭하면 아래 화면으로 넘어 갑니다.
티스토리 블로그는 상단의 "Wedsite"를 선택합니다.
그러면 위 화면이 나오는데 연두색 박스가 기본적으로 설치되는 SNS입니다.
샘플에서 원치 않는 SNS 버튼은 마우스를 이용해 아래로 드래그 하시면 되고 아래 파란박스에서 필요한 것은 위로 끌어 올리시면 됩니다. 그리고 "Get Buttons"을 클릭하시면 아래 화면으로 넘어 갑니다.
상단의 "Get Media Rwsources"를 클릭하시고 압축을 푸셔서 자신의 블로그 Html/CSS 에서 파일업로드합니다. 그리고 아래의 소스를 자신의 블로그 붙이고 싶은 곳에 복사, 붙여넣기 하시면 됩니니다.
그 다음에 위의 그림에서 박스 친 부분을 찾아서 소스를 고쳐 주면 됩니다.
변경 전 : <div class="shr_class shareaholic-show-on-load">
변경 후 : <div class="shr_class shareaholic-show-on-load" style="margin: 0px 0px 20px 100px;">
마지막의 "margin: 0px 0px 20px 100px"이 순서대로 위, 오른쪽, 아래, 왼쪽에 해당되는 부분이니 숫자를 변경해 가면서 자신의 블로그에 적용해 보면 됩니다.
변경 전 : {Place_Path_Here}
변경 후 : ./images
위 소스 수정은 업로드한 파일의 위치를 잡아 주는 것입니다.
이상 아낌없이 주는 블로그, 이바구의 블로그 팁이었습니다.
관련글 보기
