티스토리 고래 스킨에서 SNS 공유 아이콘을 사이드에 고정시키는 방법

지난주에 이 티스토리 블로그의 스킨을 북클럽에서 고래 스킨 4.0으로 바꾸었습니다. 고래 스킨에는 글 하단에 SNS 공유 아이콘이 표시됩니다. 그러므로 별도의 SNS 플러그인을 사용할 필요 없이 스킨에 내장된 기능을 사용하면 됩니다. 저는 PC에서 글 하단에 표시되는 SNS 아이콘을 왼쪽에 붙박이로 표시되도록 바꾸었습니다.

티스토리 블로그에 SNS 공유 아이콘을 표시하는 방법

티스토리에 SNS 아이콘을 표시하는 방법으로 크게 두 가지를 생각해볼 수 있습니다. 하나는 티스토리에서 제공하는 플러그인을 사용하는 것이고, 다른 하나는 외부 서비스를 이용하는 것입니다.

티스토리에서는 플러그인 메뉴에서 SNS 글보내기 플러그인을 설치하여 SNS 공유 버튼을 글 하단에 표시할 수 있습니다.

티스토리의 SNS 글보내기 플러그인

하지만 개인적인 생각에는 이 플러그인이 그리 유용하지 않는 것 같습니다. 지원하는 소셜 네트워크가 3개밖에 없고 버튼이 눈에 잘 띄지 않습니다.

다른 방법으로 AddThis와 같은 서비스를 이용하여 SNS 버튼을 표시할 수 있습니다. 이 블로그에서는 AddThis 서비스를 이용하여 썸네일 형태의 관련 글과 SNS 공유 버튼을 사용해왔습니다.

티스토리에서 SNS 공유 아이콘(라인, 카카오톡 포함) 추가

나름대로 유용한 것 같습니다. 지금은 모두 해제하고 스킨에서 제공하는 SNS 공유 버튼을 사용하고 있습니다. 그리고 스킨에서는 티스토리에서 제공하는 관련 글 기능 ("카테고리 글 더 보기" 플러그인)을 사용할 수 있도록 세팅되어 있지만, 관련 글 기능 대신 구글 애드센스의 "일치하는 콘텐츠" 광고 기능을 활용하고 있습니다.

구글 애드센스 '일치하는 콘텐츠' 광고

고래 스킨 4.0에서 SNS 공유 버튼을 사이드에 고정하는 방법

이번에 새로 바꾼 고래 스킨 4.0에는 글 하단에 소셜 네트워크 공유 버튼이 기본적으로 표시되고 있습니다.

저는 이것을 데스크톱에서는 왼쪽에 고정되도록 바꾸어보았습니다.

붙박이 형식으로 고정된 SNS 공유 버튼

마우스를 아래로 스크롤해도 왼쪽에 고정되어 있습니다. 이런 방식으로 SNS 공유 버튼을 표시하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* SNS 공유 버튼 왼쪽에 고정 */

.post-content .sns-go {
    text-align: center;
}


@media only screen and (min-width: 1220px) {
.sns-go {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
}

.post-content .sns-go li {
    display: block;
}
}

CSS 코드를 추가하는 방법

티스토리에서 CSS 코드를 추가하려면 꾸미기 > 스킨 편집 > html 편집을 클릭한 다음 CSS 탭으로 이동하여 맨 아래에 코드 스니펫을 추가하면 됩니다.

참고

티스토리 스킨 고래 스킨 4.0으로 변경

 

티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법

 

수익형 블로그, 어떤 주제로 수익을 낼 수 있을까?