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

워드프레스 정보를 제공하는 블로그 Avada 2020. 6. 17. 00:26 • 댓글:

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

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

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

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

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

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

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

 

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

AddThis를 사용하여 티스토리에 SNS 공유 아이콘 추가 현재 사용 중인 티스토리 기본 스킨인 #1이 깔끔하고 나름대로 괜찮지만 사이드바가 없어서 조금 허전하네요. 그래서 SNS 공유 아이콘을 추가��

avada.tistory.com

나름대로 유용한 것 같습니다. 지금은 모두 해제하고 스킨에서 제공하는 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으로 변경

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구�

avada.tistory.com

 

 

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

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 티스토리 블로그

avada.tistory.com

 

 

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

블로그를 운영하여 많은 돈을 벌 수 있다는 내용의 유튜브 영상들을 접한 적이 있을 것입니다. 어떤 분은 상상을 초월하는 수익을 얻기도 합니다. 다음 영상에서는 수익형 블로그의 주제에 대해

avada.tistory.com

베스트셀링 DIVI 테마
16주년 기념 세일!
자세히 보기