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

2020. 6. 17. 00:26 | 댓글 16

지난주에 이 티스토리 블로그의 스킨을 북클럽에서 고래 스킨 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

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    [찌쏘]'s Magazine

    스킨변경하셨군요. 기존과 UI는 동일한듯한데, 속도는 엄청 빠른것같은데요?
    항상 궁금했던 사이드바 STICKY 가 어찌적용되었는지 궁금합니다.
    저는 스크롤내리면 안움직이다가 마지막에 움직이는데, AVADA님 스킨은 사이드바가 함께 내려온 이후에 사이드바 끝지점에서 멈추고 본문은 계속 스크롤되더라고요

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.06.17 18:32 신고

      안녕하세요, 찌쏘.

      고래 스킨이라는 티스토리 스킨으로 변경했습니다. 구글과 네이버에 최적화되어 있고 애드센스에도 최적화되어 있다고 하네요.ㅎㅎ

      실제로 애드센스 수익이 증가하는지 지켜볼 생각입니다.

      큰 문제가 없으면 이제 계속 이 스킨을 계속 사용할 생각입니다.

      사이드바 고정 방법을 이 블로그에서 다룬 적이 있는데요. 당시 sticky 속성으로 설정했을 것입니다.

      이번에는 flex 모델을 이용하여 적용해보았습니다. IE에서는 작동하지 않겠지만, IE는 테스트할 방법도 없고 해서 무시하기로 했어요.

      조만간 자세한 방법을 설명해볼게요.

      지난 번 방식이 좋은지, 아니면 지금 방식이 좋은지 판단이 서지 않네요.

  2. thumbnail
    空空(공공)

    전 SNS를 지금 하지 않지만 하게 되면 참고해야 할것 같습니다..ㅎ
    비오는 목요일입니다.
    오늘도 행복한 하루 되시기 바랍니다,

  3. thumbnail
    열매맺는나무

    고래 4.0으로 업데이트 하셨군요.
    전 아직 이전 버전을 사용하고 있습니다. 바뀐 점이 많은가요?
    그냥 써야 할지, 아니면 업데이트를 해야할지 망설이고 있습니다.

  4. thumbnail
    탁이

    안녕하세요. 유익한 정보 감사합니다. 적용해 보니 아이콘이 가로로 나오는데, 아이콘을 세로로 정렬하려면 어떻게 해야 할까요?

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.09.12 10:07 신고

      안녕하세요?

      고래스킨의 경우 다음과 같은 CSS 코드를 사용하면 개별 소셜 아이콘이 세로로 정렬될 것입니다.

      .e-content.post-content ol, .e-content.post-content ul {
      display: block;
      padding-left: 15px;
      }

      다른 스킨을 사용하는 경우 위의 코드를 적절히 응용하시기 바랍니다.

      실제 적용하여 문제가 나타나는 블로그 URL을 알려주시면 제가 정확한 코드를 확인하여 알려드리도록 하겠습니다.

  5. thumbnail
    탁이

    답글 감사합니다. 답글에 답글을 달지 못해서 새로 댓글을 답니다. (그러고 보니 고래스킨 댓글에 댓글을 다는 기능이 없군요) 알려주신대로 해봤는데 세로정령이 잘 안되네요ㅠㅠ

  6. thumbnail
    충전♥

    덕분에 수월하게 수정했어요. 감사드립니다. ^^
    한가지 궁금한 것이 있어요.
    피시로 볼땐 하트 달려있는 공감버튼과 고래스킨 공유버튼이
    제자리를 잘 찾은 것 같은데요.

    그런데 모바일로 볼 때에는 공감버튼은 가운데이고
    공유버튼은 오른쪽에 있어서 두개가 어수선하게 보이는데
    두개를 다같이 가운데로 정렬하든지 오른쪽에 정렬하든지
    같은 쪽에 있음 좋을 것 같은데 방법이 없을까요?

  7. thumbnail
    충전♥

    한가지만 더 여쭤봐도 될까요.제가 일치하는 콘텐츠를 달고 있는데요.
    모바일로 봤을때 일콘 바로 아래에 공감버튼이 있고
    그 아래에 고래스킨 공유 버튼이 있어요.
    일콘과 공감버튼 사이 간격은 조금 넓게 하고
    공유버튼과 공감버튼 사이 간격은 조금 줄이고 싶은데
    이것도 가능할까요.